How to Create the Perfect Header for Your Website

Update for March, 2020: With the release of Thrive Theme Builder, you now have the ability to easily create and set custom headers for your entire site, or for specific pages and posts.

Your website's header is one of the few things that may show up on every single page on your website. Add to that its prominent position on the page and it becomes clear: the header is a critical element.

But what does a good header - one for a conversion focused website - actually look like? What should you add in your header? What are the dos and don'ts?

In this post, you'll discover the answer to all of these questions.​

Like It's 1999...

We've gotten many questions about headers since we started Thrive Themes and all our themes come with extensive options you can use to customize this part of the site.​

Many of the questions have been about header images and banner-style headers. This kind of thing (please excuse the cheeky example):

While it is possible to create a header like this using a Thrive Theme, we don't have a banner-style header as a default in any of our themes. And there are good reasons for that.

This banner type header was quite popular years ago and the idea it's based on is not too bad: at the top of every page, you'd have a large, attention grabbing advertisement of your site or brand. Makes sense, right?

There are two reason this header type has gone completely out of fashion: banner blindness and mobile devices.

Banner Blindness

If something looks like a banner ad it will be ignored by a large percentage of visitors. This effect is called banner blindness and it looks like this:

Source

Quite simply, if your header follows the design language and dimensions that are typical for a banner ad, it will likely be ignored by the majority of your visitors.

Mobile Devices

At the time of this writing, the lines between mobile devices and desktop devices is already blurred beyond recognition. Visitors are accessing websites from everywhere and at every screen size imaginable. And a banner style header simply does not scale well:

The alternative to the above example is to create a responsive banner type header and try to display all its elements at full scale, even on a mobile device. In this case, it would take up the majority of the screen.

Header Examples

Now that we've got the retro-headers out of the way, the question is: what does a good header look like? Let's first have a look at some examples, taken from different types of sites.

SaaS Websites

Stripe:

Zendesk:

Airbnb:

Square:

In these examples, we're seeing slim headers and relatively few elements in the header. If there are many links, they're in drop-downs.

Blogs

Quicksprout:

Location 180:

Chris Guillebau:

Again, we see slim headers for the most part (Location180 being the exception with a large logo). Like in the examples before, the menu items in the header are in line with a slim logo, in most cases.

Ecommerce Websites

Amazon:

MyProtein:

Walmart:

In the ecommerce examples, we see a prominent search feature as an important part of each site's header. There are many pages to navigate and search is the primary way visitors are encouraged to find their way around. Other links are usually sorted into drop-down menus.

Magazine/Media Websites​

Mashable:

MindBodyGreen:

Engadget:

In these examples we're seeing extremely economical headers, leaving as much space as possible for the content of the sites.

What can we learn from these examples and other successful and thoroughly tested sites?​

Here are the top 5 factors that make a great website header:

1) Keep it Slim

The header is on every page of your site, but it's never the most important thing on the page. It's there for convenience and branding, but it's not as important as your main headline, featured image, page copy, video, etc.

Keep the header slim, so that no matter what screen size your site is viewed at, it doesn't take too much space away from the site's content.​

2) Don't Sweat the Logo​

A lot of fuss is made about logos as a branding element, but if we look at some of the most successful websites on the net, we see that logos are usually small and simple.

Your logo has to be little more than your brand name written in a simple font. And more importantly, no matter how fancy (or expensive) your logo is, don't try to show it off and make it too big. See point number one: the space on your site is too valuable and the logo is never the most important thing on it.​

3) Keep Your Navigation Tidy

When it comes to the main navigation links you add to the header, "less is more" sometimes applies - and sometimes it doesn't.

If you can't keep the number of navigation links at a minimum, the best alternative is to keep everything tidy and nicely grouped together. Instead of hitting visitors over the head with too many links, present them neatly grouped into drop-downs.

​4) If Search Is Important, Add it to the Header

A search function isn't equally important on all websites. If your website has a lot of content and visitors typically look for something very specific or browse through different categories, search is important. And in this case, it's a good idea to have a search bar in the header, where it's accessible from any page.​

5) Test it On Small Screens​

Take a close look at what your site looks like on a tablet and a mobile phone. Is the header taking up too much vertical space? Are links too close together? Are elements too small to see?

It's very important that your site looks good and functions correctly on more than one screen size.​

Over to You

In our themes, we've made sure that headers follow the best practices above. Our goal is that you can easily create a header that's highly effective, while keeping it slim and simple.

Do you have examples of excellent website headers to share? Thoughts or questions about this post? Let us know by leaving a comment below!​