Website Footer Design Best Practices: 27 Things to Put at the Bottom

Share This
Andy Crestodina
Share

Here’s an internet story that happens a million times a day.

Vivian visits a website…but she doesn’t see what she’s looking for… she scrolls down a bit… but she still doesn’t find it… scrolls a bit more… still not there… then she goes all the way down to the bottom of the page… and there it is, in the website footer. The link she was looking for!

All over the internet, website footers are saving the day, catching visitors like a safety net, before they hit the bottom of the page hard.

The purpose of a website footer is to help visitors by adding information and navigation options at the bottom of web pages.

Website footer design is about choosing what to include, with the intention of helping visitors and meeting business goals.

How Important Are Footers, Really?

These are important choices because footers are highly visible. A lot of visitors see them. A study by Chartbeat looked at 25 million website visits and found that visitors scroll down thousands of pixels. No page is too tall, no footer too far.

scroll-depth

If you’re curious about how far down visitors scroll on your website, there are paid tools that will show you the “scroll depth” on your site. Lucky Orange, Crazy Egg and ClickTale are a few examples.

27 Things That Can Go In Footers

How should you design your website footer? Here are 27 ideas and examples, starting with the most common content and features. Scroll down past this list to see our own guidelines and best practices for what to include in a footer design.

1. Copyright

If your footer had just one element, this might be it. The year and the copyright symbol. It’s a weak but easy protection against website plagiarism.

Pro Tip: A tiny bit of code will keep the year updated automatically.

2. Sitemap

This is the most common link found in footers which links to the HTML version of the sitemap. These links are rarely clicked by visitors, but like the XML sitemap, they may help search engines find things.

sitemap

3. Privacy Policy

This is the second most common element in footer design. It typically links to a page explaining what information the website collects, how it’s stored and how it might be used. For most websites, it’s about tracking (Analytics and remarketing), form submissions and email signups.

Need a privacy policy? Feel free to steal ours below! Or use this handy Free Privacy Policy Generator.


Privacy Policy

By accessing or using the Orbit Media Studios, Inc. website, you agree to the terms of this Online Privacy Policy, as outlined below. If you do not agree to these terms, please do not access or use this site.

Collection of Personal Information

When you engage in certain activities on this site, you may be asked to provide certain information about yourself by filling out and submitting an online form. It is completely optional for you to engage in these activities. If you elect to engage in these activities, however, you may be required to provide personal information, such as your name, mailing address, e-mail address, and other personal identifying information.

When you submit personal information, you understand and agree that Orbit may transfer, store, and process your information in any of the countries in which Orbit maintain offices, including without limitation, the United States.

Orbit collects this information in order to record and support your participation in the activities you select. Orbit also uses information that you provide as part of our effort to keep you informed about product upgrades, special offers, and other Orbit products and services. Orbit will never sell or share your information with other companies.


Disclaimer: This blog post isn’t legal advice. If you want to spend money on legal language that almost no one will ever read, contact an attorney.

4. Terms of Use

The “terms of use” are a bit different from privacy. They explain what the visitor agrees to by visiting the website. Like a disclaimer, they state that by using the site, the visitor agrees to certain things.

For websites in highly regulated industries, you may want to put the text right in the footer.

terms

If legal text is critical, adding it to your footer will make sure that you have maximum coverage. You’ve got the fine print on every page.

5. Contact

Visitors expect to find contact information in the top right of the header. It’s a web design standard. It’s also standard to find a “contact” link in the bottom right (or center) of the footer.

This should be a link to the contact page with a contact form, not an email link. There are lots of reasons to use a contact form, rather than an email link.

  1. The form submission is easy to track as a goal completion in Analytics.
  2. The visitor may not be on a computer that they use for email.
  3. Forms send visitors to thank you pages, which can provide more messaging and calls to action.
  4. Forms send visitors auto-response emails, again, more messaging and CTAs.
  5. Forms can save submissions into a database in case email doesn’t get through.
  6. Forms can connect to marketing automation and other systems.
  7. Forms can ask specific questions and route submissions to specific people, depending on the answers.
  8. Email links are spam magnets.

So leave that email link out of your footer! In fact, I don’t recommend putting an email link anywhere on your website.

contact

This website has great copywriting, but a contact would have been better than the email link.

6. Address and Link to Map / Directions

Place information is something that visitors expect to find in footers. It’s also a way to tell Google where you are, which is important for businesses with local customers. Linking to the map is a handy way to help visitors find you.

When programmed properly, this map link turns into a big fingertip-size button for mobile visitors, bringing up the map app on their phone or tablet.

directions

7. Phone and Fax numbers

Like the address, a phone number with a local area code is evidence to Google that you’re a local business. And like the map button, a phone number should automatically transform into a clickable button when viewed on a mobile device. Tap to dial!

