By: Chad Bell
When a designer starts a project from scratch, a good amount of time is usually spent on setting margins, text spacing (padding), positioning (floats), and defining sections of content (div). The 960-Grid is a favorite method of Zen Den designers to improve the structure and design of web layouts.
How exactly does this work? Think of it as baking cookies from scratch. You still have to use pre-made flour as one of your ingredients – the 960-Grid is the flour in your concoction.
Recipe for 960-Grid
Ingredients:
Lightweight – The 960 Grid is a lightweight CSS framework for constructing your web content. In other words, it’s adaptable, browser-friendly, and easy to use!
Flexible – If nothing else, its flexibility has made the 960 Grid the most popular system used on many Web2 sites and design templates.
Efficient – It helps the designer to quickly prototype the layout in any number of columns (e.g. 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 col, etc.)
Directions:
The grid is comprised of a fixed number of columns within a fixed 960 pixel wide layout. There are various column options to choose from. The most popular are the 12 column and 16 column variants.
The 12-column layout consists of 12 column grids, 60 pixels wide with a 10-pixel gutter on each side.
The 16-column layout consists of 16 column grids, 40 pixels wide with 10 pixel gutters on each side.
Remember, not all websites are created equally. For example, the 16-column layout is best used for websites with the more than normal amount of content sections (divs).
Result:
It saves time, money, and frustration.
By reducing the amount of CSS and markup that must be duplicated each time a new project begins, the 960-Grid provides the designer an advantageous starting point.
There are also many features that the 960-Grid brings to the table including source ordering which provides SEO benefits, focused functionality, solid cross-browser and multi-platform support. Subtle, but significant, each function reduces the amount of project hours necessary – which can become very costly.
In addition, the 960-Grid provides built-in support for non-compliant browsers allowing for shorter test phases. This means less time spent on fixing bugs and more time spent on designing.
The overall outcome of using this wonderful system is a well-balanced and sophisticated design.
At the end of the day, the 960-Grid makes for a great base when creating visually delectable designs from scratch. If you want to hear more about this this system or any other one of our ingredients, feel free to leave us a comment and the designers at Zen Den would be happy to fill you in!
