Max the Potential of Your Website Header

If you really think that your website header can get away with just a logo and a search bar then we’re afraid we have some bad news for your developers.

Website header design is as diverse and important as every other aspect of web design.

If you’re not maximizing your potential in your website header you are missing out and your visitors will know about it.

While there are no hard and fast rules for header design there are absolutely some best practices that will catapult your website into the future and maximize conversions.

We are going to show you exactly why having a bland header is bad for business and give the inside scoop on what your website needs to get ahead of the curve.

What is the header? Does a website need a header?

Zyro – the easiest way to build an online store

Try for free

A website header is the top section of every page of your website. It is the section that you should place content that you want to display to the maximum amount of visitors.

Since the website header is the first thing that visitors will see, you need to ensure that the header section is well designed.

It needs to include your core messaging, call to action, and your company logo at the bare minimum.

Traditionally, header design was understood as a narrow strip of repeating information at the top of a website.

It only included the most important elements for user experience like the hamburger menu and shopping cart.

These days, the website header refers to all the content above the fold of a website.

For reference, the website fold refers to all of the content that is visible on the first screen of a web browser without having to scroll. 

This makes the website header a vital part of your website design because it is directly linked to the way that users interact with a website.

People don’t read, they scan.

For that reason, you want to get all of the most important information for increasing conversions into your website header design.

Now that we understand the purpose of the page header let’s explore some practical tips for designing a website header.

What makes a good website header and how to make one

Good website header design is not necessarily about including all of the most common elements but rather tailoring the options to your needs of your website.

The website header for an eCommerce website will look drastically different to the header of the website for a blogger.

Designing a website header that will be effective requires a solid understanding of the goals of your website.

The design elements that you want to draw attention to in your website header will be different in every case but as a general rule of thumb should at least include a call to action and navigation menu.

What to include in a website header design

Let’s start by introducing the most important and widely used elements in website header design.

Your page header is like a billboard. Your visitors should be able to get all the information they want and need to further their journey in the blink of an eye.

Remember, you don’t get two shots at a first impression so it pays to spend a little bit of extra time working on this area of your home page.

Site logo

Your site logo is a crucial part of your brand identity. It is almost always included in website header designs.

Title

If you don’t choose to go with a logo in the header it is a good ideas to include site titles to reinforce your brand identity.

Site navigation bar

Hidden navigation and minimal navigation bars are becoming more common as more and more sites look towards a cleaner header for mobile devices.

Calls-to-action

eCommerce sites will always want to include calls to action in the header of any websites to draw users down the conversion funnel.

Contact information

Contact details such as email address and phone number should be prominently displayed for users. If your visitor can’t find the contact information easily they may revert from an engaged visitor to a bounce in moments.

Shopping cart

Another essential for eCommerce sites. One thing to consider is that the header a website has should match up to the expectations of clients and customers. The shopping cart in the header is one such industry standard for eCommerce websites.

Zyro – the easiest way to build a website

TRY FOR FREE

Your web page might not need to include all of these elements in the page head but most header designs will include a selection of them.

In practice, it is probably not a good idea to include all of these elements as overloading a page header design can make it difficult for a visitor to scan.

Similarly, leaving too much out of your site header designs can have the same effect.

If visitors don’t find the information that they expect in the page header they are unlikely to stick around to look for it on your landing pages and may bounce.

With the current trend for minimalist websites in web design it is becoming increasingly common to include only the absolute basics in the header. 

This is especially common if your site home page makes use of a hero image or background image as an overcrowded header may distract attention from the hard work of your web designers.

With that in mind let’s look at some web design best practices for your site header.

1. Header size

While there is no one perfect size for a header there are some standard practices that are agreed on.

Headers of web pages should not interfere with the perception of the main body of content on a web page.

If your web page is information dense then it makes sense to apply a small header so that visitors can instantly interact with the content they have come for.

If your website uses hero images on the landing page or site home page then you can use a larger header. In some cases, the area of the hero image can be considered part of the header.

This transforms the header background into a website header image.

2. Visual hierarchy

We have known for a while that users scan a page in an ‘F shape’ or a ‘Z shape’ depending on the type of content.

On a text rich web page a user is likely to scan in an F shape. While on an image rich area or landing page users tend to read sites in a Z shape.

In both cases the user journey begins in the upper left area of the web page. For that reason, most websites place the site logo here and structure their content according to importance along the line of the F shape or Z shape.

Use the principles of visual hierarchy to highlight your calls to action as soon as possible as you only have a matter of seconds before visitors decide to stay on your site or bounce.

3. Sticky header

Sticky headers are fixed to the top of the screen meaning that all elements included in the header design will follow you as you scroll.

Sticky headers are one way to improve user experience on a site that features an unusual layout. Including important navigation links in your headers will keep attention focused on the next logical step in the journey.

4. Hamburger menu

Those three stripes in the top corner of the web page that are universally understood to represent a navigation menu is called a hamburger menu.

It is a form of hidden navigation that has become more popular as people increasingly browse websites on mobile devices with smaller screens.

Users know that they can access the menu any time they want by clicking on the hamburger but until that point it remains hidden in order to present a clean interface.

This is an excellent option for websites with a design focus or websites that use a lot of imagery as the menu can distract from the visual value of the content.

5. Clean fonts

Readability is king in both website headers and website footers.

Vital company information such as contact information, logo, and calls to action need to be instantly comprehensible and clear.

Ther same applies in the footer where copyright notices need to be displayed for legal reasons.

Make sure to use a suitable header background color that allows for the text to be easily read. 

6. Search bar

A search bar is a must for eCommerce sites as they tend to feature more pages than can be easily organized into a navigation menu.

This may not always be strictly necessary for every website so only choose the elements that make sense.

If your header is overcrowded you might consider adding a search function to the website footer instead.

7. Mobile first design

Minimalist header design has grown in importance as mobile traffic has overtaken desktop browsing in recent years.

A website with many complex elements, such as a real estate website with a photo gallery will already have a complex page design on mobile. 

By reducing the size of the header and using hidden navigation menus you can plan to balance your page and improve user experience.

8. Social media 

Typically, social media icons are found in the website footer. As the importance of social proof in eCommerce swells, many website owners are making the switch from footer to header.

Social media links should be the only external links found in either the header or footer. 

Website header examples

Now that we have the question of what to include nailed down it is time to start thinking about how you can implement these header ideas in practice.

Here are some examples of websites with headers done right.

1. Open phone

The open phone header design acts in a similar way to a stripped back version of a traditional website footer.

The sitemap style features all of the most important links on the website but it is differentiated from a footer by the inclusion of a call to action “sign-up.”

Elements of the “F-shape” visual hierarchy are obvious on the open phone landing page allowing users to quickly scan the most important information before being drawn in by the visual elements.

2. Streamline UX

Streamline UX stays true to its name with a stripped back, minimalist website header design.

The only elements on show are a call to action and a simple menu that hides the majority of the navigation options for a smoother design.

This is another obvious “F-shape” header but in this instance we see the modern interpretation of a website header as everything above the fold.

Follow the left hand side of the screen in the “F-shape” and animated micro interactions take the place of large and clunky navigation blocks or text. 

This is a fine example of a header that serves to draw the user through the rest of the website.

3. Esenzzia

One last example from Esenzzia, a perfume brand with a classic eCommerce header.

Rather than adding unnecessary links to the top of the page, Esenzzia prefer to stick with what is important for maximising conversions.

A shopping cart and minimalist icons in place of a sign-up form and contact details allow the user to take all the information that they might need without overcrowding the top of the page.