phone

8. Navigation

Here’s where your footer can rescue falling visitors. If they’ve made it down this far, they must not have found what they were looking for. Time to offer some more options.

The last few years have seen a usability trend called the “fat footer,” which means adding more than just the standard items listed above, starting with navigation.

Footers now often contain the same links you’d find in a “mega-menu” dropdown in the header navigation. But this doesn’t necessarily save a visitor falling down your page. Remember, these are visitors who didn’t find what they were looking for above.

Here are a few sources of ideas for footer navigation:

You don’t have to just repeat your main navigation. You also shouldn’t just add your entire sitemap. This forces visitors to dig through a pile of links. How’s that helpful?

navigation

9. Social Icons

We love visitors from social networks. But we don’t love it when our visitors leave and go to Facebook, Twitter or YouTube. If they do… they ain’t coming back. That’s why our designers almost never put social media icons in website headers.

The footer is the best place to add icons that scoop visitors over to social networks. When we analyzed the top 50 marketing websites, we found that 72% included social media icons in the footer.

footer-design-social-graph

Here’s a good example from Rafal Tomal.

social

10. Social Media Widgets

Some footers go beyond the icon and use an actual social media widget. These show the latest post from a social media network, embedded right in the footer.

This makes sense only if you are active within that network and have solid editorial standards about what you’re sharing.

Caution: If you use such a widget in your footer, social media posts will appear on every page on your websites. Especially risky if you’ve got an intern running your social channels. Applebee’s famously learned this lesson the hard way.

11. Email Signup

The website footer has become a very common place to let visitors subscribe. Our website standards study found that 24% of top marketing sites have a signup box in the footer.

footer-design-signup-graph

True, email sign ups are more likely to occur on a page where the visitor got value, such as a helpful blog post, it’s still not a bad idea to let visitors subscribe from the footer.

Footer signup boxes should still follow email signup best practices, offering social proof (how many have signed up before?) and setting expectations (what with the subscriber receive? how often?).

A lonely little email address box with a submit button isn’t likely to convert very well, like this guy…

email-signup-footer

12. Login

Not all visitors are prospects. Some visitors may be employees, partners, affiliate or resellers. If there’s a login area for these people, the footer is the best place for it.

These people come back often and know where to find things. No need to use valuable marketing real estate in the header for them. A little login link in the footer is fine, like ATI does here.

login

13. Press

Another type of non-prospect is the press. Realistically, only a fraction of 1% of your visitors are journalists and editors. So don’t waste precious space in your main navigation with a press link.

If someone from the media does happen to visit, they’ll scroll down and find it.

14. Site Search Tool

If they didn’t find it in the header, in the content area or in any of the footer links, a site search tool is the ultimate safety net.

Search tools are not as common in website footers as email signup forms, so if you use one, make sure it is clearly labeled.

The Smalley Steel Ring website features a quick search tool for products, helping visitors jump right into the catalog from any page.

quick search

15. Images

If you really want to dress up your footer, add an image to it. Here’s a chance to add personality to the site.

The Mason-Dixon Knitting footer features a picture of Kay and Ann, the two founders.

about

16. Mini Gallery

Why not go for the full pedicure? Rather than one image, add an entire gallery.

Experimental Sound Studio has a gallery of photos in the footer. Clicking a photo brings up the image within a lightbox.

gallery

17. Branding

Images are another chance to reinforce the brand. This is a good place to use an alternate version of your mark or use your logo in a different way.

The Center for Humans and Nature website uses the original version of their logo in the footer, where the header contains a simple, legible text treatment of their name.

branding

18. Your Mission. Your Values

Logos are good. But why not tell visitors why you’re in business? The footer is an excellent place to plant your flag and tell ‘em what you stand for.

The Better Government Association website footer not only restates their mission but shows the impact they’ve made using numbers down the right side. It’s impossible to miss why or how they do what they do.

mission

19. Keywords for Search Engine Optimization

Text in the footer is text on every page. So it’s an excellent place to indicate your relevance to Google. If you do include your mission, your value statement or an “about us” blurb, use this as an opportunity to include your primary keyphrase.

Caution: Footer text for SEO has been abused by search optimizers for years. This is probably why Google doesn’t put a lot of weight behind SEO keywords in footers. So don’t overdo it. Just use the phrase once as text, not a link, and move on.

The footer of the Commission on Rehabilitation Counselor Certification website includes their code of ethics, which happens to include two of their most important keyphrases.

keywords

20. Awards and Certifications

These little logos instill confidence in visitors. They are a form of social proof and a powerful way to leverage the “Halo Effect.” If you’ve ever won an award, adding the logo for that award to your footer is a quick way to add credibility to every page of your site.

