Hi! We really should talk!

We'd love to introduce you to Readz, the publishing platform used by IBM, Nike, Deloitte, Aon and many more.

Hop on the phone with one of our publishing consultants and get customized advice on how to get started.

MADE WITH

READZ

TRY IT FREE

What to Include in Your Header

Start publishing online content like Deloitte, IBM, and Nike.

Get a demo of Readz today - and never look back.

GET A DEMO

When designing your website, you might think of the header as a bit of an afterthought; once you have the different elements of your page design, you throw the main navigational elements in the header, add your logo and you’re good to go? Not so, unfortunately. Just like any element of your site, the contents of your header need to be considered carefully so that they perfectly fit with the needs of your users. This is particularly important for the header as it’s a part of your site that almost EVERY visitor will look at.

What is the header and why is it so important?

The header is the strip that appears at the top of your site, no matter which page your visitor lands on. It needs to contain key navigational elements so that users can find their way around along with other elements that you consider key to the goals of your site.

There’s a reason this key information is located at the top of the screen. Users are accustomed to scanning a webpage in an F-pattern when they land. This naturally takes in the header, where they hope to find out some key information about the website. This is your opportunity to capture your visitors’ attention and give them a reason to stick around. A great graphic and eye-catching copy on your landing page is great but if the user doesn’t know where they should go next, they won’t get any further.

What elements do I need to include in my header?

As mentioned, the navigational elements of your site are one of the most important things that users will expect to see in your header. There are different ways to display your site map and this all depends on how much content you have and how you expect your users to move around your site. However, this doesn’t mean you have to leave it until last - it’s never too early to think about how your site navigation is going to work.

For the most basic sites, you can simply list the different page names in your header e.g. Services, About Us, Contact. For more complex sites, such as e-commerce sites with lots of product categories, you’ll need hierarchical navigation which will take up much more space.

This corporate website uses a simple header with some basic navigation elements and a contact button

The H&M website displays sub-categories on hover and takes up most of the viewport to give more options to users

One of the key things to remember when composing the elements of your header is that ‘less is more’. Try to keep them to the absolute essentials that you think your site visitors will need. Complexity adds to cognitive overload and can result in confusion and inaction - your visitors will bounce if they don’t immediately see what they need in the header.

This Nike site uses minimal header elements

https://sdnewsletter.readz.com/thurrock-concept-store

What about a logo?

We’ll take a look at the different types of navigation and how to display them in a moment. The other important element you’ll definitely want to include in your header, though, is your company logo. Not only is this key for your branding, but the logo also forms part of your navigation (web users expect that, when clicked, it will take them back to the homepage). The size and prominence of the logo depend somewhat on the branding of your overall site but generally, you’ll want to keep it small so that you have more room for other, more functional elements of the header. You should use a webp or svg image file designed to be used in the header with an average height of 20-30px. You have a little more flexibility with the length and can save space by omitting the company name.

This website plays with logo placement by putting in centrally and the hamburger menu on the left

Usually, the site logo appears at the top left and that’s where users will expect to find it. Big brands might play with these conventions, using a bigger logo or placing it centrally. Take a look at our article about UX considerations for header design to see the implications of a larger header.

What kind of navigation should I use?

When choosing a navigation type for your site, you will need to think about whether to present the site map horizontally or vertically, what categories and subcategories you will choose, how deep to make the navigation, and whether or not you need to include a search bar.

Above, we saw that sites can vary greatly in terms of the types of navigation they need. Think about the difference between going into an Ikea store compared to a local greengrocer. At the greengrocer’s, all you need are signs above the products saying “grapefruits”, “granny smiths”, etc., whereas, in Ikea, you are guided around the different sections, which are decorated with elements to tell you that you’re in the kitchen section or the bathroom section. Ikea also uses staging areas with fully fitted-out kitchens or bedrooms to show you how their decorative elements can be used in different settings. You should think about this when designing your site; what kind of help do your site visitors need so that they can find what they’re looking for in the easiest way?

Hierarchies and submenus

To add your site menu, just drag it into your header and position it as needed. If you are offering specific products and/or services, do these fall naturally into different categories? If so, you might want to keep the main navigation labels as ‘Products/Services, then have a submenu that unfurls when the user hovers and displays the subcategories.

