As a developer, i’m often great at solving technical issues like image creations, database access, web services and websites. My skills at creating good looking web pages leaves a lot to be desired. I was asleep during the courses at uni for graphic arts, so i’ve come to appreciate that talent for doing so. Thus hats off to Nathan Smith and co for devising a cunning plan to layout good looking web pages. He calls this system 960.GS
because it is a grid system that uses columns to make a consistent layout of 12, 16 or 24 columns. The number of pixels of gutter between each column is set as 10px to the left and 10px to the right of each column. Nathan gives us a nice map of potential grid layouts here. As we can see, 940px is the maximum width for a single column version as there are 10px at each end for a maximum of 960 pixels. Various combinations of horizontal column widths are possible.
Any two column format would always have a maximum combined width of 920px as the right end of the first column has a 10px gutter plus the 10px gutter starting before column two. For each additional column in our horizontal layout, we loose a further 20px of content placement.
Using the 960.GS philosophy, columns can be combined to form larger patterns. Any given pattern will always yield a 960px width. The 12 column version gives 60px to each column, while the 16-column grid consists of 40 pixel increments.
This system is great as a rapid prototype tool, but could be used equally well as a part of an integrated production environment. Take a look at http://thingsthatarebrown.com/ as Matt Brown shows us a beautiful site layed out in 16 columns using the 960.GS system.
Thanx Nat, and thanx Matt !!
A Fluid 960 Version, similar to the 960.GS sytem, offers some additional flexibility in the handling of cell placements within the grid. I was able to mock-up a sample using this system :
And it is flexible enough to suit my design requirements.
Further reading reference: Web Designer Depot provides a much more clear explanation of the 960 GS system.