This article was originally published on 24th May 2008.  It was edited on 30th September 2008 as my thinking has changed on this subject.  Read a better post on the subject of grids.

One of the tenets of modern web design is use a grid. Online design giants (such as Khoi Vinh and Mark Boulton) have sought to both expound this view and explore how CSS can help achieve precise, grid-based layouts. The word appears to have spread outside of the design community: newspapers especially are using grids as the underlying structure for their online presence (see Vinh’s New York Times design, for example).

Grids are good

This makes apparent sense. After all, the whole point of a grid is that it establishes a visual rhythm, which is a great aid to reading. But is applying a tight, complex grid to a site the best way of making it more readable?

Both Vinh and Boulton come from a print background where the belief in the goodness of grids has been established for decades; however, reading a poster or a newspaper is a different experience from reading a web page.

Problems with grids

Of course, this doesn’t necessarily obviate the value of the grid. But I think the following concerns do apply:

1. Different online texts may require different structural approaches. If a designer is seeking to replicate a newspaper layout on the screen then a grid would be entirely appropriate. But is a grid appropriate for an encyclopedia entry? An advert for a pram on eBay? An online store? A blog?
2. Online editions of newspapers are scared of not placing links to content on their front page, presumably because they don’t think readers will take the time to click through to the information they want.  This results in some huge front pages, where the use of a complex grid is necessary to order the content.  But the use of a grid is not the solution to a design problem here: newspapers should look to reduce the amount of content they place on their front pages (I’ve discussed this in relation to The Guardian).  In a sense, the use of a grid is exacerbating the fundamental problem.
3. Grids could encourage design decisions that don’t aid usability and readability. Faced with lots of different elements within a page grid, readers may become confused as they scan the page for information they feel is relevant, even if that information is presented rhythmically. I suspect that simple pages are the easiest to comprehend – reducing the number of columns and increasing font size should be the designer’s goal (it’s interesting to note that both Vinh and Boulton use small fonts for their body copy). Vinh redesigns the Yahoo front page using a grid – but surely Yahoo’s problem is with its information architecture. It needs to simplify and remove elements from its home page rather than align them in a better way.
4. Grids make CSS complicated. Just like tables did for HTML.

I’m aware that these are designers with lots of education and experience in the field, so I could well be completely wrong. What do you think?