I rou­tinely 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 designer / UI - UX engineer’s job to do so. Some­times the trends make me happy, 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 finally stop writ­ing hacks to make sites work prop­erly in it. I digress…

One of the main rea­sons to con­tin­u­ously check is to make sure we, in the indus­try, are doing right by our clients in what we rec­om­mend. Sev­eral 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-Saharan Africa, it’s time to move up). This brings me to the point of the article.

Pretty, 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, happy news. This cements the idea that a fixed width lay­out can be designed to fit neatly within 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 browser on a 1024 pixel wide screen.

What is CSS? It stands for Cas­cad­ing Style Sheets. CSS is a set of instruc­tions to your browser 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 really, extremely, very stu­pid (IE6 and increas­ingly, 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 another story for another 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 browser 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 browser win­dow which sucks up more space. Let’s assume a happy medium 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 pixel 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­ity, 960 will cover 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 larger screens, you can make it two columns, three columns and in rare cases, 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­sively? No. Some design­ers do, but there are rea­sons not to. Mostly they revolve around tar­get audi­ence. For most appli­ca­tions, the 960 grid works for web design. This will likely be the case until 1024 pixel wide screens go away and are replaced by 1280 (or some­thing else). Talk to me about what would be right for your site.