How to Build an Awesome Website Footer

By / Mar 4, 2014 / Tips
shares

Let me be the one to say it – building a footer is one of those “by the way” kind of tasks for many designers. It seems easy. It seems negligible. It seems like it can be left to chance. And there is some strong reasoning behind such a point of view.

For once, footers are seen by a much lower percentage of people than, say, the stuff above the fold. Also, they rarely do anything else other than repeat the info that can already be found elsewhere on the site. And finally, footer links have the lowest click through rates (CTR) of all links. So why bother?

Footers and CTR

Well, the fact about the low CTR may be true, but it doesn’t present the whole picture. The low CTR is mainly a result of the fact that few people see the footer in the first place.

So I have a theory of my own about this.

Although, apparently, there’s no study done on the topic (at least I wasn’t able to find it; feel free to chip in if you have some data), I believe that the CTR is actually quite high for footers if we only count the people who have scrolled all the way down on the page.

I did some quick number crunching with my CrazyEgg account to examine this more closely. When I compare the estimated number of people who see my footer (through the scroll map tool) and the total number of clicks my footer generates, I can see that between 14 percent and 20 percent of people end up clicking on something once they see the footer (depending on the page tested).

Of course, this is just a very simple test with a rather small heap of data, so it’s difficult to draw any reliable conclusions. Also, my footer is huge. It takes around 55-60 percent of the screen, so it’s hard to resist clicking on something. Anyway, even despite the shortcomings, the results are still very interesting.

So the lesson is simple…

Footers matter.

And here’s what you can do to make your footer properly awesome.

1. Don’t treat it as an SEO dumpster

Some people still try to inflate their rankings by using keyword links in the footer. And I know that doing so is hard to resist. It’s just too easy, and the links don’t even look out of place. But this really should be avoided in 2014. Mainly because it isn’t much of a challenge for Google to recognize the footer and give the links a low SEO value.

The whole practice is just so 2008 – or even worse.

Actually, it was 2008 when Rand Fishkin already talked about this being not effective.

2. Introduce hierarchy

There are always some elements that are more important than others, and you should reinforce this idea through alignment, scale, and placement within your footer.

For instance, if you go to Smart Passive Income, you’ll see that getting you to opt in is the most important goal for Pat – the owner. The footer for every page on the site starts with a big subscription box.

How to Build a Properly Awesome Website Footer

Then, additional links and disclosures follow.

Try adopting the same idea. Start with what’s important and then continue with everything else.

3. Try one last time to get a conversion

Speaking of opt-ins, these days, getting someone to opt in is one of the most popular website goals, and site owners are willing to do almost anything it takes to raise their conversion rates.

Hard to blame them for that, to be honest.

The footer is the last chance to get a conversion. And that’s regardless of what the conversion represents in your individual case. Take advantage of that chance, you owe it to your site’s main goal.

For example, here’s the footer at Codeinwp.com – a company providing PSD-to-WordPress services that I’m part of. The footer is huge and it has one main goal – to convince people to submit their designs and have them turned into a working WordPress theme.

How to Build a Properly Awesome Website Footer

4. Use white space

White space is so underrated right now. Actually, it’s been underrated since ever. When in fact, there’s no other easier way to give your footer some additional emphasis and make the links pop more.

We don’t have to go far for examples – just scroll down to see the footer here at WDL.

How to Build a Properly Awesome Website Footer

5. Experiment with “about the author” blocks

If you’re designing a single author site/blog then it’s often a good idea to use the available space to present a nice “about the author” block.

Now, the goal here isn’t increasing the CTR. People rarely click on author blocks (at least in my tests), but it does introduce a personal touch and makes it clear who the author is no matter what page is viewed at the moment.

Here’s a great example from Leaving Work Behind:

How to Build a Properly Awesome Website Footer

6. Don’t forget about the must-have links

It’s really hard to imagine a footer without some of the following links:

  • About
  • Contact
  • Home
  • Blog (if there is one)

The reason why they’re essential is simple. Over the years, people have gotten used to seeing those pages in footers. It’s become a convention, and breaking it rarely pays off.

A good way to go about this when picking the things to mention in your footer is to ask yourself the following:

Will my audience expect to see this link in the footer?

7. Display social media links

Here are two of the most popular approaches to social media vs. footers:

  • Use default buttons. For example, to get a Facebook Like button, go to this section in the developers area. They tend to be effective because of their official nature – people are very familiar with them and know exactly what to do when they see one.
  • Use some custom buttons. They may not have the same CTR, but you don’t always want to click-optimize these buttons, especially if you attempt to show more than a handful of them. Take a look at TechCrunch, to get an idea:

How to Build a Properly Awesome Website Footer

8. Consider using a sub-footer

Your sub-footer is the part that comes after your main footer area. It’s most commonly used to display various legal links or other things that you don’t necessarily want people to click on, but they do regulate and disclose some of your operations.

