Designing Headers, Footers, and Sidebars

Headers, footers, and sidebars are one of the first things to consider when putting a website design together. It can be tough deciding which ones to use, and how to use them. There aren’t really “wrong” choices here, but some are better for some things and others. There are three main things that people want to place in these areas: Navigation, Advertising, and Bonus Content. Deciding where to put what is made much simpler by remembering two general rules of design and users:

1. People read left and click right more.

2. Your page gets the most visibility at the top, and then decreases toward the bottom.

The Header

Best Uses: Navigation and Advertisement
A lot of sites use a horizontal ul list for navigation these days, and for good reason.  There are two things you need to let your user know in order to have strong navigation on a site: where they are, and where they can go.  The top navbar can do both of these easily, especially if you use some kind of breadcrumb or highlighted menu items to let the user know where they are.

Since this is one of the first places users look, it’s also a great place for advertising.  Advertisements located between the header and the content has been proven to do extremely well.

The Footer

Best Uses: “Bonus Navigation” and Bonus Content
Bonus Navigation refers to navigation that is not essential to getting around the site, but can be handy, or something that is necessary, but not widely used. Examples of this include links to some additional information pages, such as the “About Us” or “Contact Us” pages, or providing additional ways to get around the site. I just added an example of that here,  by widgetizing the footer, and moving the archives and categories widgets built into Wordpress down there.

You can also use this area to provide a little more information about the site, such as putting the about me and contact information directly in the footer.

Left Sidebar

Best Uses: Navigation
since users tend to look here first, it is a good place to put the navigation, for many of the same reasons the header is. However, it’s not very good for advertising, because users scan quickly. They have more than likely ended up on the page they are on for a reason, so they will see the ads, realize it’s not what they are looking for, and move on, resulting in a lower CTR for them. If your site has a logging in functionality, the left sidebar can be a good place for that as well.

Right Sidebar

Best Uses: Advertisement, Bonus Content
The reason that users click more on the right side of a screen is twofold: Firstly, that’s where the scroll bar is, so users tend to hover their mouses to the right naturally. Secondly, once people are done reading something, their eyes tend to look to the right if they are looking for something else, as if they were going to the second page of a book. This is why the right sidebar works best for advertisements and bonus content. And by bonus content I mean things like links to your RSS, other profiles, or other information about the site. Look over there –> for an example.

Leave a Reply