Wordpress Theme Designer – Patrick Sy

Slicing templates from a psd file sure can be a messy job at times, this is specially true if the designer has no background whatsoever to html. One very helpful tool, or rather, system to use in designing web pages is the 960 grid by Nathan Smith. This system’s principle is simple – to make use of a highly flexible width-dimension to layout a page visible to the most common user-screen-resolution; In this case, a 960-pixel base width.

Note: demo files available to download from the website

Why use 960 ( pixels )

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Laying it out

This system comes with two variants: a 12 and 16-column layout, one that’s based on partitions of 60-pixels wide the other 40-pixels wide, respectively, each with a 10-pixel margin on both sides.

Here is a screen-shot of the the 12-column layout:

And here is a the 16-column layout in action:

The premise of the system is ideally suited to hasten prototyping, and as with all other systems, may seem confusing and intimidating to use (only) in the beginning, but believe me, it’s worth the time to learn as it will go a long way when you get used to designing with it.

Verdict

Overall, the 960 grid is truly a systematic approach to slicing up a template -one that has the potential to cut production time in half ( if used correctly, me thinks), take note however, that it is not an all-in-one solution to your css and layout issues but merely a guide to follow. In the end, you may or may not choose to use it, but the important thing to remember about this system is the way it approaches the layout.

You can choose to use any number (apart from 960) that you wish as a base for your width as long as you keep in mind the principle behind the 960 grid system -which by the way is the great thing about it, just remember the concept and you won’t find yourself limited to a certain number. The important thing is not the mastery of the tool, but the mastery of the concept behind it.

Learn the rules, so you know how to break them -as needed.