When we started work on the Oxford Philomusica site - which looks really fantastic - we were introduced to the 960 grid system for website design.  It was new to us and it probably shouldn't have been since we've been working of websites here in Witney for a while.

The 960 grid design for websites is all about improving design to implementation workflow - and since we're always looking to fine tune our processes as we ramp up our £450 website business, it was an immediate hit.  So what is it?

It's a structure to design websites in.  It uses a grid of 960px wide which can easily be split into 12, 16 or 24 columns.  Each column has a margin of  10px each side creating 20px gutters between them.  You can then prototype up a site design quickly by placing blocks onto these columns - making sure you have plenty of nice whitespace between them.

Each section of a site can be a different number of spanning columns. Say the top is one column for a banner which spans all 12 grid columns, and then the following text is split in 2 columns spanning 6 grid columns each.  This makes for interesting and flexible looking layouts which make the most of both laptop, widescreen and smartphone screens.

We've been trying it on a lot of our newer sites and it does work.  The fact that it's being accepted as a good method for web design will help immensely as we begin to build relationships with graphic designers who want their work reflected in the websites we create.

For more information on the grid system take a quick look at 960 Grid System.