When trying to decide on your main navigation elements, it’s useful to make a list of the main reasons you think people will be visiting your site. Then, look at the items you want to include and see how many clicks the user would have to make to find what they are looking for in each of your use cases. Will they see where they need to go on that initial F-scan or will they need to dig a little deeper? Often, when you are organizing your site, you are thinking about how you want the user to consume the content rather than what they might be looking for and helping them to find it.

So, you have narrowed down your top-tier categories to a logical 3-6 and each one is going to have some subcategories. When you decide to add submenus, think about what elements of the page will be covered when they are open and make sure any design choices prioritize legibility (read more about how to make the best design choices for your header). Make sure items on the list are left-aligned as this makes them easier to read.

Large e-commerce sites or sprawling government websites give priority to their navigation, often using the whole screen in order to display categories, but most sites will probably only have a handful of top-tiers along with some submenus and maybe some third-level navigation.

Complex navigation to accommodate multiple visitor types and a large amount of content

https://www.colburnschool.edu/conservatory/why-colburn/viewbook/

Third-level navigation is used when you have categories within categories. A user opens the submenu, scrolls the submenu and when they reach an item with more categories, the third-level menu opens, sometimes on the left, sometimes on the right, depending on the screen size and location of the menu item. This kind of inconsistent behavior can be frustrating for desktop users because it requires quite a lot of mouse dexterity, where one small displacement makes the menu disappear and you have to go back to the top-tier category again. This is even more difficult to manage for sight- or mobility-impaired users. Think about this when designing your hierarchy and what kind of impact it will have on your users.

Horizontal or vertical navigation?

What if you have too many top-tier categories to fit into your header? And, how many are too many? Is it better to rethink your categories and combine some to reduce the number? Or maybe you can rename them or use acronyms?

It’s generally not a good idea to simplify your navigation specifically for aesthetic reasons. Changing category names to make them fit or forcing items together into unnatural groupings for convenience will make it more difficult for your visitors to find what they are looking for and create a good deal of frustration. There are stylistic choices you can make in the navigation design that will resolve these problems for you.

Choosing vertical navigation is a great way to accommodate multiple top-level categories that will help users find what they are looking for quickly. Although vertical navigation menus are less common than horizontal, the F-shaped web viewing pattern still encompasses this area so most users will not be confused by this design. Make sure your design choices differentiate the vertical navigation menu from the rest of your site so users don’t overlook it.

Vertical navigation menus can also give you more room in the header if you have other elements there, such as banners, login spaces, or account details that you want to give priority to. Don’t make the mistake of duplicating elements in the vertical and horizontal menus though; two navigation areas is already more cognitive load for your users, so keep it as simple and intuitive as possible.

This webpage has a vertical menu that opens on clicking the hamburger icon in the header. https://playball.daytondragons.com/playball

On the whole, vertical navigation can be a good solution if you have a lot of categories, or if you know your site contents will grow and don’t think they will be accommodated in a horizontal navigation. However, you should be aware of the additional real estate taken up by vertical navigation and try to find a happy medium between helping users find what they are looking for and not blocking content that they want to see.

Another advantage is that vertical navigation translates easily to mobile. Even if you spent loads of time narrowing down your top-tier categories to make them fit beautifully into your perfectly designed header, once you translate it to mobile, it’s either going to fit into a hamburger menu or be displayed vertically in any case. Users on mobile are more likely to be looking for something specific than just browsing your site, so navigation should be front and center.

When to include a search bar

A search bar can be a great addition to your navigation elements. If we think about the analogy of physical shopping again and use the example of a bookshop; you can find books grouped into genres so that you can browse for something you might like based on the type of book you feel like reading or, if you want to find something specific, you can go to the bookshelves which are organized alphabetically by author. The search bar gives the user this other way to search so that they can find something specific they are looking for and this works very well for deep sites that have a lot of very specific content: Just imagine shopping on Amazon without the search bar!

Something to remember when thinking of adding a search bar is that users generally prefer to use menus to find what they are looking for, and there are a number of reasons for this. Deciding what words to use requires thought and it’s easier to find something on a menu and click it. In addition, even if users are looking for something specific, sometimes it’s nice to browse and be surprised by something they weren’t expecting e.g. maybe they are looking for a pair of Nike trainers, but there are some new Adidas on offer that they might prefer.

Using site navigation lets users see more of your site and makes it more likely that they will spend longer on it and return again. The second thing to remember if you’re adding a search bar is to make sure it works! This might sound stupid, but many search bars don’t accommodate for different spellings, synonyms, etc. In addition, they might show an unhelpful message if the search turns up with no results, making the search experience fraught and frustrating. A well-designed and intelligent search bar should be an opportunity to gather information about the shopper’s likes so you can show them similar items and get them back into your site.

