( read )

Creating an Effective Website Header


Some website header examples from sites built by KathodeRayYou may have noticed just how common website headers have become. They are not actually a requirement, but they can be very useful. The header is common because it works.

That said, I should be clear that I have a very broad definition of a website header. There are many different ways to create one – and some are more effective than others. So how do you get started?

Believe it or not, there are really only two main stages of planning your site’s header. Your foundation will be your branding; the walls and roof are usability.


First and foremost, this needs to be your heading. Your header will be on every page of your website, so before you get started, know what your message is. What impression are you trying to give? Just because the sleek design of a tech company’s website looks impressive, that does not mean that is the right solution for a daycare’s site.


If you already have a website, you should be able to answer these questions as they will have been part of the overall site design. But as a refresher: know your company’s mission and goals, and the face that you want to present. Come up with a few adjectives: Are you quirky and creative? Sunny and neighborly? Sleek and professional?

If you did not consider these aspects before, consider them now. You may want to use your logo as a guide – a logo that looks out of place within a website’s design is a jarring sign that a company doesn’t really know what it wants to be.

What to Include

Some might argue that your social media links should always be in the header, but beware of such one-size-fits-all mentalities. Sure, if your business is active on social media, relies on social media, runs some campaigns entirely through social media, there’s a good argument for keeping these elements in the mix. But why should a driveway paver have a YouTube account? Does anyone really want to see their surgeon’s Facebook? If you don’t have a good answer for why someone already on your site would want to see a particular social media account, perhaps that link should be relegated to the contact page or footer.

Instead of dutifully collecting every social media link you can, think about what makes your business unique. What are people most interested in? What’s a common question they call and ask?

Thinking about what your customers are looking for will help define your business, but it will also move us on to the next stage: usability.


Formal website headers from KathodeRayNow that you know who you are, you have the base to build. And what you build on that base must be designed around who your customers are.

Let’s start with the last part of the branding: what makes you unique, and what your customers often ask for. For example, a farm offering pick-your-own with the best view around, whose customers often call in from an hour or two away asking what the weather looks like for the day. If the view’s a selling point, get a picture of it. If the weather’s such a popular question, consider embedding a weather app showing the local temperature and/or if it’s raining.


Another common piece of website headers is a navigation bar.

The two best places for navigation are across the top of a page or down the left side – and it should be consistent throughout the site. What else is a consistent, site-wide top menu, but part of your header?

Even if you don’t use a full menu at the top of your site, it is often a good idea to include at least some basic links – the contact page, for example, or whatever you specialize in if it requires a full page. If you include your logo, make it do double-duty as a link back to the home page of your site.


Make your header informative. This can, in part, be accomplished by a well laid-out navigation, but you might also consider including a picture or brief description that clarifies who you are and what you do, or the most commonly needed contact information – for example, a phone number and the minimum order for delivery if you’re a pizza place, or an address and hours if you’re an amusement park.

Finalizing Your Website Header

Now you’ve got a great header, full of all these elements – but there’s one last question to ask yourself before you add it to your website. And that question is: Is it in the way?

Remember, this website header will load on every single page, every time a vistor comes to your site. How much space does it take up? Is it pushing important parts of the actual page content below the fold? Does it get annoying after the tenth load?

Pare your heading down to essentials, keeping in mind both branding and usability. If you want, you may decide to include an expanded version of it on your home page, but make sure that it still flows well when you move between expanded and simplified versions. It should not look unplanned, or as if some pieces were forgotten.

Now you’re ready to go!

See samples for more ideas

Bourn Creative: Branding Considerations

Line 25: 50 Creative Designs

Top Design Magazine: 55 Stand-outs

Learn More about Optimizing your Website

Download our ebook on how to make the most of your website.

Small Biz Website Must-Haves eBook


Tags: Web Design