Two Web Design Finds: 960 Grid System and Browser Grading

While working on a relatively new project today, I managed to trip over two cool concepts.

960 Grid System - this is a sophisticated sounding name for a relatively simple concept. When you're working with a CSS layout, inevitably, you'll want to lay stuff out in a grid format. In the bad old days, this meant tables. These days, it means floating stuff around, which is just fine. But, I've been at this long enough to know that there had to be a better way of laying out boxes in a grid than developing purely custom CSS. The 960 Grid System tackles just this.

You might have code like this:

<div class='left-col'>Foo</div>
<div class='center-col'>Bar</div>
<div class='right-col'>Baz</div>

That's not terrible, but it's not particularly clear, and when you start to vary the number of columns and what can sit where, this method gets old quickly. I've tried hard coding the width directly as an inline style, and that works, but I really like the 960 approach. Using that approach, you could say:

<div class='container_12'>
 <div class='grid_3'>Foo</div>
 <div class='grid_2'>Bar</div>
 <div class='grid_7'>Baz</div>
</div>

That is, you're dealing with a 12 column grid, and the 3 columns are split into 3/12'ths, 2/12'ths and 7/12ths respectively. Using a CSS generator you can have the 12 column grid correspond to any actual pixel size.

This approach seems to find a nice balance between expressive code and clean code.

I'm really not doing the facility justice - check it out at: 960.gs and view their presentation.

My second find relates to Graded Browser Support. This is more a conceptual idea rather than a tool. They explain in their What and Why section:

n the first 10 years of professional web development, back in the early ‘90s, browser support was binary: Do you — or don’t you — support a given browser? When the answer was “No”, user access to the site was often actively prevented. In the years following IE5’s release in 1998, professional web designers and developers have become accustomed to asking at the outset of any new undertaking, “Do I have to support Netscape 4.x browsers for this project?”

By contrast, in modern web development we must support all browsers. Choosing to exclude a segment of users is inappropriate, and, with a “Graded Browser Support” strategy, unnecessary.

It goes on to clearly explain why all browsers should be supported, yet the definition of supported may need to be modified. Given the outrageous number of browser combinations you can code for, any approach to taming this challenge is appreciated.

Definitely worth a read and I expect it will come in handy next time I get a bug report from someone explaining to me that a web app won't work on their Brother-in-Law's Windows ME, Internet Explorer 5 browser.