Implementing a columnar grid system on Graceful Exits

In the spirit of getting it out there, I've now begun implementing a columnar grid system on my site. As discussed in Mark Boulton's excellent talk at DrupalCon Paris 2009, and reported briefly in my live notes from the conference. such grid systems are a basic underpinning of consistency and visual clarity on a site. You start at the grid, then decide how your actual page elements are going to fit into it.

This means you can begin with a columnar grid of five evenly-sized columns (such as de Standaard's website, one of Mark's examples) but then build e.g. a two- or three-column layout on top of it (or, as de Standaard seem to have done, a sort of 2.5-column layout). Your columns need not be evenly spaced, and you don't even need to use columns at all: modular and hierarchical grids can be used to great effect, although they suit print somewhat more than the web. It's hard to overstress the importance of helping the user to make these implicit connections: the grid gives your site visual predictability, and means your users are more likely to find what they want; it's implicitly tied to both visual aesthetics and also basic site user experience and usability.

I decided to have a seven-column grid for this site, as that gave me a lot of flexibility in page layouts: a three-column page could be 2-3-2 or 1-5-1. Consistency of field combinations is important, but as with the Guardian's website, as long as your underlying columnar lets users make that implicit connection without realising it, you can still push the boundaries of inconsistency on top of that. I decided on a field width of 124px, with a 15px margin between fields. Seven columns and six margins make 958px, which is comfortably close to the equally comfortable yet ultimately arbitrary 960px limit I'm personally used to.

So far, as I've not exposed much of the site, you won't see the effect of a lot of this, although the blog index should now be broadly following a 2-3-2 layout. When I've got the full content for the finalized IA in place then you should see more of the effect of being able to vary page layout while sticking to the seven-column grid. It looks scrappy now, and will probably look scrappy then---I'm not exactly a perfectionist when it comes to design---but I'm far prouder of it than any other site design I've done from scratch.