What’s the most important part of a website? Is it the content? The images? Is it the structure? Or is it the collection of features that define its usability and ease? If you look at websites from different perspectives, all of these would be correct. But you would be wrong to dismiss a crucial feature that sets a website apart from the rest - the header.
A website header is like a crown on a person’s head. It signals authority, it reflects significance, and it makes the wearer a more prominent persona. A header design must be a combination of visuals and functions, and most of the time, they must be the most well-planned portion on a website.
In this blog, we’ll talk about what a website header is and why it is important. We’ll also list down some tips and best practices when designing a website header for your own website.
What is a Website Header
Image taken from Strikingly user's website
A website header rests at the very top section of your website, hence the word “header”. It provides a variety of purposes, especially for web visitors. First, it’s a section where a company’s logo is placed (sometimes including the name too.) Second, it has a set of menus that users can use to navigate through a site. And third, it serves as a “direction” for where web pages are and how to get there.
This section is generally identical to all of the website's pages; however, certain templates give the home page a subtly different website header look to attract attention to the site's featured areas.
Common Features of a Website Header
Website headers are typically composed of various elements. There are fixed website headers that stay in the same position and remain the same regardless of which web page a user is viewing. There is also a floating header which gives the illusion as if it’s following you as you scroll.
Before adding common features to a header, you must first identify what type of header you want. Do you want a fixed or floating header? To help you choose which one is better for your site, consider the following things:
- Classification of your website (ecommerce, online portfolio, service, etc.)
- Marketing purpose
- Website goals (e.g. increase conversion rate)
- Content structure and organization
Here are some common website header features that you often see on many websites:
- Logo
A site header usually has the website or company logo. The purpose of adding a logo on the header is to establish identity. Beyond branding objectives, adding a logo also creates distinction and brand recognition.
The logo is usually placed at the upper left corner of the header. Alternatively, you can also opt to add your company name instead. Depending on your preferences, you can even add both. Just make sure that each has ample space to be viewed and read.
- Navigation
Image taken from Strikingly user's website
Navigation is the menu that contains links to jump from one page to the next. This is what you’re web visitors will use to navigate your site. You can also make use of drop-down menus if there are different pages under the same category. Want to know how to make a seamless navigation feature? We’ll talk more about that in a later section.
- Shopping Cart
This feature is extremely useful, especially if you’re running an ecommerce website. The shopping cart would allow users to see which items they’ve added to their carts. If you’re launching an online store, don’t forget to add a shopping cart feature in your website header.
- Search
It would be hard not to notice a search feature in a website header design. This is often symbolized by the magnifying glass image. This feature allows users to easily type in what they’re looking for. Unlike navigation, the search feature specifically targets certain words on your website. The search is usually placed on the upper right corner of the website header. Adding a search feature on your site header will make the user experience much better.
- User Profile
For your header background, you often need to add a user profile feature. What is it for? First, you can add this feature if you’re running a website that needs memberships such as an online store or a social networking platform. Second, it gives the user much more control over their preferences.
Importance of Having a Good Website Header
Here are some benefits of having a good website header:
- It Helps With Search Engine Optimization
Having the best website header means you need to put forth efforts to drive traffic. High-quality traffic is key to better leads and potentially, higher revenue.
- It’s Great For Mobile Users
Navigating sites may be difficult using smaller screens. Adding a website header will make the experience much easier on mobile browsing.
- It Makes Web Pages Easier to Locate
With a website header, users would have a clear direction of where they are on a website. If they want to move to a different section in a site, all they have to do is refer to the website header.
Tips on How to Make a Good Website Header
Want to make an exceptional website header? There are certain tips that you must follow depending on what you want to achieve on your site. There are also practices that may or may not work on your website. Remember, website headers should depend on your website structure and goals, not the other way around.
- Make It Simple But Emphasize a Specific Feature
Take a look at the website header of Pet Milestone Cards. It's very simple and straightforward. It doesn't even have elements that separate it from the rest of the homepage.
On their website header, they have their logo on the upper left corner, while the rest of the menus are well-spread across the top.
Image taken from Strikingly user's website
But if you look at the "Buy Now" button, you'll see that it's enclosed in a yellow oval, highlighting among the rest of the content. Just by looking at the website header, you'll see that what they want to achieve is to make their products sell more.
Make sure to emphasize certain features of your header that would lead towards your goals.
- Add A Drop-Down Menu For Links Under Similar Categories
Earlier we talked about navigation. Apart from adding links at the top, you can even add a drop-down menu for each navigation.
Image taken from Strikingly user's website
A good example of drop-down menus is the ones used by Fighting Pretty. As you can see in the image above, each main menu can be extended to view specific web pages. Just slightly hover each menu, and you'll see the rest.
Fighting pretty also utilized other principles of an excellent website header. They have their logo, company name, and a feature that is highlighted on the page. If you want to get more stunning website inspirations like these, just visit Strikingly.com and discover amazing websites and website headers.
- Make Your Website Header Minimal Over a Captivating Background Image
Usually, you'd want to put a header image to increase the visuals. But sometimes, you can make your header simpler, smaller, and less noticeable to make way for a great background image.
This is one of the instances wherein visuals exceed function. Take a look at the image below. Live Lite's website header only contains three links. It's white, with a small font size that makes it seem as if it's barely there.
Image taken from Strikingly user's website
The reason why you may want to use this practice is when you want to divert the users' attention to more important portions.
Live Lite is concerned with life coaching so they used a comforting image of a man simply resting over stagnant water. The image is supported by the website's name on the left. If you want to achieve something similar for your website header, make sure to use an image that would make up for the small header.
- Opt For Something Simple Yet Functional
Repurposeful UK's website is great in its own way. With an extremely simple website header, it's easy to tell that they value function, convenience, and ease more than aesthetics.
Each menu on their website header is separated into blocks that the user can easily see. It is also big enough to be accessible and easy to notice.
Image taken from Strikingly user's website
As you can see in the image above, they added their company logo at the perfect spot. Instead of symbols, they used specific texts to name each menu.
Their headline properly rests over their homepage's main image. The contrast between the colorful background and the white website header creates a balanced look for the website.
A website can help you set yourself apart from the competition. It also represents your authority, brand, and identity as a website. It's important to make a great website header for search engine optimization, better traffic, and mobile usage.
If you apply the tips and best practices, you can expect your website header to be as remarkable as possible. To have the best experience in making a website header, head on to Strikingly, create your free account, and use its tools to build an exceptional website header.
