How to create a striking header for your business website

Your website header is the first thing your visits see when viewing your site – so it’s important to get it right. These tips from our head designer will help you create a striking website that can improve the overall design and effectiveness of your business website.

Headers are becoming more and more important to websites and a lot of designers don’t seem to understand the impact they have on the way viewers see a website. A good header can change the whole look of a site and can improve bounce rate greatly. There are a few important things you need to remember in order to create great looking and effective headers for your website.


First, a logo placed in the left corner. Our eyes scan pages from left to right, which means the logo will be the first thing the user sees. You want people to remember the brand. It’s important to ensure the logo is clickable, linking back to your home page.

Make your contact information easy to locate. Usually an email address and/or phone number is placed on the opposite side of the header. You should consider adding an icon here. Adding phone and letter icons for the the telephone number and email respectively changes the header completely. This is also becoming standardized, especially with e-commerce websites. It’s also recommended to include a strong “Call to Action” in the header as this is instantly visible to your website vistors. Your aim will be to drive users to the conversion page, so having a button such as “schedule appointment” or “free consultation” easily allows this. People want options, and may not always want to call. Most times people want to buy or book directly online.

The header above illustrates a simple design, with a great looking icon next to the phone number as well as a call to action button in the header. This approach is perfect for building and trade sites as well as professional service sites.

Not all headers need to have pictures. Sometimes less is more. Modern web design does not use imagery in the header space outside the logo. The important thing to remember is that the header as a whole should not consist of one large image. It can be tempting to take this easy route, but for SEO and usability purposes it’s vital for the header to include text and clickable areas. With bOnline’s website builder, it’s easy to create these best practice headers for your site.

The average header is less than 200 pixels high, but headers do range from slim to half a page. Remember – the reason people come on the site is for information. If you’re a business owner people visit your site specifically to see how you will solve their problem. You don’t want the header to be a barrier for that information, as people may leave the site. With so many devices to view websites, thinking about mobile and how your header will look is also important.


Sometimes less is more. Cluttered headers are distracting. Your header should invite visitors in. Think overall branding of the site and how it’s tied into your header. Most importantly, have a purpose to the design – whether you use an image, text or both – and tie this in with the whole site.

It’s also vital to match the header with the navigation bar in terms of colour and style just as it’s so important to match the colour scheme of the site with the logo (in most cases).

Not only do headers have a huge affect on bounce rate and design of a website, they also have a great affect on SEO, so getting them right is imperative. As well as ensuring your header is ‘readable’ by search engines (i.e. includes some text and is not just an image), it’s also important to utilise the h2 and h3 text boxes in the headers as these will affect SEO.

In conclusion, website headers are like miniature versions of the home page that sit atop each page and do many of the things that home pages do, but in a limited space. Headers provide site identity and global navigation, with search and perhaps other tools. When it comes to effective and striking design, remember that simplicity is never a bad thing.

Share and Enjoy

  • Facebook
  • Twitter
  • LinkedIn
About Sam Greensted

Sam is head of design services at bOnline. In his posts he shares tips for creating a beautiful business website and getting the most out of bOnline's website design tools.

Speak Your Mind