Optimal Layouts: Why I Like the 960 Grid

Oct 7th, 2009 | By | Category: Recommendations

I routinely check web viewing trends as far as what browsers, operating systems and screen resolutions the bulk of the web is using.  I feel it’s part of any designer / UI –  UX engineer’s job to do so.  Sometimes the trends make me happy, like the most recent ones about IE6 (the bane of all web design existence).  IE6 is now at about 12% market share.  What this means is, as designers, we can finally stop writing hacks to make sites work properly in it.  I digress…

One of the main reasons to continuously check is to make sure we, in the industry, are doing right by our clients in what we recommend.   Several years ago, it was standard practice to design fixed width sites (sites that don’t adjust for the width of the screen) that worked well with 800 x 600 screen resolution.  Why?  Because a huge number of screens used it.  These days, less than 4% of screens use this resolution so it makes no sense to design for those people (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?

Pretty, ain't it?

You may not know what a screen resolution is, or why it’s important.  You don’t need to.  My job is to help you understand how it affects you.  As of January of 2009, over 93% of browsers use a screen resolution of 1024 pixels (think of them as dots) wide or greater.  Once again, happy news.  This cements the idea that a fixed width layout can be designed to fit neatly within this screen resolution.  The 960 Grid is a simple CSS framework (I know, big technical jargony 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 Cascading Style Sheets.  CSS is a set of instructions to your browser that explains how it should display the parts of a page.  Some browsers are smart (Firefox, Chrome, Opera and sometimes Safari) and some are really, extremely, very stupid (IE6 and increasingly, IE8).  They all have quirks, but some are better than others at the important stuff.  Their intelligence is derived from the way they handle standard CSS.  There’s a whole science to making certain browsers understand what should be simple instructions, but that’s another story for another day.

So, 960 pixels doesn’t sound like 1024, does it?  There is a good reason for that.  If you look to your right you’ll see a vertical scroll bar.  That takes up between 20 and 30 pixels depending on your browser and your operating system settings.  Now we’re down to 1004 – 994 pixels.  There is sometimes a bit of a border around the browser window which sucks up more space.  Let’s assume a happy medium of 999 pixels of viewable space.  That gives us what’s called a trough (an area of nothing) on either side of the content that’s about 15 pixels wide.  That’s perfect.  What about on my 1680 pixel wide screen, you ask?  Well, there is a significant difference in the trough, but it still looks nice.

When it comes to usability, 960 will cover most of the bases unless you happen to be HavenWorks.com.  That site is broken.  When designing a site on a 960 grid, there are lots of options.  You can set a background 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 little margin between the columns.  Look at the home page of this site as an example.  It’s a three column layout while the subsequent pages are two.

The 960 grid system works well for most applications.  Do I use it exclusively?  No.  Some designers do, but there are reasons not to.  Mostly they revolve around target audience.  For most applications, 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 something else).  Talk to me about what would be right for your site.

Reblog this post [with Zemanta]
Be Sociable, Share!
Tags: , , , ,

Leave Comment