Improving Design by Using a Grid System
When I first heard of grids for design (and frameworks for CSS as a matter of fact) I was quite sceptical. Why limit yourself to a predefined outline? Mathematical precision in a creative process? Well needless to say I was surprised with the outcome.
Obviously you do tend to repeat certain pieces of code over and over in a project, but a framework? Behind a word like that usually stands a complex set of predefined elements. Though solid and reliable, these are often not very flexible and not easily modifiable. And the last two features seem to be crucial for projects that involve html and css.
Deciding to Use a Grid System
It all started with the plan to redesign the ThinkSentient website. I whipped up a new, more elegant design. It wasn’t done using a grid or any vertical rhythm (other than going for the “feels good” approach). This lead to the idea of updating the look of the ThinkRobot blog, considering that both websites are intentionally very similar with only a different colour scheme.
The problems started when I was adding the extra pages for blog specific stuff. Unfortunately I have not realized that in Fireworks (CS4) when you move guides on one page they do not affect guides on another, while state changes do. And I found out only after ending up with over 7 pages with guides all over the place. Sigh.
I had no choice, I would need to reorder most of these pages, as one of the side effects of wondering guide lines was a sidebar of different widths. So I said to myself, might as well give that grid thing a try if I have to do all this work over again.
Choosing the Grid System
Personally I decided to go with the 960 Grid System – the 12 column variation. Due to the recent decision of finally ditching designing for 800×600 I wanted a framework that was suited for the 1024×768 resolution, and the wider the better. 960 is a good, easily divisible number, just as the official website claims.
Secondly I preferred something lightweight and easy to tweak, with not too many defaults. 960 combined with Eric Meyer’s CSS Reset Reloaded was the ideal solution for me.