Design

4 min read

Website Footer Design Best Practices

With UX design being at the forefront of every web app design, a well designed footer will not only be a well utilized tool by your users but also a key user retention technique.

Erin Ramcoomar

August 3, 2018 (last updated: May 14, 2019)

The purpose of a website footer is simple, it catches the user at the bottom of the page to direct their path for ongoing engagement. Whether in the form of contact information or navigation, it aims to provide a user with helpful and actionable information to keep them engaged.

There are two main website footer design aspects we will explore: the content and the aesthetics.

What Goes Into A Footer

A variety of different pieces of information that can go into a footer. Put yourself in your users’ shoes, what are they looking for when they visit your website? If you’re a blog, maybe they’re here to see the latest news. If you’re a store, maybe they’re looking to buy your product. If you’re a charity, maybe they’re looking to donate. Delve deep into their problem or goal, and provide the solution, yes, in the footer.

Here’s an overview of the 5 most common solutions utilized in the footer:

1. Contact Information or Contact Form

Many users visit your website just to contact you. You can provide them with:

Phone number(s)

Email

Address or link to map

2. Navigation

We often see navigation in the footer on business websites that offer multiple services or products. This not only helps visualize in a condensed form the content of the entire website but also allows users to quickly skip between desired resources. We typically see either or both:

Footer menu

Sitemap

3. Branding

Now more than ever, with consumers investing in the “why”, it’s become important for companies to establish a strong brand wherever it may be. On average it take six to eight touchpoints for a potential user or customer to remember and start to consider your company for their needs. To reaffirm your brand, we can use:

Logo, icon, or any other identity mark

Mission or value statement (which are also great for your site’s SEO)

Associations, memberships, awards, or achievements

A brief about section

4. Engagement

For brands, companies, or blogs, that are built on user interaction, engagement is key. The most common types of engagement efforts we now see are inbound marketing (think of free e-book giveaway, blog, newsletter subscriptions) and social media. We can expect to see a lot of:

Social media links

Email newsletter sign ups

Search functionality

Latest articles/blog posts/press releases

Call to action for the businesses’ offerings

Log in if it’s a user facilitated web app

5. Logistics

Last but not least, to ensure we comply with regulations and provide a safe and responsible experience for all users, we include:

Copyright

Privacy Policy

Terms of Use

Footer Design Basics

To start, we decide on the type of footer we will have. There are two options:

Regular Footer – Always at the bottom of any page when you scroll all the way down.

Sticky Footer – Always at the bottom of your screen no matter what point of the page you’re on, at the top, middle, or very bottom.

Quick Tip: Infinite Pages

Infinite pages are those that continuously load new content when you’re near the bottom of the page hence, it’s infinite, you never really hit the bottom of the page. It’s meant to keep users immersed in the content. Think news websites, blogs, or Instagram. These types of pages are best candidates for sticky footers or side menus.

Once you’ve sorted the type of footer you will have, decide on the content that goes in, and group it into two to four main categories which you can then make into columns. Appropriate information hierarchy will help structure the content and improve user experience. Give your categories a title for easy reference and easy navigation. Do not clutter the footer with too much information. Negative space provides a feeling of openness and clarity.

Lastly, there’s no set rules to footer colours schemes but do ensure you have the right contrast between the content and the background. Here’s a quick tool you can use to check the colour contrast readability. The content should be easy on the eyes, readable, and match the site’s theme.

With the right structure and a clean design, your footer is sure to capture the attention of many users, act as a guide, and prove to be an invaluable resource keeping your users satisfied.