Everything must have a beginning and an end. This is true for films, books, songs and – there it goes – websites. The human brain relies on specific visual or audio prompts to understand where a web page starts and where it ends. These prompts are the website header and website footer.
Today we will shine a light on these often overlooked elements of a site. We will explain why they should be among the top priorities when you are designing or revamping your site. Also, we will tell you what exactly you should include in the header and footer.
The Role of Website Header and Website Footer: Beyond the Visuals
We already explained that a site’s header and footer have the role of book covers or opening and closing credits in a film. For this basic reason, a website should have both of them.
We say this because we saw many sites with a beautifully designed header, but no footer. It felt unfinished – like a book missing the back cover and making you wonder whether it also misses some pages.
But the website header and footer also have a functional role. They are the places where users expect to see specific types of information. We will detail these later in the article. What is important to know is that the header and footer are the only places on each page allowing you to display this information without cluttering the rest of the webpage.
Few Facts about Header and Footer to Consider during the Design Phase
Now, let us assume that you are creating your website or making a major design change. Here are some of the aspects to keep in mind when you have to decide on the header and footer:
1. The Header and Footer Create the Layout Structure
When creating the initial mock-up for a site, designers start with the header and footer. These are the main visual elements and their shape, size and colours determine what happens in between.
Thus, the look of these two elements plays a key role in the overall design of your site. For this reason, you must pay special attention to their design. A good site can be ruined by inadequate header and footer.
2. You Only Get One Chance to Make a Good First Impression
The header is the first thing a visitor will see when they land on your website. Various studies and heatmaps show that people start looking at the top left side of a website. They will take in the rest of the surface from left to right and then start scrolling down.
Thus, the website footer is actually the first thing a visitor will see when they form their first impression. Make sure that it is a good impression.
3. Your Website Navigation Is Embedded in the Header and Footer
Some websites experiment with a navigational menu on the left or right side. However, the traditional placement for the site menu is on the header. This is the only convenient place if we consider mobile browsing. Mobile phone screens are quite long and narrow. Thus, a lateral menu will make the area available for the page content becomes even smaller.
Also, the website footer is the best place for the sitemap. A lot of users will go straight to it when they are looking for a specific page on your site. Thus, the site’s header and footer is very valuable real estate and you must use it judiciously.
Key Elements to Include in the Website Header
Let us now discuss each specific area in detail. We will start with the header – just like a visitor looking at your site for the first time.
The most important elements you must include in the header are:
1. Your Company Logo
The logo has a privileged position on any website. It represents your brand identity and allows customers to recognise your products and services whenever they see it. Some companies have iconic logos which no longer need the brand name written underneath. Consider the Nike smile logo, the bitten apple of Apple company, and the three stripes of adidas.
The logo must stand out and look its best. Thus, you must pay attention to the colour of the header and the placement of the logo.
2. Navigational links or the Website Menu
The menu is an essential part of any website. As discussed above, the best practice remains to place embed it on the menu. In some cases, you can opt for a floating menu, which continues to appear at the top of the screen when the user scrolls down.
3. The Search Box
A search box is another must-have element of any website. And the best placement for it is on the site’s header. When site visitors are in a hurry, they will search for the precise piece of information or product they are looking for. Thus, they must see the search box as soon as they land on the site.
4. User Login/ Shopping Cart
If you have an online store or offer SaaS (software as a service) tools, you should add the shopping cart and/or user login buttons on the header. Most people who want to make a purchase or use your services start their browsing session by logging into their account. Thus, make it easy for them to find the button.
5. Social Media Icons
Including a social media button, represented by the platform’s social icon, in your header can instantly communicate and encourage users to follow your brand on social media and stay engaged with your content.
6. Call-to-Action (CTA) Button
Adding a prominent CTA button in your header can help guide users towards taking a specific action, such as purchasing, signing up for a newsletter, or downloading a resource.
Best Website Header Design Practices
Create a visually appealing, user-friendly, and effective header for your website by following these fundamental header design practices:
- Size – There is no exact pixel concept for header size. Instead, it is better to follow common sense, purpose, and the type of pages you are designing for. For example, a landing page may have a larger header size to provide more information to visitors, while an informational page may have a smaller header to keep the focus on the content.
- Configuration – A fixed (sticky) header can improve user experience by keeping essential elements, such as the cart, phone number, or CTA button, in front of the user in a constant display. This allows customers to stay oriented and more in control of their navigation. There are other ways to configure your header depending on where you want to draw your visitor’s attention. The most common ones include the simple single-line header with a logo on the left or a notification bar on top.
- Relevant, high-quality images – Including relevant, high-quality images in your header can improve the overall aesthetic of your website and help represent your brand effectively.
The Elements You Should Add in the Website Footer
Let us now focus on the bottom of the website. The website footer is just as important as the header. It gives the user critical information such as:
1. Cookie/Privacy Policy
Websites collect cookies which can identify the user and the device they use. According to laws all over the world, users have the right to know how you collect, use and store cookies. This is mandatory information for any website.
You must also explain how you use other personal data users share with you, including sensitive financial data.
2. Copyright Notice
The copyright notice informs visitors that every written and visual element of your site is your property and they cannot use them before obtaining your approval. This is also mandatory in order to protect your rights in case of copyright infringement.
3. Terms of Service
The terms of service page contains several critical details such as:
- Payment options
- Delivery details
- Return policy.
Practically, these are the conditions of sale you offer your clients. Almost every new client will read these details before placing an order.
4. Contact Information
The website footer is the perfect spot to display your store/office address, phone number and email addresses or a simple link to your contact form. The idea is that most people will read the content on the page and will then see the contact options to get in touch with you or go to your store.
5. Sitemap
Finally, as we said above, the footer is the place where most users expect to see the sitemap. This element is useful not just for potential clients, but also for Google crawling bots.
Conclusion
The website header and website footer are essential parts of any site, both visually and in terms of functionality. For this reason, whenever you create a new site or redesign an existing one, make sure that you get involved with the designer and share all the key branding elements with them.