Site Navigation

Jun 20, 2012

960px Grid Design

What is a 960px grid design? I had the same question myself. I stumbled across this concept when a co-worker wrote a post about Twitter Bootstrap. This is a HTML5 and CSS3 framework for developing web applications using 960px width and a 12 column grid. So why 960px and why a 12 column grid? Well the answer to that is a bit complicated. I found the 960 Grid site which provided a little more information.

What is a 960px Grid system?
A process for designing web sites based on classic print typography principles. The width is based on a common minimum laptop display size of 1024x768. The 960px size fits well on that screen size. In addition, 960 gives you a number of options for creating grids to lay out your page on. At least that is my understanding, I have a lot more reading to do.

Why use it?
Bottom line, you get beautiful design. If you go to the 960.gs site, they include a number of examples. It just seems to give sites a nice balance and weight to the layouts.

Site Redesigns
This perked my interest as I am in the process of redesigning my sites for HTML5 and mobile devices. It is still early days, but I have some preliminary stuff up. I have only applied the 960 grid to the Blue Sky example, I have not got to it yet on Abbey Workshop.
Anyway, as I make progress I will try to make some additional posts on the subject.
Post a Comment

Favorite Links Feed