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.
I think this should be Part 6 in Mark Boulton’s 5-part series: ‘How it works in the real world’.
Thanks so much for sharing this Khoi, great insight into laying out a high-traffic, professional website with CSS and standards. It makes me really curious about the CMS though, got to be pretty sweet to allow content editors the freedom they need while still keeping good, clean markup.
On a side note, sure is some odd looking URL’s going on over there at The Onion. The home page is in “content” and articles are “nodes”…whacky.
Really nice practical detailed explanation Khoi, and as said Virginia, a kind of logical following to Boulton’s article.
A great article Khoi – As people are pointing out here, the ‘ying’ to my ‘yang’ – spot on.
It’s interesting to your comments regarding vertical axis. It’s increasing a difficult area of grid design for the web when the user has so much control over text size. Like as you say, I tend to wing it a lot also – relying on that ‘feeling’ when something’s right. But if anyone asks, I work everything out according to ratios ok? 😉
Thanks, Mark, that’s a high compliment! Re: the vertical axis, your writings on that aspect have encouraged me to pursue that practice more intently next time — but I’m not sure how far I’ll get. It already takes so much energy to control the horizontal plane, I’m not sure I can muster the effort to control the vertical one as well.
Excellent article… I always enjoy (and learn quite a bit from) hearing how folks work through such details on their designs.
Great article, thanks for sharing this insight.
It’s interesting what you say about taking the vertical plane into account – it’s not something I particularly tend to worry about when designing a site (I’m usually too concerned with deciding whether to design for 800×600 still and getting it looking right horizontally). Usually the only consideration I give to the vertical plane is to what content will be above the fold, but perhaps I should consider it more.
That was a fantastic read – thank you for taking the time to explain that. I’m seeing the same concept applied right here on this page. Between the categories at the bottom, the remarks form, the comments, the article, the navigation – well well, the grid exists!
There is a method indeed, and it’s not mad. Quite rational. Satisfying even (if that’s possible).
Beautiful as always Khoi. I love that you and Mark are giving grids some well deserved exposure.
Every time you write about your grid designs you make me want to do one. Now if only I had some client work to work on. Hmmmm…..
I couldn’t bear Josef Muller Brockmann‘s name not being mentioned somewhere on this page. Sorry!
I good way to make it more “newsy” would be to allow one to print it. A simple style sheet to let you take articles away on paper without all the navigation stuff.
Oh, there is a link… I just clicked print. But really now, why do so few sites support printing with CSS rather than a whole new page?
Nice work and writeup! A really interesting insight of the challenges of dealing with massive banner placements.
The subtle “grayspace” around the ads really helps seperating them from the content, and the wide “related stories” area in the individual articles page works well. but there is a lot of stuff going on in that front page… Takes a while to get used to, but after browsing around a bit the design really works wonders
Regarding printer stylesheets or not, I recently read a great post about that over at 456 berea street: Print-friendly CSS and usability. The most common remark against print stylesheets is probably that it breaks user expectations; people have become used to in-page “printout version” links… Though theres’ no harm in providing one anayways, I guess.
Fascinating. That’s all I have to say. While I’ve been a fan of grid-column systems for quite a while (ever since I learned about them), seeing how one worked in a real-world design exercise is wonderful.
Thank you for sharing!
I put together a design tool in Flash to use for drawing grids, and for adding text blocks and divs to block out a composition. It includes an option to return values for CSS rules based on the arrangement of your elements.
You may save your work by screen printing and pasting into Photoshop, or to a printer, but there is no option in this version to save your layout and come back to it later.
It was originally made to build a grid based on text size, but is not limited to that use. You will need the Flash 7 plugin for accurate font metrics.
I am getting ready to make a second version, so any suggestions would be welcome.
The file is here http://www.gwhite.us/downloads/css_grid_calc.html
>> Though theres’ no harm in providing one anayways, I guess. (on providing separate print versions.) < There is one... SEO-wise. Search engines hate duplicate content. Thanks for this "making of" article, Khoi. I second the comment on the CMS, it would be interesting to read how article posting and formatting with the grid works.
I get the grid…but what I want to know is how many freakin’ flexiblocks did you have to use for that front page layout?!? I’ve been trying to figure that out since I saw the redesign last week.
I prefer more simple sites of course but I must agree that you’ve done a great job by customizing and simplifying that heck a lot of information on the homepage. I do know how hard it is when you are put in frames with the amount of information you have to display on your home page.
Thank you! Your remarks have been sent to Khoi.