The 960 Grid System: Grids, but for the web.

This year I have been getting into using grids for my print work. Naturally, when I started designing for web I wanted to use a grid for that too. I began confusing myself at first over what to do with regards to screen size. We have been told in our web workshops at college to design for the lowest common denominator of 800x600px but I found such a small resolution constricting, and quite frankly, ridiculous. It's 2009 and if your still rocking 800x600 then you need a new monitor, and/or possibly a new computer. The rise of HD video has meant that even the smallest of netbooks come with at least a 720p (1280x720px) screen. In fact the only devices I can think of that come with screen resolutions that small are smartphones and they tend to have optimised mobile browsers to deal with today's content-rich web that will shrink a website to fit and allow a user to zoom in specific parts, such as Safari on the iPhone.

I decided I was going to use a higher resolution but the problem of what that should be still remained. After some digging about on the internet I found out about the 960 Grid System, a grid designed exactly because of this issue. It is based on a width of 960 pixels and comes in 12 or 16 column flavours. The reason behind 960px is explained on their website:

"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."

 It turns out there are a few sites that use this grid, or at least to which the grid can be applied.

Engadget is technology and gadget website. They have recently gone through a redesign, and a very nice one at that. Lots of neat typography and layout, I'd recommend you look at it anyway. However, the site is definitely based on a 960px width as can be seen above with the 960 Grid laid ontop of it. You can also start to pick out the column width used too. It is shown on a 32 column variant.

To learn more about the 960.gs head over to their website!