The Funniest Grid You Ever Saw

Khoi

19 years ago

It’s hard to deny the rightness of at least one complaint that some people have had about Behavior’s recent redesign for The Onion.com: there’s a heck of a lot of stuff on that home page. My defense is: there’s also a heck of a lot of free stuff on that home page — and througout the site, too. I’m not just talking about all of the archived content that, now unbound by the subscription model that previously restricted it from public consumption, has floated up to the front page for ready access — like old friends, they rotate in and out randomly to let you relive good times. I’m also talking about the new content that will now appear in the right-hand column, comedic tidbits released by the editorial staff every day between issues, again for a grand total of free. Not to mention the loads of ‘regular’ content that’s turned out faithfully every week. All of which justifies the abundance of advertisements — someone has to pay for all that great stuff.

So that adds up, and before long you have a page that, inevitably, people will consider crowded. I’d like to believe that we made a conscientious and serious effort at trying to present all that content with as much clarity as possible. We won’t win any awards for minimalism, but we did a very respectable job, in my opinion, that borrows best practices from online news sources that do it very well already. And we made sure to add a little extra goodness of our own: a flexible yet comprehensive layout grid that underpins every page on the site.

Daddy, Where Do Grids Come From?

For a more cogent lesson on exactly how to develop a grid from scratch, you’ll do better to look to the superb series of weblog posts on the subject from the brilliant Mark Boulton. Mark does a much better job than I can of tackling the creation of a grid solution from scratch; it’s always difficult to describe the chicken/egg quandary of determining the right number of columns, the right width of each column, and the right overall width of the canvas. I’ll discuss a little of that here, but what I’m going to focus on primarily is just demonstrating how the grid that we built for The Onion functions in practice.

Believe it or not, underlying every page of TheOnion.com are sixteen columns of 42 pixels each, separated by fifteen gutters (the empty white space between) of 10 pixels each, plus an additional, outsized column for the left-hand navigation. It’s an almost absurd number, I know, but it has a real purpose, because these pages are sufficiently complex that the practice of laying out elements on them requires lots of guidance.

Figure 1. The basic sixteen column grid.

The site will never display sixteen individual columns of content, of course, but dividing the page up so rigorously helped us in making logical decisions when placing items on the page — there’s always a column edge nearby with which to align an element, so fewer intuitive placement decisions must be made. This is the “rational” part of the term “rational grid,” and it’s exactly the intellectual part of this craft that gets lots of design geeks — like myself — all hot and bothered.

Column Combo Packs

With sixteen columns, it’s a simplistic mathematical process to determine the four basic ‘super-columns’ that we need on the home page; pairing four regular columns and three gutters creates a comfortable width of 198 pixels that works well for headlines and abstracts of appropriately short line length. We also combined two of those super-columns into a wider area for the lead story.

Figure 2. Combining columns into super-columns for the home page.

Advertising: It Rules Us…

One of the primary reasons for the complexity of these columns is the orderly accommodation of advertising units. The Onion is, after all, an ad-driven site, especially in the wake of its obsolesced, subscription-only archives model. The problem was that we had a mandate to provide for so much new advertising inventory that, without some logical approach to laying them out on a page, the result would have been considerably more jumbled than what we see in the final redesign.

Thanks to some careful preparatory math, a single super-column is just about the right size to showcase a wide skyscraper advertisement, and three combined super-columns plus the left-hand navigation area can accommodate a leaderboard advertisement across the top of the page — with a little bit of extra room where we ran a vertically-oriented and admittedly superfluous “Advertisement” label.

We used two combined super-columns beneath the lead story as a showcase for both medium and large rectangle ads — 300 pixels wide and 336 pixels wide, respectively. (More on these specifications here.) The former size, being over 100 pixels shy of the 406 pixel width of those combined columns, doesn’t fill out the space quite well, admittedly. But it was too thorny a problem for a more elegant solution, because both sizes needed to appear in that same area at different times. Designing for ad units is rarely elegant, but I like to think we came up with an almost elegant solution.

Figure 3. The grid with ad units in place.

This basic, four super-column organization provided the backbone for the majority of the site. For pages that required extremely wide berths for content — such as Search Results and the News Archive — we were able to simply combine three super-columns into a large text area, with a remaining single super-column for skyscraper ads.

Figure 4. A wider central column for pages like Search Results.

…But Content Is King

If all we wanted to do was combine even-numbered subsets of the sixteen columns into four super-columns, though, there would have been no need for that many to begin with. Things got trickier on the article pages, where we needed to devote one column to article content and another to a combination of advertising, peripheral links and value-add functionality (e.g., Email This to a Friend).

The obvious approach — and my initial instinct — would have been to simply divide the columns into two, er, super-duper-columns of 458 pixels each and composed of eight constituent columns. There was something claustrophobic about this simple division though; it seemed unnatural for the article content to receive only half of the available space, because it is, after all, the raison d’etre of the page to begin with. Yet we needed a roomy right-hand side of the page, too, so it would have been untenable to give the article content three super-columns and the peripheral content just one.

Figure 5. For article pages, the seemingly obvious solution of equal halves crowded the article content too much.

This is exactly where the sixteen pixel division came in handy. We pushed the left-hand side of the page to nine columns in width rather than just eight, and relegated the remaining seven columns to the right-hand side of the page. The difference is subtle but powerful; a natural balance is achieved between primary and peripheral content.

Figure 6. Unbalancing the two super-columns by just one established a natural equilibrium for the article pages.

This Way Up

There are more intricacies to the grid system, including subtler variations on the basic approaches outlined here so far, but they’re not of enough interest here to do anything more than make you even more weary of reading the term “columns.” Suffice it to say, this general approach informed the whole of the site — everything came from those original sixteen.

What I’ve talked about here, though, concerns almost exclusively layout principles and math along the horizontal axis. There’s the whole additional vertical axis to contend with, too — how tall to make the masthead, how much content will reasonably fit above the fold, what is the most complementary height for images of a given width, etc.

On this, I have to admit that I’m not as methodical a designer as other grid-happy practitioners might be. I do believe that a rational approach to the vertical dimension of a grid is possible and desirable; but in Web design, a designer has control only over the horizontal (and of course, some would argue that they shouldn’t even have that). So my approach, usually, is more right-brained, which is to say that rather than measuring it all out and planning it obsessively, I just like to wing it: size items based on a subjective analysis of how good they look and how comfortable they fit into their allotted space. In that way, I’m kinda footloose and fancy-free.