Combating the underused website header.

The header of a website is one of its most valuable areas, but it is often underused. How to fully use the top of your website.

Website headers (or the [tooltip content=”Perhaps the most popular alternate term for the header area. ” url=”” ]banner area[/tooltip]) seems considered sacrosanct. It’s one of the most visible parts of a page, often the first thing participants see, and is valuable ad space. However, the area is often free of information and rarely contains links to content. There’s a better way to build your website.

Let’s look at a few high-profile websites with [tooltip content=”And I know I’m among the guilty with the header on this site. Working on it.” url=”” ]underused headers[/tooltip].

Or you can skip to the 6 simple rules for a better website header.

Author’s note: thumbnails generated dynamically. 

CNN.com‘s only prominent item is a search bar. There are a few understated links to TV content and a sign-in.

Then there’s the New York Times, who has left their header’s content entirely up to advertisers.

Next up is the LA Times, who at least have the date and time in their header, if not much else.

You’d think the more internet savvy The Daily What might have taken back the header space, but it seems not. At least it has links to other Cheezburger sites on top.

Who uses their header space well?

Let’s first look at Wonkette, which puts a great rotating featured story area in their header.

Smashing Magazine has shrunk the header and uses it to promote their own content in hard-cover format, which is half-way to an ad, but I’ll give it to them.

Gawker Media blogs like Kotaku have practically eliminated the header.

Seth Godin’s blog has gotten rid of the header entirely, you jump right into the content.

Creating a better header and why.

If you want to make money on your site, you should probably put an ad in the header. That doesn’t mean it has to [tooltip content=”Like Fast Company’s website.” url=”http://www.fastcompany.com” ]take up the entire space[/tooltip]. A good header can have room for both an ad and, at least, some pointers to content.

The best of the above options is actually Wonkette (surprising, I know). The idea is to put a dynamic graphic and text content into your header.

Why?

Eyetracking studies show that when people look at a webpage they often scan it in an “F” shape.

They don’t scan the entire page. The most significant concentrations come at your first few paragraphs of content and your header. The study shows that this is less likely to happen if the header is just a solid graphic. So break your header up into a set of elements. This is also a great argument against sliders that take up the entire width of a page.

As you can see in the image at the right, participants may also avoid areas of the header above a sidebar.

It’s useful have links to content, with accompanying graphic elements like post thumbnails, in the header. Better to have them towards the left than the right (unless your site is for an audience that reads right to left), especially if you can avoid putting them over a sidebar.

6 simple rules for a better website header.

1. Break up your header into elements separated with [tooltip content=”Or whatever your background color might be.” url=”” ]white space[/tooltip]. Nothing but your navigation should the entire width of the page.
2. People are more likely to look at the entire length of your header than your third paragraph, so take advantage of their attention by using the whole space.
3. Feature content in your header with a graphic element, like a post thumbnail, but keep it simple.
4. Don’t place header content you want people to use over a sidebar.
5. The further left you can place elements without violating rule 4, the better.
6. Don’t waste space above the fold by making the header too tall.