What is a site header anyway?

What is a website anyway?

I mean, we all know what one looks like. You’re on one right now.

But how much do you know about the workings of a website? What elements make up a site? And how do they come together

The purpose of this series is to give a deeper understanding of just what a website is and the elements that make it up. That way you can know what’s going on and make sure your site is optimized for your visitors.

We’ll start with the thing you see first on every website: the header. We’ll work through what it’s purpose is, why it’s important and the components that make it up.

So let’s learn more about the website header.

What is the purpose of the site header?

So what really is the purpose of the site header and why should you care about it? Simply put it contains your logo and branding so that people know that this is your website, and it likely holds you main menu so people can navigate the website.

It’s the first thing people will tend to see since it’s at the top of the page. They’ll either see you logo and some of the colors of your branding, and it’s a bit of an introduction to who you and your business are. A first impression of sorts.

Also, it contains necessary navigation functionality. Your menu will likely be contained in the header and that’s how people will likely move around your website. They’ll use it to go to your store, learn more about what your business is about and get to the page to contact you.

With as short attention spans as most people seem to have these days, the header is probably the most important part of the website.

Branding and logos

Your main concern is probably going to be the branding and logo that you have in the site header. After all, how else will people be able to quickly know that they are on your website.

And it’s not a bad thing to be concerned about that. Branding is a key part of any website. All the colors have to match your brand. People need to know that this is the website for your business.

I do tend to value the navigation a bit more than the branding, as I’ll discuss in the next section, but your logo can play a big factor in that as well. You need to make sure that, while it’s displayed prominently, the logo can’t get in the way of the navigation. People will leave your site if they can effectively use the navigation.

So, make sure the logo and branding are in a prominent position, but also check and test to make sure it won’t interfere with any user interactions with the menu.

Navigation

Meanwhile, the navigation element is the primary concern for your visitors. After all, this is how they’re going to be their primary way of getting around your website to find what the want and/or need.

The tricky part about the navigation is it can be tempting to stuff a lot of links in here in an unorganized way. Since it is the primary way visitors will navigate your website, you might think about putting links to almost everything on your website up there just so people will see them.

But more doesn’t really mean more, especially with web design. And the more links in the header navigation, the more complex you make decisions for your visitors. That leads to decision paralysis and ultimately them leaving your website.

For me, the rule of thumb I typically use is to aim for about six to eight top-level navigation items with an absolute maximum of 10 (which is usually the limit for the smaller desktop screens anyways). And then I logically organize other items from there, with a soft limit of five child items for each parent item.

This helps make the navigation cleaner, easier to read and way less overwhelming for visitors to the website. A good navigation can go a long way to making a great impression on potential customers.

Examples

Now that we know what a header does and the components that make it up, let’s walk through a few examples to show you what to do and maybe what not to do. Also, if you don’t know this already, I prefer minimalist styles on my websites, so the examples will have a bit of that bias. Just a heads up.

This website

Header of JacobMartella.com

So I guess we should probably start with my own website if we’re going to go around critiquing and what not. My preference for minimalist style is on full display with the menu. It’s very simple with a transparent background that changes to white on scroll down. I only have six top-level menu items with the logo in the middle as a link back to the homepage. I know I’m biased, but I honestly think going with only the basics will be a big help for your website.

Bohemian Traders

Homepage for Bohemian Traders

This header is a little bit more complex than mine, but it’s still a really good header example, especially for an online store. If you sell online, you’re going to have to have links to both your store section, the visitor’s cart and their online account. Those add items needed in your header, and it can clutter it up pretty quickly. But they’ve done a good job of keeping them noticeable, but separate to keep the clean look. This is a prime example for any online store.

RYDER (old design)

Old homepage for Ryder Australia
The old homepage for RyderLabel.com (from Oberlo)

Okay, I’m not a fan of this header/navigation area. It’s literally all over the place. The menu and store links are too far apart in this case. I don’t really know where to go. And it takes up a ton of real estate. That makes everything else feel cramped. Your header can be horizontal across the top or vertical down the right or left side. I don’t care which one you go with. But pick a direction and stick with it. Please.

So there you have it. That’s what the site header is all about. How does yours stack up? If you’re in the process of redesigning your website, keep some of these things in mind. The header might seem like a small thing, but it can go a long way towards making your website a great experience for visitors.

Next time we’ll tackle the site footer.

Website Elements Series

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.