How to create an effective website header and footer

alli-blog

Hi, I'm Alli.

I help passionate entrepreneurs, like you, create a strategic brand and website that stands out to your dream clients so you can run a successful business online.

My ultimate goal is to empower you with the tools you need to live your best life by doing the work your love.

The first thing your dream client sees when at the top of your website is the header and the last thing they see is the footer, so they need to be set up strategically to make your website work.

The first thing your dream client sees when at the top of your website is the header and the last thing they see is the footer, so they need to be set up strategically to make your website work.

You may be thinking, yeah, headers and footers are just places to put your navigation and maybe your social media links. But the truth is, you may be missing a serious opportunity by not strategically using areas and that’s no good!

Your Header

Your header the first thing someone sees on your website. And because it will be repeated on every page, it should clearly and consistently showcase your brand logo as well as your brand’s personality through color and typography.

Your header should also house your primary navigation.

I recommend keeping your navigation to less than five links if possible. Think about it, every menu item you remove makes the remaining links stand out more, right?

With fewer links your viewer will be less overwhelmed and more likely to find what they’re looking for and click on it.

Psychology shows that things that appear first and last get the most attention. So use that information and put your most important links in the first and last position.

Another great thing to do in your header is to reinforce what you want your dream client to do next in the form of a call to action.

So, think about the most important goal of your website. If you want them to call you, add your phone number. If it’s to have them email you, be sure to include your email address. Maybe the goal is to have them download your freebie so you can grow your email list or to have them schedule a one-on-one consultation. If that’s the case then you could add a button.

What about how your header behaves? Traditional, transparent, sticky…what are all of these options.

Traditional header
A traditional header scrolls off the page as you scroll down the page

Transparent header
A transparent header has no background behind it so overlays the hero banner below or it can be a semi-transparent header

Sticky header
A sticky header is one that fixes to the top of the browser window as you scroll down the page. There are partially sticky headers as well, where the top row call to action stays in view as you scroll down the page, but the navigation doesn’t stick for example.

Combination header
Then there are header options that combine behavior, for example a transparent navigation with a sticky call to action on the right.

Your Footer

The footer is also really important because it’s the final thing you’re going to say to your viewer.
If your dream client has scrolled to the bottom of your website it usually means that they’re interested in what you’ve got to offer or learning more about how you can help them.

Also, your eyes naturally stop and take a break when you get to the bottom of a page, so the footer shouldn’t be discounted when it comes to designing your site.

You can show your call to action again, repeat some of your most important navigation links, give your viewer another way to follow you such as social media or your Facebook group or invite them to get your freebie.

Always be consistent

What’s most important is that your header and footer are consistent on every page of your site. The one exception to this rule is landing pages, like an email opt-in landing page or a sales page, for example. It’s best not to show your header and footer on these pages because giving your viewer options to do anything else besides sign up for your offer is not the goal of these pages.

Now that you know how to get your headers and footers looking good and working well, you may be wondering what else you can improve on your site. Learn 5 Ways to Refresh Your Website here.

Are you more of a visual learner?

Here’s a video version of this post.

Free Conversion-Driven website planner

Turn website visitors into paying clients with this FREE guide!

Tired of your website just sitting there? It could be your BEST salesperson, converting visitors into leads and clients. Our free website planner will help you create a strategic website that magnetizes your dream clients and gets results.

DWDS website graphics
DWDS website graphics