Tips and tricks to help you
Grow your business online
Are you more of a visual learner?
Here's a video version of this post.
How to create an effective website header and footer
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 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.
A traditional header scrolls off the page as you scroll down the page
A transparent header has no background behind it so overlays the hero banner below or it can be a semi-transparent 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.
Then there are header options that combine behavior, for example a transparent navigation with a sticky call to action on the right.
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.
Hi, I'm Alli McAuley.
I help passionate entrepreneurs, like you, create a standout brand and website so you can run a successful business online.
My ultimate goal?
To make change happen for other go-getters in pursuit of living their dream life by doing what they love.