ProTip: Combine all of your awards, certifications and membership logos into a “trust box.”

Nitel has won many awards over the years. Gathering up those logos and putting them together in the footer of the website, helps build trust in a very competitive industry.

awards

Certifications also come with logos. Here are a few that often appear in footer designs.

  • Security certificates for ecommerce websites
  • BBB certificate for businesses with local audiences
  • Adwords certifications for digital marketing firms.
  • GSA certificates for companies that work with the government
  • MWBE certification for minority and women-owned enterprises
  • B-Corp certification for socially and environmentally conscious businesses

21. Association Memberships

Membership has privileges. One of those might be a logo that can be used in a footer. Chambers of commerce, industry associations and even online directories can provide logos that look good in a footer.

Cookies By Design shows their associations in the lower right corner of their footer.

memberships

22. Testimonials

It’s never a bad time to let your happy customers say a few words. Including testimonials in footers is a good way to add social proof throughout the site. Here are a few guidelines for using testimonials:

  • The best testimonials support the specific marketing claims of the page they’re on, so they’re not added generically to the footer on every page.
  • The worst place to put testimonials is on a testimonials page. Check your Analytics, visitors just aren’t visiting that page.

The Jody Michael Coaching website includes a testimonial at the bottom of every single page. It’s right above the footer, allowing for a different testimonial on each page.

testimonials

23. Latest Articles

If you’re active in content marketing, you can give your site a “pulse” but having your latest content pushed directly in your footer.

Solar Fuels Institute does this on their website, along with the social widget.

content

Or you may want to control which articles are featured in the footer. Then you can select those that answer common questions for visitors, or those that convert visitors into newsletter subscribers at the highest rates.

24. Upcoming Events

If you run a lot of events, the footer is a good place to promote them, since anything in the footer is likely to be seen. But don’t add this unless you always have an upcoming event, or you’ll have a hole in your safety net.

25. Video: Your Welcome Message

Text is overpowered by images. Images are overpowered by video. As a general rule, video is the most compelling format for content. So if you really want to go all out in your footer, add a video.

The Marie Forleo website takes full advantage of video, include a video enhanced footer.

video

26. Audio: Your Jingle

It’s rare but possible to add an audio file to a footer. If anything it would likely be a clip that you’re repurposing from somewhere else, such as a radio spot.

The Food For Life website embeds a little audio player with their jingle into their footer. Charming!

jingle

27. One… Final… Call-to-Action

Every marketing page should have a call to action. So adding one to your footer is a way to make sure it appears everywhere. You should never leave visitors wondering how to take that desired action.

The Writers Theater website follows best practices for nonprofits by adding a prominent “Donate” button to the footer.

calltoaction

More Footer Design Ideas

Here’s a bit more inspiration for designing your next website footer.

Footer Color Schemes

Notice how many of the examples above show light text on a dark background. Reversing the colors is a good way to let visitors know that they’re at the bottom, and it’s the beginning of the end of the page.

ProTip: Caution reversing the color scheme (from dark text on a light background to light text on dark) in the content area of a page. Doing so may create a “false bottom,” causing visitors to believe they’ve hit the footer, and possibly missing the rest of the page.

Sticky footer

In the same way that navigation can “stick” to the top of the page, regardless of how far down the visitor scrolls, footers can stick on the bottom. It’s always there, no matter the scroll depth.

Our friends at Conversion Sciences use a sticky footer that is always visible on every page.

sticky

Want your own sticky footer? Using WordPress? Here’s a plugin that create sticky footers.

The Infinite Page… No Footer At All!

Every website has a footer, right? Actually, some news and media sites don’t have footers,  because there is no bottom to the page! The pages just go on forever.

The “infinite page” approach to web design just loads the next piece of content as the visitor scrolls down. Look at the Quartz website or ESPN for examples. These sites never end.

What Should You Include In Your Footer Design? Our Guidelines For What To Include In Your Footer

It all depends on the goals of your site and the needs of your visitors. Are you a big ecommerce site? Lots of links may be useful. Is customer service busy? Add that info down there.

Ask yourself: Do visitors have an important question that isn’t answered in the header? If so, add it to the footer.

kurt-circle
Expert Insight: Kurt Cruse

“This pretty much all boils down to using this valuable real estate to serve your sites goals. Be purposeful. Be helpful. Be mindful. Put yourself in the user’s shoes and then make sure it’s well organized. Give ‘em what they need but don’t overwhelm them.”

 

So there are your 27 footer design ideas. But please don’t use them all or you’ll have the fattest fat footer of all time. Think about your visitor and what might catch them before they hit the bottom of the page!

Special thanks to Kurt and Ben for their help researching this article! If you can think of anything we missed, let us know with a comment below.

Share This

What are your thoughts?

