My first introduction to Grid systems was when Smashing magazine had an article on the application of the Divine proportion or PI to design. Since then, I have locked on to the grid system, and the first thing that I do when designing a new website is to add my 960stylesheets, and copy my 960 template to Photoshop.

Why 960

Most browsers on the internet uses a screen resolution of 1024×768 pixels. Defining a maximum width to your style sheet of 960pixels uses up the biggest part of the most used screen size.

The 960 grid system then assist with defining vertical bands to code the website in.

It makes for easy deployment of a design and aligns perfectly. The integration of the 960 grid system must be one of the best innovations that designers have seen this past couple of years.

Enter the fluid 960 grid

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.

One of the issues that the fluid grid system addresses that have up to now been one of the biggest critiques of the 960 gs, is the fact that it extends to building a fluid web space and not just a fixed width system. It must be said, that the feeling that I get when discussing fluid design with people is that there is a hesitancy to use a fluid layout. I think that we will see the use of a fixed with layout for many years to come.

Main reason why I’m blogging about this system is that I have been to a client today to talk about a site redesign that they asked, and we decided that there is a lot of elements that we like about this system, so over the next couple of weeks, I will get my feet wet with regards to this grid.

If you would like to see this amazing system in action, you can click here