12. Columns and Grids

The difficulty of grid systems in web pages, the compromise of columns.

I seem to quite often go back and forth between creating organic layouts with intuitive proportions, and creating a grid that I can hang my various elements on. Lately I’ve been more interested in the latter. Frequently I’ve caught myself calculating in my head what 750 divided by 3 minus two 10px margins equals.
One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. Throw in any compensation for font scaling, and it’s easy to lose any semblance of control over the way a layout expands downward.
So the focus is usually on the horizontal layout, which usually means columns. (Incidentally, if you’re ever wondering why fixed layouts are so popular amongst designers, this has a lot to do with it — it’s awfully difficult to build any coherent form of grid when you lose control of proportions in both dimensions at once.)

1 Column

As simple as it gets, the one-column layout has been around since the beginning of the web. 1994 gave us a grey background and black Times in a single column running down a browser window, the most primitive one-column possible (although calling it that is a bit of a stretch. See: an early Yahoo). It has evolved nicely since then, and some recent redesigns are putting it to good use. (See: Garrett Dimon)

2 Columns

The realm of the blogger. Two columns are utilitarian and perfect for presenting content and further navigation/archives/whatever side-by-side. Popular variations include the fixed sidebar/liquid content area setup (See: Malarkey) and the fixed-width, narrower sidebar/wider content area setup (See: the sadly now-defunct Weightshift).

Layouts with 2 columns or more force a choice that a single column doesn’t: equally sized columns, or varied widths? Ratios are important, and certain width combinations are more aesthetically pleasing than others. It’s pretty hard to go wrong with 1:1 widths (or 1:1:1, or more). It’s a little more difficult to choose non-equal sizing because there are no hard rules. You could pick a 5:8 Golden ratio (in a 750 pixel wide layout, translating to roughly 290px and 460px), a 3:4 ratio (320px and 430px), a 1:2 double square (250px and 500px), and so on. (Pleasing rhythmic proportions often share proportions with musical time scales, as you may have noticed.)

3 Columns

Once you add a third column, the options increase. What a third column enables is the possibility of a virtual column, one that is not absolutely defined in the layout, but exists by proxy. Consider this site, for example. On all pages with a sidebar, it appears to be a two-column layout. On the home page, the larger red panels imply the existence of three equal-sized columns. I haven’t pushed the possibilities of this third column yet, but this design does allow for it if I ever feel so inclined.

As well, 3 column layouts allow for overlapping elements. Consider the home page of Stopdesign, and how the leftmost two columns are joined by the overlapping featured article. Of course, it’s theoretically possible to pull this off with only two columns, but I rarely see it done on the web. A 2 column layout has traditionally meant that the content of each column lives in that column, never to overlap.

4 Columns

4 column layouts are where screen size constraints start becoming more obvious. With only so many pixels per column, it rarely makes sense to rely on 4 equal-sized, side-by-side columns on a site. StyleGala redesigned last year to a widescreen format with 4 equal columns; to compensate, a narrower version exists with 3 columns instead.

Not to say the columns need to be equally sized. Josh Dura appears to have made a stab toward a smaller-sized 4 column layout, with 3 skinny columns on either side of a larger content area. (Although there’s plenty of overlapping going on, so in some places it’s 2 columns, in other places it’s 3. Whew!)

More Columns

4 columns is hardly the limit though, even within sensible designs that don’t push the width requirements too hard. Consider B. Adam Howell’s redesign — your screen size determines how many columns you see, up to six. And the entire thing stretches to fill the screen, so it’s resolution-independent.

And you knew I was getting to Subtraction eventually, right? Khoi’s layout turned heads for more than just its black-and-white sparseness. Subtraction uses an equal-sized 8-column grid, with intelligent overlapping and column arrangement to make it seem quite a bit less.
What’s particularly clever about Subtraction is how all elements on the page intentionally fit into the grid. Whether it’s the Quick Access panel on the right spanning 2 columns, a content image spanning half the page (4 columns), or a caption sitting in the left-most column, every element on the page has a specific place within the grid and it all meshes wonderfully.