The ASOS shopping site puts the search bar front and center but also gives shoppers the option to search by Women / Men categories https://www.asos.com/

Essentially, unless you can ensure your search bar is optimal, don’t bother adding one. However, even if you design your search bar to work perfectly, many users are so used to unsuccessful search experiences that they will avoid using it anyway. Make sure your navigation is the best it can be before you think about adding a search bar.

What other header elements might I need to add?

So far, we have examined the key things you need to put in your header; namely your company logo and a way for users to navigate the site. However, there are many other items that you may see on different websites and you might be wondering whether you should add them to your site as well. The decision on whether to add them or not will largely depend on the key objectives of your site but in general, you should err on the side of simplicity - if you don’t need it, leave it out. Let’s take a look at some of the different options and when you should think about including them in your header.

Contact details: This might include a phone number, links to your contact form or even an address. Most of the time, contact details can be found in the footer of a website and that’s where users would expect to find them. However, if a key objective of your site is to provoke the visitor to contact you, then you might find it useful to have this information in your header. For example, a local restaurant or tradesperson should have a telephone number for bookings (in the absence of an online booking system).

Notification bar: Part of the header space can be used to place a welcome banner, perhaps including a promo code, key updates, or specific CTAs. Be careful with adding these notification bars, site visitors often ignore them by default, expecting either a cookie notice or marketing messages.

This coffee website reminds visitors that shipping is free in the header. https://syra.coffee/

CTA: If users can sign up for an account with you, you should make sure you have a clear CTA to show where they can either log in or sign up. Often, this is placed in the header at the top-right. When users are logged in, they would usually be able to then access account details via a profile icon at the top-right. For charities, a ‘Donate’ button should be present in the header so that users can donate from any page of the site. Other types of CTA might include ‘Book a table’ for restaurants, ‘Register’ for newsletters, etc.

This header for a charity website includes a Donate button in the header. Note the color contrast which helps it to stand out https://hopenothate.org.uk/

Shopping cart: Ecommerce sites usually include a shopping cart or bag icon at the top-right so that shoppers can continue browsing and return to their cart to pay when they are ready.

Language toggle: If you are trying to reach a multi-language audience, you can include a language toggle so that users can change it.

What about mobile?

When thinking about what to put into your header, in the same way as when you’re designing your header, you will need to give some thought to how the content will be presented to the user on a mobile device.

If you have simple, clean navigation with few elements, you may be able to keep the information as it is, although the icon might be placed above the main navigation elements. For most cases, menu items will be put into a hamburger menu which users need to click to open. For multi-tiered navigation, including If you opted to include side navigation, bear in mind this is going to occupy the whole screen on a mobile device.

The Gov.uk website navigation takes up to full screen on mobile https://www.gov.uk/

What about the footer?

We have an article here about footer design and what is typically included in your footer. The key difference to remember is that the header is prominently placed and is going to be in the visitor’s line of sight, no matter what page of your site they are on, whereas the footer has to be sought out specifically. What this means is that, while the footer should always contain what users expect to find there, you can be a little more flexible with the header, displaying to your users what you think they would like/need to see, rather than what they expect to find.

It’s ok to duplicate information in the footer, particularly if you’ve decided to include contact details or social media buttons in the header. Some footers also have site maps and you can use these to offer a different type of navigation to your users. Think of it as a reminder to users; they already browsed your site and now they’re in the footer so remind them of the highlights and give them the direct links to go back there. By contrast, the header is the first chance you have to present the site layout to your visitors, so it needs to be simpler and clearer.

Best Practices

You should now have a pretty good idea of what you need to include in your header. Let’s recap the main points and review some of the best practices:

Do …

Be clear on the main goals of your site - the elements in the header should reflect that
Be careful to balance ease-of-navigation with clarity
Make sure everything you put in the header is clickable
Make sure your hierarchy is intuitive and that the most popular contents are easiest to reach
Name your navigation elements appropriately and clearly (words not icons, etc)
Use the right size and format for your logo … and make it clickable
Use conventions where possible - put your header elements where users expect to find them so there is less cognitive load (F-shaped scanning)
Add a CTA in your header if it’s a key objective of your site
Include a shopping cart if you have an e-commerce site
User test your navigation and update regularly