Hi! We really should talk!

We'd love to introduce you to Readz, the publishing platform used by IBM, Nike, Deloitte, Aon and many more.

Hop on the phone with one of our publishing consultants and get customized advice on how to get started.

MADE WITH

READZ

TRY IT FREE

How to design a footer optimized for UX and conversions

Start publishing online content like Deloitte, IBM, and Nike.

Get a demo of Readz today - and never look back.

GET A DEMO

When you associate your website’s footer only with the obligatory fine print, copyright, privacy policy, or imprint, you could miss out on UX improvements and increased conversions. We’ll go over best practices for website footer design and showcase outstanding example

A footer is the content area at the bottom of a website which typically remains the same across all pages. You can include useful links and information such as a sitemap, social media icons, navigational links, contact details, and even a sign-up form or another call to action.

What Is A Website Footer?

When you scroll to the bottom of a web page, you’ll see an example of a website footer. But what exactly is it? The term derives from print design to denote a design element that appears consistently at the bottom of all pages, for example in a book or a magazine.

Website footers can be more complex thanks to links and expandable menus to include interactive elements. There's no one singular approach to designing a footer. But if a website visitor has arrived at the footer without engaging with the content above, the footer should offer sufficient use so they don't leave your site.

Footer Definition

A website footer is an area at the bottom of every page. It’s a section of consistent content distinct from the main body of the current page. Common footer elements are a logo, an imprint or company information, links to legal notices such as copyright or privacy disclaimers, a sitemap, contact details, social media icons, a sign-up form, login link, or a call to action.

A footer is a clear signal to visitors that they have arrived at the end of a page. It can help users when they’re lost and can impact user experience. Exceptions to consistent footers are contextual footers with adaptive content, and pages with infinite scrolling.

Footer Purpose

In design terms, the purpose of a footer is to round out your website design: it is the counterpart to the header or top navigation bar of the page. It can frame the main content of the page and offers options for interaction without the need to scroll back up.

The footer should neither only replicate the site’s menu or navigation, nor should you dump all the information that has no place elsewhere in the footer. Put usability above playful design and offer footer content visitors expect. The purpose of a footer is to guide visitors and provide useful information, hold attention and emphasize your content, and win leads or generate conversions.

Footer Use Cases

There are two basic use cases for footers on a website. Both assume a standard footer that is consistent across pages, easy to reach, and intuitive or predictable.

1. A website visitor intentionally seeks out the footer. Their expectation can be certain information, links to social media profiles or related content, or navigational elements.

2. A website visitor arrives at the bottom of a page after reading or scanning the content, and not following a link or engaging with the page otherwise. They might not have found what they’re looking for, or require more information. Before these users bounce, you can still retain them with navigational options in the footer or convert them with a call to action.

Footer Information: What Content Elements Do You Put Into A Footer?

The content in the footer of your website depends on your business or publication, but let’s look at common and recommended elements:

Utility links: For legal protection, most websites need to include Copyright, Privacy Policy, and Terms of Use. Linking these from your footer ensures they’re never more than one click away.
Navigation: The so-called ‘doormat’ navigation repeats elements from the global navigation, making them the first and last things a visitor sees (like a doormat). Secondary links can include a staff or jobs page, affiliates, investors, product information, or press pages.
Sitemap: Visitors use the sitemap to gain an overview of your website or navigate in their own way.
Contact information: Depending on your company, business, or publication, means of contacting you can include social media icons, customer service chat, email, phone, or mailing address.
Branding: Highlighting brand and personality builds trust and identity. You could include your logo, a gallery, awards, testimonials, featured content, or events.
Call To Action: A footer CTA can be a sign-up or sign-in request, subscription options, or a featured product, promotion, or landing page link.

Footer Design and Mobile Footer Design

Consistency, usability, and fulfilling expectations with your website footer are important for delivering a good user experience. Now that we’ve gone over footer elements, let’s look at organizing the information and presenting it. Keep these principles in mind:

Keep the footer consistent. This goes for the theme of your website, and the footer’s content. A contextual footer is rare but might apply on sites with varying user roles, for example.
Avoid ambiguous terms or expressions: don’t label your contact page as “help”.
If you have to present a lot of information, see if you can group items into logical groups.
When in doubt, uphold the design principles of simplicity and readability over aesthetics.
Check all footer links to avoid misleading users or broken links.
If you have pages with infinite scrolling, users will never arrive at the footer. Designers still make the mistake of putting crucial information in a footer that remains forever out of reach.
The wider you design your footer, the more problems you’ll create for your responsive or mobile design (see also below). Avoid long scroll times for your footer.
Consider opening external footer links in a new browser tab to not lead users away from your website when they interact with the footer.
Don’t just replicate the main navigation of your page in your footer. There are rare exceptions, such as pages with extensive menus.

Mobile Design

Heatmap comparisons between horizontal, desktop websites and vertical, mobile websites show that users reach the footer of mobile websites far more often. Two major factors contribute to this. The narrow, vertical layout on a mobile device encourages scrolling. Users associate the downward scroll with loading more content because the infinite streams of social media apps have conditioned them that way. On touch screens, scrolling via swiping is also a much faster process.

