Looking for a quick answer to your question? Click here...

WOO HOO! John and Bri are ready to help!

Just fill out the form below and we'll get back to you with some sound advice at the very least.

Designing an effective website header

Advantages of researching and planning above the fold content

There are many important parts of any website. From the typography to the above the fold content, to the images and visual content, each piece of your web design needs to work cohesively with other aspects to provide a well rounded, effective website. The website header is no exception. So what is the website header? What should it include? And how can it be useful? Well, here at Pumpkin Web Design Manchester, we are Manchester’s leading web design professionals. From Wigan to Southport, we work with companies across Manchester and the surrounding region to deliver high quality web design solutions that really get results. As a result, we have produced this guide to designing an effective website header.

What is the header?

The header of the website is the top bar that runs along the very top of the screen. This generally is above any images or video content you are using as your above the fold content, and it’s even above any navigation bars or tools. Essentially, a header is the opposite of the footer, that follows right at the end of the page. Not every website will use a header, but for local businesses and small to medium sized businesses, they can be very effective.

What should a header include?

So, if you do decide to use a header, what should you use this top bar for? Well, there are a number of important items that different companies choose to include in this section, and these include:

  • Quick contact options- these are generally icons that can be clicked on to start a phone call, or a message to the company. When using a mobile device this is incredibly useful, as it means any potential customers can simply click on this button at the very top of the page, to get in touch with you in an instant.
  • Opening times- for stores and offices with a real world presence, outlining the opening times for that specific day in the header, can be a very effective use of space. Especially when you are planning to improve the user experience by considering micro-moments.
  • Company logo- this is one of the most important parts of your company branding that will appear on your website. And by positioning it right at the top of your page, your viewers wont miss out.

Designing an effective website header

So your website header is a great place to show information that your users might be looking for, and this helps to improve the user experience. But it’s important that your header is well designed. You could consider:

  • Shape and sizing- for any icons used in the header, you should make sure they are all a equal size and a similar design. This will help keep your web design professional, and help your header blend into the rest of the page.
  • Use a different background colour- some companies decide to use a different background colour for the header bar. This sets it apart from the main content, and can help to draw attention to the top of the page. The background colour of the header should match the background colour of the footer for a professional and cohesive finish.

For more information or advice, or for high quality, professional web design solutions, get in touch with the experts today, here at Pumpkin Web Design Manchester.