Tips for Designing the Perfect Website Header
The website header is the first thing a visitor sees when after landing on your site. Here are a few of our tips to make sure your header shines on every page.
The website header is at the very top of each and every page on a website. The header's job is to establish your brand, guide visitors through the website, and provide core information about your business.
Emphasize what is important and only what is important
Most visitors only spend several minutes on a small business website before exiting. Think of the top things you want that visitor to do on your website before they leave. Those things probably include browsing the home page , reading about the business on the about page , exploring your services , and taking some sort of action like contact us or donate now . These are the items you should focus on in the header.
Below is a screenshot of the website header from Old California Restaurant Row. They are a location with over a dozen restaurants for diners to visit; their most important piece of information is their address. At the very least, a website visitor needs to know how to find them. Their second objective is to entice visitors to sign up for their email newsletter by offering the chance to win a gift card each month. This is the second piece of information in the header and is their primary Call To Action. Below these is the business logo and navigation menu. These are clear, bold, and easy to read, because we want the visitor to easily and effectively navigate the rest of the website.
Shrink the header to make more room
If you want a big, bold header with lots of information, keep in mind that it can take up a lot of each page's real estate (especially on mobile). We recommend you use a s hrinking Header , this design feature minimizes the amount of space a header uses -while keeping the key navigation information readily accessible - by reducing its size once a user begins scrolling.
Our client, Knowhere Games And Comics , has an awesome logo and wants to feature it on a large nebula background. They are also active on social media and it was important for them to make sure those icons are prominently placed. Lastly, as a retail store with a physical location they want to make sure their business address is easy to find. In the header design below you will see once the user beings scrolling, all the information aside from website navigation is stripped away so the other information doesn't detract from each page's content.
Ditch the social media icons
If a visitor is already on your website, are your social media pages where you want to direct them? Once a visitor leaves your website for a social media site or app, it is unlikely they will come back. You may have valuable or educational information on your page, but the temptation to explore is often too great. How many times have you logged into Facebook to find just one piece of information and ended up spending way too much time distracted?
For Knowhere Games and Comics , their social media is an integral part of their brand and a primary way to share the latest games and gaming news with their customer base. It makes sense for social media icons to be front and center on their website. However, for Old California Restaurant Row the goal of their website is to drive traffic to their restaurants. Visitors leaving their website straight from the home page header doesn’t help them achieve that goal. Ultimately, the decision to include social media icons in the header depends on the vision and purpose of your website. For many organizations and businesses, it does make sense. But just because it’s common, doesn’t mean you have to follow along.
Do you have questions about GoBeRewarded's web design choices or how we do what we do? Comment below or contact our team directly. They love what they do and enjoy talking about marketing.