Comments (31)
  • In helping the nonprofit I volunteer with I was trying to explain why we should be putting things, like social media buttons and useful nav links, in our footer. This article will help me make my case – thanks.

    • I’m glad if this helps you make the case, Janice. Sometimes, knowing what to do is easier than knowing how to explain it to someone else!

  • Another useful post Andy. This list should be incorporated into every marketer’s toolbox. I agree that you need to check what additions do to your site load speed. Happy marketing, Heidi Cohen

  • Andy, you are the best. And you always give me more to think about and do! I doubt I’ll ever be able to retire until you do.

  • All good tips-takeaways Andy, I enjoyed hearing you speak at the Presidents Forum Meeting !

  • Hello Andy,

    What a great post, thank you! I have already implemented many of your suggestions, but this list will definitely be useful to my clients.

    A little bit of creativity always goes a long way, doesn’t it? 😉

  • Such a thorough list, and great. Thanks!

  • Infinite pages! I cannot tell you how many times I’ve scrolled to the footer in order to find one of these (very helpful) things in the footer and just never, ever, gotten there.

  • The author makes it very clear why footers are important on a website. The tips mentioned about designing the footers will be of great help in driving the attention of web users.

  • If you put Tesimonials in the Footer, will this not be a huge amount of duplicate content?

  • Once again, this was an amazing post, Andy. However, I don’t really agree with having testimonials in the footer for web design, as I feel that testimonials should be on it’s own dedicated page, or only on pages where trust has to be built with customers.

  • Great tips. I have a couple on your list, but have to get more up. Thanks for sharing.

  • Thanks Andy. Great info.

  • Excellent suggestions and thought for the footer as not just copy and paste the header makes so much sense! Navigation, getting the user what they want quick, easy, complete. The footer has a big role in showcasing the grab and go, drill down into a FAQ topic. Thank you!

  • Has anyone seen a company’s Mobile apps in the footer? It feels like a good place to advertise them and was curious if anyone had some examples. Thanks.

    • Hey, John!

      Thanks for dropping by our blog. If you go to Uber’s website, they have their app download options in their footer. Is that what you were thinking?

      • Thanks for the response Amanda. It’s somewhat what I was looking for. More so brands that have multiple apps instead of just one.

        • Got it! I would be curious to see that as well. Please share if you find a good example.

  • This is invaluable information for anyone starting their own business and designing their own website. Thank you so much. I feel empowered!

  • I didn’t see any mention of the persistent footer bar nor did you explain different ways to handle content linked from the footer. For example, a panel with a map is a nice touch to slide up from the fixed footer without causing you to refresh the page or change the content. There are numerous kinds of footer content that should be viewable without changing the focus of your page. Furthermore, footer content that is persistent should be site-specific not topic or section specific (for the most part). Site-level content such as address, copyright, social media, legal statements, sitemap are all excellent footer content that should not steal you away from your main focus. One obvious exception would be the use of previous and next content buttons as well as breadcrumbs (though I still don’t think they work very well in a footer). Also when adding a fixed persistent site-level footer bar, it is nice to have the standard extended footer appended to the bottom of the scrolled page that still sticks to the bottom of the page. In other words, the only time the footer content is visible (besides the footer bar) is when you scroll down to the bottom of the page (in my opinion mistakenly called a sticky footer by some)

    • I am so sorry, I meant first to thank you for the excellent and thorough article on footers. I apologize if I sounded ungrateful, I found your information exceptionally useful in clarifying my focus on footer designs. Thank you.

  • Great article, thanks for sharing. I have used some of these tips for my footer and looks great 🙂

  • Hey, great article, some really interesting ideas mentioned above.
    I carried on my research and I found an article similar to this one, but translated in french. I’m bilingual, so when I read it I realised that the article is more or less an exact copy of this one.

    As one of your first elements in the article is about Plagiarism, I thought you would want to know.

    Here is the link to said article.
    https://www.generation-net.org/fr/blog/idees-pour-footer-votre-site-internet.html

  • What are your thoughts on having the contact form in your footer versus a link to the contact form page?

  • Great article and I LOVE that you are a B Corp!

  • Great article. Lots of tips. Many times I never make it to the footer as the content of an article doesn’t engage me. Yours did…thank you for this. I enjoyed the read, and have tools to add to my toolbox.

  • I Ctrl End just to click the up button again and again. Pretty good stuff you got here.

  • 27 things? You don’t have 27 things in your footer, even counting all social links, etc … next!

  • loved this article, very thoughtful and engaging

  • Your article was very helpful
    I will try to keep the listed items in the website design from now on

  • Good example of every web design that create more unique ideas and thank you for sharing your thoughts and hope to read more. Keep up the good works!

 
Join over 16,000 people who receive bi-weekly web marketing tips.
Share This