14 May, 2008

How to choose your columns

I'd definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.

There are always exceptions, so here are a few examples of more than 3 columns used effectively.

Derek Powazek's blog site uses 3 columns for the main section of his blog, but 4 lower down.
The lower section is a kind of pick & mix, where the abundance of columns emphasises the "Take what you like" feel.


Amazon (UK) has two side columns, and products arranged centrally in 3 additional columns.
It works beacuse the purpose of each column is clear from its design. The left col is definitely navigation; the right column is "other stuff". The products in the middle are clearly tiled and separated by white space, so they don't overwhelm.


Popurls.com contains loads of pick-n-mix information, collating the hot links from other sites like digg and del.icio.us, but it still keeps to 3 columns for the main blocks of text.
Further down, it shows thumbnails of popular images on the photo-sharing site Flickr (and there are Youtube vids later). These are tiled in several columns, which is fine, because it's a sit-back, scan and pick your experience moment...


And here's a site that gets it wrong...

Here's All Things Web2.0 using 4 columns: 2 side columns and 2 central columns.
The downside of this layout is that you don't know where to start looking. Everything is somehow low-priority (partly because of the darkish background).
As we saw, Amazon differentiates the page to this extent, but the design helps you instantly identify what each area of screen real-estate is for, so it's not confusing.