The vertical layout on mobile devices requires a footer design that stacks elements on top of another instead of arranging them horizontally. This might tempt you to place the least important information at the end, but consider the behavior described above: frantic swiping will lead visitors quickly to the end of the page, and they’ll see the bottom of your footer first. From there, they’ll scroll upwards again until they find the information or element they’re looking for in the footer.

You should consider the following when designing your mobile website footer:

Navigation: Enable access to the navigational menu from the footer or provide quick links, so users don’t have to scroll all the way up again if they want to navigate away.
Additional Information: Keep in mind users ‘fast-forward’ to the footer if they can’t find the needed information elsewhere. On mobile, they might expect a contact form, subscriptions, job openings, a login area or links in the footer.
Conversion: Decide if a strong call to action or ‘soft sells’ such as additional content promotions, social, media, and search work best for your lead generation and conversion plans.
User Experience: note the reverse-scrolling effect described above and give users a clear sign where the main body ends and the footer begins. Don’t waste space and use design elements such as font size and colors to establish a hierarchy of information in your footer.

Footer UX: Best Practices

Next up, best practices of footer design to deliver a great user experience and optimize conversions on your website.

Keep the footer simple

A single-track mind is best for designing a simple footer. Declutter where you can, don’t overwhelm visitors with too many links and don’t spread scattered ideas in a footer that’s too wide. By no means should you engage in old-school, black-hat SEO tactics such as keyword or link stuffing, or hidden elements.

CTA

Determine a prime and universal Call To Action for your future, then highlight it in a prominent location in your footer. Visitors should notice the CTA first when they reach the footer. Don’t send mixed messages and limit yourself to a maximum of two CTAs in the footer.

Footer goals

Conversions or lead generation are your primary goals for your footer, but after the most important CTA, what else do you want to deliver to visitors? Great user experience!

What do users need when they reach the footer, what are they looking for? Conduct user research if you need to answer these questions.

Grouping items

Once you know your footer goals and have decided on a CTA, group all footer items logically. Similar items go together: social media links, utility links, and navigational links, for example. But you can segment more than one way, especially when you have a lot of content or links.

Arrange items according to various customer journeys and have categories of links that differentiate between needs or paths, such as general support, products, and service, as an example. That way, your visitors can sort themselves into the segment that fits them best.

Contact

For many visitors, how to contact you is the most sought-after element in your footer. Consider therefore an individual contact form as part of your footer instead of just a link. In terms of conversion, a chatbot or even live chat can yield significant results when potential customers can have instant answers to their questions.

Branding

For branding, you decide what helps your image best. This can be a human touch, showing a team member or satisfied customer to create empathy; or you build trust with testimonials, awards, or certificates. Press or review quotes can make a welcome footer addition where appropriate.

Consider Other Options

A standard footer is not for everyone, so consider other options or measures. A bottom bar or floating footer remains at the bottom of the visible page, no matter if the user has scrolled down or not. You can use these for conversion with a CTA or sign-up form, or as a mini footer with navigational links on a page with infinite scrolling.

A contextual footer has dynamic content, depending on which page the visitor has landed. The items in a contextual footer can be task-based and alter with a user’s status: logged in or out, subscribed or not, for example.

Examples of great footer design

New York Times

The New York Times is a perfect example of how the footer has evolved from print to web design. The content-heavy website delivers a mini sitemap in the footer for quick and easy navigation of categories and topics and includes CTAs such as a subscribe button or social media.

Furrion

The global technology company Furrion features a sleek, yet simple footer on their website with a clear informational hierarchy. Crucial elements include logo and socials on the left, the two categories “Support” and “Furrion”, as well as a CTA and utility links at the bottom.

Clade Design

Clade Design uses innovative, playful design, and still, clearly show where their website footer begins. The simple design has a minimal number of links, a CTA Button on the left, and a social media block.

Lifehacker

Lifehacker offers a wide range of content. The website’s footer keeps the newsletter CTA just above and highlights first social media, then essential navigational links and utility links, before giving options to explore the site.

Stacksocial

The Stacksocial footer highlights their offer with a CTA on the left, then offers user-specific content in the section “My Account” as well as support links. An icon in the lower right corner builds trust.

Mozilla

The Mozilla website has a footer with a stark color contrast that illustrates where the main body ends. Anyone who’s scrolled down so far can pick the site’s language and choose from essential and utility links to navigate.

L'Oreal

Instead of relying on infinite scrolling, the L'Oreal website offers a button to “Load More” and features a clear dividing line and color contrast for the footer. Visitors can explore the company's brands, connect on social media, navigate with utility links, or interact with the CTA to sign up for the newsletter.

Designies

Designies features a visually engaging website. The footer plays with the clear boundary between the main body and the footer and offers two CTAs, a major and a minor one. Inline links support the main navigation to different parts of the site. They leave no visitor hanging.