Website Design Tools – 960.GS

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

Copyright Nathan Smith
Copyright Nathan Smith

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.

Home Page of Nathan Smith's 960.GS Grid System
Home Page of Nathan Smith's 960.GS Grid System

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.

Matt Brown Demonstrates How to Use 16 Column Version of 960.GS
Matt Brown Demonstrates How to Use 16 Column Version of 960.GS

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 :

Sample Mock-Up Using a Fluid 960 PX Grid

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s