Your website header is often one of the very first parts of your website that your visitors will see. It is usually shown on all pages of your website and contains your logo and main menu.
Sometimes there are other elements, such as a top bar, a search tool, a call-to-action, and occasionally even contact information, depending on what elements are appropriate for your business.
I’ll also include the favicon in this list, which is the tiny icon that appears on the left side of the browser tab when your website is open.
Let’s evaluate your website header, one element at a time.
Logo
Your logo is part of your branding but can also be essential to your navigation. For example, the standard logo or business name in the top left or top center on every website page is grounding for users to know where they are and which business they are interacting with.
Also, most users expect the logo or business name to be a clickable link back to the homepage, so it is a usable part of your navigation.
Two questions to ask about your logo:
1 – does it have a clickable link to your homepage?
2 – Is it appropriately sized on both a widescreen and mobile view?
I often see large logos that cause the header to take up a lot of space on the first mobile screen. A large header can cause a less-than-ideal user experience because they don’t see the rest of the first screen they should see.
On the flip side, many logos are square and, when resized for mobile, become unreadable at best and almost invisible at worst. Does that matter? Not necessarily; it’s something you can decide if it is vital to your users that they be able to see (and read) your logo. Sometimes the familiar shape and colors are all you need. You can identify your business with text in the header or in other places on the page.
Some options for fixing this:
- Pull your logo out of your header. I know – that sounds weird. But if your logo needs to be more readable at a small size or is causing your header to take up too much of the screen at a larger size, you can use text to add the name of your business to your header. Then you can put your logo further down the page where people can see and read it more easily. I like to put large logos in the footer sometimes.
- Make your logo small for an optimal header size, then add your business name in text beside it so people can read the name of your business right away.
- Make a horizontal layout version of your logo to use in your website header. The dimensions might be 250px by 150px, 350px by 75px, or 400px by 100px.
Main Menu
**Note**
Changing the menu is different from changing the URL of a page on your site, which can impact your SEO. If you change the URL of a page, make sure your platform automatically updates your Google sitemap and redirects the page from the old URL to the new one for you. Otherwise, you might need to do both of these tasks manually. Avoid changing the URL of a page unless you are ready to deal with these tasks.
Example of changing a URL:
Old page URL: https://icodehappy.com/portfolio
New page URL: https://icodehappy.com/recent-work
** End of the note**
Evaluate your navigation menu for the following characteristics:
- 3-7 main items
- Simple
- Specific as possible
- Readability
- One level of sub-items, if you have sub-items in a dropdown below a main item
- Call to action (more on this in the next section)
The main menu of your website should be as brief as possible. Some designers recommend seven items or less – I say use as few as possible and still make your site usable. If you’re struggling with the navigation and how to make it functional and simple, you can try the Map Your Website exercise in Step 1 of the “Save Your Website Information” section. Mapping your site can show you how you want the pages to interact.
Don’t forget, on mobile, the menu will likely be a hamburger menu that either drops down or flies out from the side of the site. Keep an eye on the length of your menu on mobile as you optimize it because you don’t want critical functions hidden below the bottom of the screen. I’ve seen this happen where the “Log Out” menu item disappears off the bottom of the screen on mobile. Sometimes you can scroll down to it, sometimes you can’t, and it is always a not-great user experience when something like that happens.
You can add sub-items under the main items, but keep this to one dropdown level if you have dropdowns – don’t do two or more levels of sub-items.
Menus with dropdowns can be a challenge for users to find things, so minimize using these where possible.
Otherwise, if you need to show many items in the menu, use a mega menu. A mega menu is a large list of options that pops up from one main menu option. Large retailers use them to show all the subcategories of a main category.
CTA (Call to action)
Desktop (or laptop):
Some web designers recommend a call to action in your header. According to how we scan websites, the ideal place for that item is at the top right of your page. You will see a lot of sites with a with a call to action in that location that is highlighted in some visual way. Highlighting the right-most menu option uses how our visual attention tracks on websites, from top-right to top-left, and then down in a “Z” pattern.
Some people use the right-most main menu item, while others use a button located to the right of the menu.
Some designers make sure there’s a call-to-action on the first screen of the website, “above the fold” – but don’t include a CTA in the header of the website.
Mobile:
The mobile screen is so much smaller that many people make sure a CTA button is visible somewhere on the first or second screens as you scroll, instead of trying to cram it in on the first screen.
It’s great if a CTA will fit in the first screen on mobile, but ok if it’s on the second screen.
The CTA in the top right of the screen on Desktop is usually hidden in the hamburger menu on mobile. That’s probably fine; just review and evaluate on both Desktop and mobile as you are looking at the CTA.
You can also put a call-to-action in the top bar of your header if you have a top or announcement bar available to you in your website platform or theme.
You can see above on my website (icodehappy.com) that the top bar is where I mention Your Website Buddy™ – that’s my call to action in my header.
Contact Info
If your business promotes people calling or contacting you, your website header is a good place to put that information. You can see the yellow “top bar” in the example site has a phone number. A clickable phone number in the header or top bar of your website is a great way to get people to call you if that’s what you would like them to be able to do. You could also put your email or another way to contact you there.
However, placing your social icons in your header is not recommended. It takes people away from your site, and they might not come back. Your footer or other links in your website are better suited for social links for most people unless you have a specific reason for sending them to social right away.
Top Bar
I mentioned the top bar or announcement bar earlier – this is a great place to tell people what is happening in your business. For example, you can announce sales or discounts, mention shipping or store hours, or include your call to action.
Search
Not every website needs a search tool in your website’s header, but consider if it would be useful enough to your visitors that it is worth giving that special space to. Search tools allow people to use topics or keywords to find content such as blog posts or products on your website.
Favicon
The favicon is that tiny icon that appears at the left of your browser tab or under your tabs on mobile. A square version of your logo is a great option for the favicon; just remember that simpler is better and easier to see. There are guidelines for how large the favicon should be – you can check your website platform or theme and test out some sizes if you like.
