website header

So what is the website header?

As the name suggests, the website header is at the head, or top, of the page.  It has particular significance as it will be at the top of EVERY page on your website.  It’s likely to be the first thing a visitor to your site notices and you want it to capture the personality of your business.

There are three examples of headers given in the picture at the top of this page.  The DIY Digital website header has six social icons, the logo to the left and four menu items against a white background.  The Marilyns is striking with its bold blue background.  The Lars Heldmann photography website has strong colours with a personal branding.

The website header goes a long way towards determining the look and feel of your site.  The colours are likely to be your key brand colours.  It will often have your logo in the top left.

It also goes a long way towards determining the functionality of your site, as it houses the menu.  The menu is the list of key pages within your site. Best practice is to keep your site to eight pages or less. This will help you focus on the content that is going to be most effective at converting visitors to leads. Keep the site simple by naming pages with one word only, for example “Contact” rather than “Contact Us.”

Your social icons, such as your facebook page or Instagram handle will often be included in the website header.

Your website designer is more likely to design a site you like, if you let them know what type of website header you like and need.

Questions to help you design your website header

What colours are in your logo or best represent your brand?  Do you want a striking bold colour, a subdued pastel or a crisp white?  Do you have the perfect photo or image concept that reflects the personality of your business?  Do you want simplicity or an eclectic funky mix of icons and images?

What pages are the most important for your website visitor to click to?  Is it the shop, the appointment page or registration form?  What’s the key action you want visitor’s to do when they reach your site?

How many social media channels do you have and do you want the icons to appear at the top of your site?

Asking yourself these questions and providing the answers to your website developer will go a long way towards ensuring you get the website you want.

To find out more about different parts of a website and what you might need to consider take a look at the DIY Digital 10 step website plan.

Images

A stunning image can go a long way to making your website header, and therefore your website look great. Do you have a great photo that represents your business or where your business is located? Do you have an image that has been professionally designed that can be used? If so, be sure to provide these to your web developer.

Logo?

A good logo will create a great first impression, set you apart from your competitors, create a memorable identity and give your business the professional edge. However if you are a start-up and have not yet got a logo, or you don’t wish to invest in one, you can still create a website without one. Here’s an example of a business that does not have a logo but still has a great online presence.

Website headers on a mobile

A website header will look different depending on whether you are looking at the site on a desktop, tablet or smartphone.  Here’s what the website headers for the first three examples used in this article look like when viewed on a mobile phone.

website header mobileMobile header example  Mobile header example

Check out our 10 step website plan for more helpful information about building your first site.

Still need more inspiration?  Here’s 50 website headers that showcase creativity and wit.

3 Shares
Share3
+1
Tweet
Share
Pin