After reading Mark Boulton’s excellent book “A practical guide to designing for the web”, I’ve taken an interest in grid design. Both as a means of laying out a page in the early stages of Photoshop development, and as a developmental tool for css coding. Whilst any number of layout conventions exist i’ve found this to be the most useful, and the easiest to implement.
With both a 16 column and 12 column variant the system takes 960px as a standard width. Using 16 columns each division takes a 40 pixel width with ten pixels of margin either side, this creates a 20px gutter between each column. Similarly 12 columns results in 60 pixel widths.
The use of a 960px width also makes it ideal for designing accessible layouts for smaller monitors, and older browsers.
Using this system i’ve been able to improve the compositional layout of designs, whilst this by no means should be used for every design. The system provides a sound base for website layout.
I’ve been using it primarily as a layout tool in Photoshop, but you can go further and implement layouts using the css framework provided. Whilst I’m yet to delve into this you can find an excellent tutorial here: Prototyping-with-the-grid-960-css-framework/
Mark Boulton also offers an alternative technique here: Designing grid systems
Andrée Hansson has created a superb browser overlay to check your design in real time whilst coding, visit http://gridder.andreehansson.se/ and bookmark the JS overlay.