I’m talking about things like privacy policy, terms, earnings disclosure, copyright clause, DMCA, etc.

Example from SugarSync.com:

How to Build a Properly Awesome Website Footer

9. Showcase social proof, badges, and safety seals

Depending on the kind of business that the site you’re working on is in, displaying some additional social proof can work well for the site’s overall credibility.

Let’s take another look at Pat Flynn’s site to get an example (this time it’s the homepage):

How to Build a Properly Awesome Website Footer

These company logos are not clickable, plus the contrast is very low. But you don’t really need more. The logos are there to provide social proof, not to catch too much attention.

10. Link to your best content

This is something that can work well on blogs and online publishing sites in general; not so much on business sites or product sites.

The main idea is that popular content is usually popular for a reason, so showcasing it in the footer can improve the readership numbers even further.

It’s a simple rule – it’s much easier to grow the popularity of something that’s already popular, than to build the popularity of something that’s not.

An example by newInternetOrder.com:

How to Build a Properly Awesome Website Footer

11. Be careful about turning your footer into “master navigation”

This goes back to the first item on this very list – treating your footer as an SEO dumpster.

Footers should be neither an SEO dumpster, nor a master navigation.

You really shouldn’t try cramping all the links you have in the footer. This will not have a good effect on your readers.

A lot better approach is to create a custom archives page and then link to it from the footer. That way, you still have a readable and clear footer, and if someone wants to find a specific resource, they can do so via the archives.

What’s wrong with your footer, my friend?

To be honest with you, when gathering the data for this post and then writing it, I found at least a handful of things wrong with the footers I use on my sites. So my question is simple: What’s wrong with your footer? And more importantly, what will you do to fix it?

About the Author

Karol K. is a freelance blogger and writer. He's passionate about design, blogging and online business. If you want to get a list of websites that pay to write feel free to visit him at YoungPrePro.

14 Comments

  1. Chris
    March 4, 2014

    Really nice article. A footer is a really important website feature and deserves more care and attention than it usually gets!

    Reply
    • Karol
      March 6, 2014

      I guess the reason why it doesn’t get enough attention is because we’re simply tired after designing the rest of the page, so the footer just sits there looking like a necessary evil. :)

      Reply
      • Michael Meininger
        March 6, 2014

        ^ +1

        Reply
  2. Isadora Design
    March 5, 2014

    Really great points made here – especially regarding SEO. I like the suggestions made for things to include in a footer. I, personally, only use the footer to navigate on larger websites. It’s where I find a more effective site map via navigation links and contact information. And I get frustrated when I can’t find what I’m looking for in there as well.

    Cassandra
    Isadora Design – Handcrafted Web Design Company

    Reply
    • Karol
      March 6, 2014

      That is right, but the situation isn’t that much applicable to smaller sites that don’t have hundreds of pages and individual categories. I’d say that most of the time we simply don’t need anything fancy.

      Reply
  3. Pragmatic Design
    March 6, 2014

    We’ve found that visitors often head straight for the footer to pick up contact information – even missing the big phone number at the top right of the page. We noticed this when we began to get phone calls intended for one of our customers. On their site, our name and phone number were in tiny text at the very bottom! Further experimentation confirmed this on other sites.

    Of course, somebody picking up the phone won’t improve your click through rates – but it’s much more important!

    Reply
    • Karol
      April 12, 2014

      This is a very interesting insight. It turns out that people just expect to see this kind of info in the footer. So it’s in our best interest to put it there.

      Reply
  4. Bianca Board
    March 6, 2014

    Out of all those, I liked the one from “leaving work behind”. Your right, the footer can often be overlooked and I think this article really brought to my attention that it derserves its own special attention. Great through provoking article. 5 stars!

    Reply
  5. Gavin
    March 7, 2014

    Nice Tutorial, I think I should write a post about beautiful footers in web design as well.

    Reply
  6. Franco Musso
    March 9, 2014

    A really great read, thanks for sharing. I got some great ideas that I certainly wouldn’t have thought of otherwise. Jus the perfect header, sidebar and content area to go!….

    Reply
  7. Arianna
    March 10, 2014

    Very nice tutorial. I think I should also write a post on website footer. I will keep these all points in mind to create a beautiful and impressive website footer design.

    Thanks
    http://www.61Designstreet.com

    Reply
  8. Tom Nguyen
    March 10, 2014

    These are some great ideas for a footer! I will definitely use them in the redesign of my website and client projects.

    Reply
  9. Michael Nelson
    March 14, 2014

    Good article. I was just working on a website today when I thought I should do something more than the same old scheme. I’ve seen some really nice ones before and some great examples here. I think I’ll start showing the footer a bit more respect!

    Reply
    • Karol
      April 12, 2014

      A nice hack you can use is to work on the footer somewhere around the middle of the whole design process. If you leave the footer for the last minute then you will be naturally tempted to create the simplest thing possible and just be done with it.

      Reply

Leave a Reply