Why use grids?
The grid is now accepted as the best tool for positioning elements on a web page. But is this assumption correct?
May 24th, 2008. Written by Leon. Read the commentary.
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:
- 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?
- 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.
- 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.
- 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?
Enjoyed this post? Then please consider sharing it:
Written by Joey on May 26th, 2008
I’m certainly not an experienced designer in the field, but I have to disagree with most of the points you make here.
“Yet surely decisions over information architecture should take precedence over layout. Grids encourage certain information architectures.”
I disagree. They are both interconnected and should rely on one another to make things work. This reminds me of Jeffrey Zeldman’s quote: “Content precedes design. Design in the absence of content is not design, it’s decoration.” I also don’t think grids encourage certain information architectures. I think they enforce ALL information architectures. The whole purpose of using grids is all about usability and information architecture, not simply to make a design look nice.
“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?”
A grid is easily manipulated. A one column design is still based on a grid. Cut it in half and you have two, then four, then eight, then sixteen (and so on). I think a grid is suitable for almost any type of design online, it merely depends on how you choose to utilize the grid structure.
It’s nice to see the other side of the argument, though.