Design: Getting Back to the Grid

Linda never thought she'd live long enough to see a magazine layout applied to Web design. She talks about the 960 Grid system in this article.

Then Came WordPress

After graduation from college, I couldn't have been happier to learn about WordPress and to take it on as my primary CMS (Content Management System) for Web content. How simple is WordPress, especially if you've already had experience with code? I fell in love with this free layout tool – I wrote loving articles about it – I even wrote an eBook about it.

And, I still love WordPress – I just don't like creating Web sites. I'd rather create content than create a Web site that – hopefully – is accessible, usable and beautiful to boot. That's far too much work for my simple mind.

Now, the cycles of the sun and moon have brought us all into the end of 2010 and to the cusp of 2011. Enter a design tool that is modern, yet ancient; a tool that is based upon – you guess it – THE GRID.

The 960 Grid System

As I was writing recent articles, I caught a glimpse of the 960 Grid System, but I ignored it. Now, I'm wondering if this system is the route to an old production manager's heart...and I wonder if it is the solution to a perfectly designed Web site.

I read the background to this system, and I found myself laughing (not AT the author, mind you, but at the concept) when I read this paragraph:

I first became interested in grid design via reading articles by Khoi Vinh and Mark Boulton. Initially, I must admit that I didn't fully grasp the concept. But, the more I thought about it, the more I realized that this time-tested practice from printing works well on the web. Like it or not, web pages essentially revolve around boxy shapes. Inevitably, these rectangles have to come together in some way or another to form a design.

Well, the concept lives on. And, it seems it is catching on. This is how it works:

The 960 Grid System uses common dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

For those more comfortable designing on a 24-column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case "i" or "l" might be easily missed.

In the repository at GitHub, you can download templates for Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp Design. Also: PDF sketch sheets + CSS files. You also can generate a custom CSS file, an HTML file and a Grid Overlay Bookmark.

I'm almost tempted to try it.

But, don't hold your breath, although some of the layouts shown on the 960 Grid System page are working for me visually. If you want to try the 960 Grid System yourself and have some other tools of the trade already on hand, I've made a list of tutorials in the conclusion below.