Website Header Basics & Best Practices

website header

When a visitor lands on your website, you have about four seconds to convince them to stop hovering over the little “X” that will close the window to your website. Your visitors need to know immediately where they can find your contact information, what they can expect to find on your website, and how to get around your website. And to answer all these burning questions in four seconds flat, you’ll need to knock it out of the park with your website header.

What’s a website header?

A website header is the strip that appears across the top of every web page on a website. It usually contains important site information, such as where to find the other pages on the website and how to contact the owner of the site. The website header is usually the first thing visitors see when they land on a website, so it’s one of the most important aspects of your website SEO. That’s why all our templates help you create gorgeous headers that make your website stand out!

Why your website header boosts your website SEO

Your bounce rate is one of the most important aspects of website SEO (Search Engine Optimization). Your “bounce rate” measures how quickly visitors click away from your website once they’ve landed on it. A high bounce rate lowers your website SEO.

One thing that visitors absolutely hate is landing on a website that gives them no information about what the website offers or even how to get around the website. A good website header helps reduce your bounce rate, which is great for your website SEO. (Click here to learn even more ways to improve your website SEO!)

10 features to include in your website header

website layout design
Source: elements.envato

To create a good header, make sure you have at least these features:

1. Your logo

Visitors usually have multiple tabs open when they’re browsing. A logo helps to reorient them if they forget where they are, and it lets them know that they’ve arrived exactly where they meant to.

As a bonus, you can also use your logo as a “return to homepage” button for easy navigation.

2. Contact information

Displaying your contact information in your header reassures your visitors that if they need to get in touch with a human, they can.

3. Navigation (main menu)

This is one of the most important parts of your website header. If you sell clothing on your website, this is where you’d put the categories of clothing (tops, dresses, shoes, accessories), so your visitors can quickly get to the part of your website they’re most excited to visit.

4. Login/Logout

If your website collects sensitive information like credit card info, or if visitors get special perks for signing up for your website, your header needs to include a section that lets them log in.

5. Shopping cart (If you need one)

shopping cart
Source: elements.envato

If you have an eCommerce website, your header definitely needs a shopping cart. This should be prominently displayed and should preferably include some kind of shopping cart icon.

6. Search

A search bar is another easy way to help your visitors get around your website, and it should also be part of your website header.

7. Call to Action

Want your visitors to book a hotel room, buy a car, download an eBook, or reserve a table? Then include a Call to Action in your header. Make sure your Call to Action is quick and specific.

For example: “Buy Now!”, “Book a reservation!”, or “Download a free eBook!”. Check out these call to actions you can’t help but click.

8. Social media icons

via GIPHY

Include all your social media icons in your header, so you can help your visitors become better acquainted with your brand. The better your visitors feel they know your brand, the more likely they are to visit your website again and again.

Now that you know the features you absolutely need to include in your website header, here are five ways to kick it up a notch:

5 ways to make your website header shine

1. Use clear fonts that are easy to read

The whole point of a website header is that if should give lots of information quickly. You’ll lose your visitors if you force them to spend time deciphering curlicue fonts.

2. Emphasize whatever’s most important

Front and center of your header should be whatever you most want your visitors to do. That might be to book a consultation, make a reservation, or fill in their shopping cart.

3. Use transparent headers for image-heavy sites

If you’ve spent hours carefully curating the pictures on your website, you don’t want to hide them with a big, bulky header. Make your header transparent, so your visitors can see how gorgeous your website is.

4. Use a highlight to show visitors where they are

Great website headers have a feature that lets visitors know where they are on a website. For instance, if a visitor is on the “About” page, you’ll see a highlight around the “About” section of the website header. Use this feature so you don’t end up confusing your visitors.

5. Use design elements that show off your brand

If your brand is more playful, try using a floating or jiggling feature in your header. This way, each word levitates or wiggles when your visitors hover their cursors over it.

A simple highlight will work wonders for more subdued, sophisticated brands.

 Also, pay attention to the colors you choose for your header, because this can elevate or entirely undo your branding.

Wrapping up

Your website header tells your visitors that browsing your website will be a pleasant, rewarding experience that’s been tailor-made for them. So, instead of making your header an afterthought like so many other forgettable websites, spend some time making sure your header boosts your website SEO.