Optimal Layouts: Why I Like the 960 Grid

I rou­tine­ly check web view­ing trends as far as what browsers, oper­at­ing sys­tems and screen res­o­lu­tions the bulk of the web is using. I feel it’s part of any design­er / UI — UX engineer’s job to do so. Some­times the trends make me hap­py, like the most recent ones about IE6 (the bane of all web design exis­tence). IE6 is now at about 12% mar­ket share. What this means is, as design­ers, we can final­ly stop writ­ing hacks to make sites work prop­er­ly in it. I digress…

One of the main rea­sons to con­tin­u­ous­ly check is to make sure we, in the indus­try, are doing right by our clients in what we rec­om­mend. Sev­er­al years ago, it was stan­dard prac­tice to design fixed width sites (sites that don’t adjust for the width of the screen) that worked well with 800 x 600 screen res­o­lu­tion. Why? Because a huge num­ber of screens used it. These days, less than 4% of screens use this res­o­lu­tion so it makes no sense to design for those peo­ple (if that’s you and you don’t live in Sub-Saha­ran Africa, it’s time to move up). This brings me to the point of the arti­cle.

Pret­ty, ain’t it?

You may not know what a screen res­o­lu­tion is, or why it’s impor­tant. You don’t need to. My job is to help you under­stand how it affects you. As of Jan­u­ary of 2009, over 93% of browsers use a screen res­o­lu­tion of 1024 pix­els (think of them as dots) wide or greater. Once again, hap­py news. This cements the idea that a fixed width lay­out can be designed to fit neat­ly with­in this screen res­o­lu­tion. The 960 Grid is a sim­ple CSS frame­work (I know, big tech­ni­cal jar­gony words again. I promise to explain) which makes use of almost the entire screen width of a brows­er on a 1024 pix­el wide screen.

What is CSS? It stands for Cas­cad­ing Style Sheets. CSS is a set of instruc­tions to your brows­er that explains how it should dis­play the parts of a page. Some browsers are smart (Fire­fox, Chrome, Opera and some­times Safari) and some are real­ly, extreme­ly, very stu­pid (IE6 and increas­ing­ly, IE8). They all have quirks, but some are bet­ter than oth­ers at the impor­tant stuff. Their intel­li­gence is derived from the way they han­dle stan­dard CSS. There’s a whole sci­ence to mak­ing cer­tain browsers under­stand what should be sim­ple instruc­tions, but that’s anoth­er sto­ry for anoth­er day.

So, 960 pix­els doesn’t sound like 1024, does it? There is a good rea­son for that. If you look to your right you’ll see a ver­ti­cal scroll bar. That takes up between 20 and 30 pix­els depend­ing on your brows­er and your oper­at­ing sys­tem set­tings. Now we’re down to 1004 — 994 pix­els. There is some­times a bit of a bor­der around the brows­er win­dow which sucks up more space. Let’s assume a hap­py medi­um of 999 pix­els of view­able space. That gives us what’s called a trough (an area of noth­ing) on either side of the con­tent that’s about 15 pix­els wide. That’s per­fect. What about on my 1680 pix­el wide screen, you ask? Well, there is a sig­nif­i­cant dif­fer­ence in the trough, but it still looks nice.

When it comes to usabil­i­ty, 960 will cov­er most of the bases unless you hap­pen to be HavenWorks.com. That site is bro­ken. When design­ing a site on a 960 grid, there are lots of options. You can set a back­ground image that takes up some of that white space on larg­er screens, you can make it two columns, three columns and in rare cas­es, four columns. You can do all this and still leave a enough space for a lit­tle mar­gin between the columns. Look at the home page of this site as an exam­ple. It’s a three col­umn lay­out while the sub­se­quent pages are two.

The 960 grid sys­tem works well for most appli­ca­tions. Do I use it exclu­sive­ly? No. Some design­ers do, but there are rea­sons not to. Most­ly they revolve around tar­get audi­ence. For most appli­ca­tions, the 960 grid works for web design. This will like­ly be the case until 1024 pix­el wide screens go away and are replaced by 1280 (or some­thing else). Talk to me about what would be right for your site.