On January 30, 2006, A List Apart published In Search of The Holy Grail, Matthew Levine’s answer to the leanest, semantically correct, and bulletproof structure for a web-standards-based, 3 column layout with a liquid center—The Holy Grail.
Three columns. One fixed-width sidebar for your navigation, another for, say, your Google Ads or your Flickr photos—and, as in a fancy truffle, a liquid center for the real substance. Its wide applicability in this golden age of blogging, along with its considerable difficulty, is what has earned the layout the title of Holy Grail.
This article, and others like it, probably saved 1 million tons of lost hair among the web development community. You should read it if you haven’t already. But it’s not the end of the story.
Note the mention of blogging in the quote above. It think it’s safe to say blogging has been the trend-setter in web design for the past few years; even Jeffrey Zeldman says the Helvetica of web design is the blogger theme Minima. But blogging is a slapdash affair and that’s where the Grail slipped from our grasp.
Look again at the quotation above. We’ve got three columns, but for what? Stuff. Stuff that doesn’t matter, stuff that’s interchangeable, stuff to sit alongside our real content. Stuff to distract and stuff to interfere. We’ve got to look at this stuff.
Design is Putting The Right Stuff in the Right Spot
The Holy Grail is not a 3-column template to fill with stuff. The Holy Grail is what you need; nearly unattainable design perfection, the right stuff in the right spot, in other words. So how do we find the Holy Grail of Blog Design then? How do we go about finding the right spot for everything on a blog? There’s two places to begin.
Your Blog Design Should Look Good Naked
Everything should start out P.O.S.H. with Plain, Old, Semantic (X)HTML. Explain your blog to the text editor and set it with careful markup. Question every DIV and tag that stands between you and your content, or between you and the information. If I want to read your blog with the CSS turned off (I do this often) something is wrong.
Maybe there should be a Hippocratic Oath for web developers: Firstly, do no harm to the browser defaults.
Study Where Eyeballs Land
Look at Google Adsense ad charts and Useit.com eyeball tracking results. This is where content should go—not ads.
Google has produced a wonderful diagram of where to place your ads on a hideously overcomplicated web template. This is where Google AdSense ads perform best. Let’s take a look at it.
I believe Google when they say don’t be evil. I really do. But I’m not going to use this chart to determine ad placement on your blog. I’m going to use it to defend the two-column layout. Keep your content to the left, your titles bold, and nothing between your reader and what they want to read. Yes, surprisingly, readers want to read things. Weird.
No one likes to click ads. If people are clicking ads in these spots there must be something to it. Some relation between content placement and reading position (that is, besides Google’s suggestion of putting ads in places that will confuse your reader).
Let me draw some more (likely off-base) conclusions from studies I didn’t do. In August of 2007, Jakob Nielsen published Banner Blindness: Old and New findings. Nielsen was reluctant to publish this article, he says, because it revealed that unethical ad placement pays off. That is, Ads that look like content are more likely to be clicked.
Ads that look like content are more likely to be clicked. Dear blog designers everywhere, this is an alarm bell ringing. No one is looking at your header, your sidebar with twigs instead of tabs (and don’t get me started on tabs for navigation) or navigation that rolls down like a toilet-paper roll. They want to look at the words.
Entering The Conversation
I feel somewhat Nervous about even entering this conversation. I mean, some nerve, eh? I’m setting up all my future work as part of the quest, aren’t I? But good design, The Quest, is worth any public embarrassment or failure. This is how I judge myself. I’m not afraid to be judged on my journey.
… unless you have a really sharp stick or something. Then I might be afraid to be judged.
3 Comments
Ian,
I’m not a designer but I’m not sure what I’m supposed to do with this information.
The reason two sidebars with content in the middle became the Holy Grail is that it allows more ads above-the-scroll. Going to two columns, with the content on the left, leaves only one column for ads above-the-scroll AND it takes away one of the hot spots from the well-known Google heat chart you include above.
Most of the ads on my site are impression based rather than click based. Still, I can sell ads in that left column for more than I could in the right.
It’s really a tough call, James. You should know that I consider advertising-supported content a necessary evil and something I feel really conflicted about. That drives a lot of my thinking about ad/content placement. But I suspect that a layout that gives precedence to content at the expense of ads would turn out in the long run to be more successful. It shows trust on your part and breeds loyalty. Loyal readers may click on ads less, and you may be unable to charge a top rate based on position, but loyal readers are glad to click on ads.
… in my opinion, anyway. And again, this isn’t an article about how to determine ad placement. It’s about content placement.
I hope that helps get inside my head, James. :)
I’m a big fan of the two-column layout. If you need three columns for your stuff, then you need to start cleaning some of that stuff out. The extra things you add to your page should accentuate the content of that page.
Some people have asked me why I don’t use sidebar tabs for content even though it’s a regular feature in my themes. My simple answer is that they’re less usable and I’d rather have the user focus on the content than the fancy stuff in my sidebar.
I think the Holy Grail should be about how readable your content is. Ultimately, that’s what users will stick around for.
I’m currently working on a one-column blog layout that focuses on content and readability. It’s something I’ve been meaning to do for a while. There’s something sort of freeing about getting rid of all the junk that clutters our pages.