Friday, April 3, 2009

Blog Design Trend: Short Headers

Bargain Briana's brand-new header inspired me to write about a trend in blog header design that I've been watching grow in popularity for a year or so: shorter headers. By "shorter," I mean headers that are 200 pixels tall or smaller, and in some cases, much smaller.

Why you might want one
Your header usually contains your logo (or the closest thing you have to one), a tag line, and your navigational elements. While these are vital elements, there's one thing that's waaay more important:

Your content.

By nudging your new content closer to the top of the page you'll deliver fresh content to your reader faster. Readers come to your blog to see new posts, and huge headers don't allow them to do that efficiently. I've seen blogs with headers so huge that the reader physically has to scroll down--i.e. work-- to see what they came to your site for in the first place. Content below the fold? Some readers don't take the time to scroll. They leave. The less work readers have to do, the better.

Smaller headers often allow advertisements to move up the page as well. Advertisers like that, since adds closer to the top get noticed more.

Get an idea of what starting your content 200 pixels from the top of the page looks like:

Design Mom: Simple header with no navigational elements. Photo-heavy content starts at about pixel 180.

Simple Mom: Content starts about 180 pixels from the top of the page.

Bargain Briana: Also starts at around 200 pixels from the top. (See above)

Pushing the limits at 100 pixels or less:
As you'll see below, making your header super-short may mean integrating your logo with your navigation rather than placing nav elements above or below. Notice how prominent the content is on these sites:

Copyblogger: Content starts less than 100 pixels from the top of the page. Notice how the tagline has been moved to the top of the left sidebar.

Consumerist's header is tiny. At fewer than 50 pixels, it's little more than a divider between the magazine-style teasers at the top of the page and the new posts beneath. Notice, too, that the post title type is actually larger than the Consumerist logo.

Dosh Dosh: Minimalist header with integrated navigation. Content starts less than 100 pixels from the top of the page

Curbly: I love how the blue "Curbly" square is offset, allowing readers to access navigational elements immediately. Content starts about 230 px from the top, as they've left room for an invitation to readers to post their own content.

Craftershock blog: Very simple, with subtle navigational elements at right. Blog features lots of photographs, and the simplicity of the header lets them shine rather than competing with them. Content starts about 150 px from the top.

Pearsonified: My favorite treatment. I could look at this one all day. Small reversed-type header allows for rotating photo treatment above posts. I also dig the orange arrow that draws the reader's eye to the first line of the post.

Readers: what do you think?

  • Do you prefer "maxi" or "mini" headers? Why?
  • Can you find other examples of easy-on-the-eyes short headers?