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.
ThemeShaper 
10 responses
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.
Love your post. I’m new to the whole blogging thing, but I’ve been lucky enough to stumble my way onto your posting and the thematic theme. I’m wondering how to configure my them so that I can place ads and/or links in my right sidebar. Are there certain plugins that I should be downloading? Any other tips for somebody just trying to get going with the whole content/publisher/blogging world?
I don’t believe there is a holy grail in the sense that any one layout is perfect. I do believe that certain objects are expected to be more or less standard, that is not to far out to make a site difficult to navigate. Otherwise, it depends…
Great article, Ian.
There’s a tendency, especially for new bloggers/site owners, to try out every widget and plugin. Almost always that means these things get stuck in the sidebar(s). I know I’ve been guilty of this.
But this reminds me of the candy/magazine racks at the grocery store checkout line–cramming a bunch of (mostly) useless stuff in a small space and hoping people will be bored enough at some point to pay attention to it.
There are some common elements of blogs that have been around about as long as blogging itself. We’re so used to just automatically adding them in that we forget to stop and ask ourselves, “Do I REALLY need this insanely long list of tags?”
I’ve already weeded some junk out of my sidebar, but I guess I have a lot of more work to do! 😉
I don’t know exactly why you were hesitant to post this, but then I’m not a designer. I’m ecstatic to see designers acknowledging that it’s about the content first and anything else a distant second.
The discovery that ads that look like content are more likely to be clicked is an example of everything old being new again. In direct marketing, content-like ads were called editorial-style ads. And if you could get that format past anal retentive creatives who felt the need to pee on everything that went out the door, you likely had the most profitable ad that client would ever run.
Fellas like me drool over the idea of designers who understand what you posted about here. Frankly, if a designer wants to get artistic with twigs and toilet paper, they can do it when the point isn’t about making a return on my money. In other words, they can do it on their own time.
Don’t be afraid to preach this gospel, Ian. Designers need to understand and accept this point of view.
Hi Ian, first off I want to say good oh on all your hard work, I’m trying to get back to my work but keep getting pulled in by your fantastic content.
The reason why I’m replying to your comment Dan, is because there are a few things I agree with and a few things which are quite hurtful to designers, although the truth can be hurtful I suppose!
If a designer is a good designer (lets be clear and say a theme developer/web/magazine or anything that deals with content as opposed to art or graphics), they should only be designing to support and enhance the content.
I am a designer with a background in publishing. The magazines I worked on were trade so there was a huge amount of content, my job was to make it easy and enjoyable for the readers to find there way through the content, and at the same time, make it look “good” and “sell-able”, plus make room for adverts.
There was always the constant battle between design and advert space. I wish I had someone on my side then, to support the claim that if there are too many ads no one would be bothered reading the magazine as all adverts SCREAM for attention. That’s the purpose of advertising, to get people to see it. But, it becomes too much, and in the end, more is actually less, because who’s going to continue reading if it’s too much of an effort to sift through the adverts!
Editorial-style ads (advertorial), YES, completely agree on this, and caught my self just the other day reading through one (in a magazine) that I thought was content, if it was an online presence I surely would have clicked on it! These ads don’t interrupt the flow of the reader, it’s not flashing and screaming for attention, it just is, and so readers just read on.
However, lets not continue the writer/designer battle by putting people into groups.
I don’t feel the need to pee on everything that goes out the door. LOL. That’s hilarious! Anal-retentive … Hmm, that’s an open box, what designer isn’t?
I really hope one day you get the opportunity to work with a great designer, so you can see there are many types of different designers with different strengths and weaknesses, just as there are writers.
This is all just my point of view, but one I felt I needed to share. xx
Liza
[…] Art and Design Blog From @buesen Nike Chase by I Love Dust From @designcritique The Holy Grail of Blog Design From @iandstewart RT @oboxthemes A collection of Less is More – Obox Design From @obox […]
My opinion on ads: never use banners on site.
They make design worse. They distract from reading articles. Nobody clicks them anyway.