Ad

Showing posts with label columns. Show all posts
Showing posts with label columns. Show all posts

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.