Website Header Design That Works Right Out of the Box

To get a visitor to your website to do something like download a PDF, get in touch, or check your services out, you might want to think again about how you’re using the header or masthead of your website.

We recently completed a website for a British school and one of the things they wanted to share with their audience was a PDF of the school brochure.

We deliberated where to put this on the site, looking at a variety of options, and in the end settled for the header. It’s one of those spots on a website that just draws your eye.

We put the download button in the header

Why not head over to the site and try it out. You’ll see a great little design trick we did with the button and can also check out the brochure we designed too!

Make Your Header Do More

It’s not just about getting people to download something though. An optimized header can be used to achieve other key business goals.

Promote a Product

Jay Baer, a US-based business consultant and author, uses his website’s header to draw attention to a (great!) book he co-authored with Amber Naslund.

Jay uses the header to promote his book

If you click on the instruction you get a whole bunch of info about Jay and Amber’s book without having to wait for another page to load. This is awesome design trickery! Kudos to the developer!

A brilliant piece of design work!

Show How to Get in Touch

Cliff Ravenscraft, the Podcast Answer man, uses the header of his website to make it 100 percent clear what he does and how to get in touch with him.

Podcast Answer Man

Cliff’s header communicates key information

Because Cliff works as a consultant it’s a brilliant touch to put his phone number right up there in bold next to his logo. As well as being convenient for potential customers, it’s also what I like to think of as a key “trust factor”. The visibility of the number oozes a sense of friendliness. Here’s a busy business consultant, available at just a call away.

Show Your Unique Selling Point

Here at Jontus Media I added a call-out-box under the header of the front page to see if it would help drive visitors through to our services page. After all, I’m always looking to tweak and improve things, to generate more leads.

Online Marketing & Communications Agency, Stockholm Sweden

Ugly, but funnily enough it seems to work!

In three months’s, it’s increased click-thrus by over 60 percent since it was introduced, which I’ve been happy about.

The only problem is I think it’s ugly as sin! So you can expect a change here in the not too distant future to see if a different solution will generate even better results.

What About You?

As a small business owner you need to think carefully about what you want your site to communicate; really discuss these things with your designer in detail and don’t just go for something that’s visually appealing.

The words I added under this site’s header aren’t visually as cool as, say, the call out button we created for the British school’s website. But it’s proving very effective!

Because the top of your site is one of the first things the visitor to your site sees you want to make sure it really serves a key function in terms of your overall digital marketing goals.

Decide whether you’re looking to generate leads, promote a product, or spell out your unique selling point.

How else do you think small or micro businesses could use the top part of a website ?

Did you enjoy this article?
Share
the
Love
Get Free Updates
About Jon

Owner of Jontus Media, marketing consultant, lifelong Liverpool FC support and podcaster. Guarded by basset hounds .

  • http://YourStressMatters.blogspot.com/ Dr_Rae

    Thanks Jon for the reminder… I’ve bookmarked this page to review our pages, and plan to get back with you as to how we use the top part of our pages.   ~Rae

  • jonbuscall

     @Dr_Rae Great! Glad to hear that was helpful. All the best.