Making Websites

Website Footer Best Practices 5 top design tips!

Inka WibowoRobert Brandl

By Inka & Robert

website footer best practices

If you’ve been neglecting your website footer, believing it’s the least valuable section of your site, these findings may change your mind.

  • When User Testing tweaked their footer, adding a list of business and customer-matched goals, their conversion increased by 50%.
  • When Smart Insights tested a new footer design for a luxury handbag’s website, sales conversions grew by 23.77% and revenue per visitor increased by 15.99%.
  • Looking at data from 1 million anonymous online users on 10 websites, Chartbeat found that visitors spent over half (66%) of their “engaged time” below the fold. This refers to the lower section of the page, below the part that users immediately see when they open a site.
  • Compared to desktop visitors, mobile users scroll further down a page and are more likely to interact with the footer.

Why Your Website Footer Matters

Far from being an unnecessary structural element on your web page, footers actually serve up multiple benefits to your visitors and your business and are important element to include when you’re creating a website.

Benefits to Website Visitors

  • Footers help them find the information they need: There are at least two reasons readers will reach the bottom of your web page: They liked your content and want to browse more, or they’re looking for something they can’t find on your header menus. For those who are interested in your company, you can use footers to lead them to other interesting content on your site. You can include links to pages not featured on your header menu, such as partnership and affiliate opportunities.
  • It saves them from going back to the header: If your web visitors get hooked on your content and want to know more, they don’t need to go back to the top of your page. Right after your content is a footer where they can find your contact details, subscribe to your newsletter, follow you on social media, or explore your other products.

Benefits to Website Owners

  • It reduces your bounce rate: By leading your visitors to other useful links, they are more likely to open other pages and stay on your site longer. This reduces your bounce rate, or the number of people who view just one page of your site. This is especially important for retail businesses who want their visitors to keep “shopping around” the page.
  • It allows you to build credibility: Some companies take to the footer to display their accreditation, client logos, or popular sites that featured them to prove their competence. Meanwhile, copyright symbols and links to legal details and privacy policies help build trust in your brand. All these help influence your potential clients’ decision to make an inquiry and eventually, a purchase.
  • It helps boost conversion: When first-time visitors land on your page, they may see your social media links on the upper corner. But at this point in their buyer’s journey, they may not feel compelled to follow you online. As your content piques their curiosity – and maybe they see your certifications and client logos in your footer, they may feel more inclined to join your subscribers. By putting a sign-up or contact form on the footer, you make it convenient for visitors to convert into subscribers or possibly clients.
  • It is an added business promotion opportunity: When it comes to using the footer to draw attention to your company, the possibilities are endless. Aside from social media accounts and sign-up forms, you can include press releases, office locations, and your latest offers.

Website footer example You can even place links to your other businesses or your apps, as Goodreads does.

What to Prioritize in Your Page Footer

Given the benefits a well-planned footer delivers, you want to make this precious space count.

Ultimately, what you prioritize in your site’s footer design is up to you. But here are some elements you may want to incorporate.

1. Company Logo

Your logo represents your business, and you want readers to be able to remember it and identify it with your name and the value you deliver. Using your logo in your footer helps visitors remember your company and associate it with your content and services, thus improving brand recognition.

2. Contact Information

Placing your physical address and phone numbers at the bottom of your page proves that you are a legitimate business, building trust in your company. Moreover, this makes it easy for prospective clients to reach out to you for inquiries, saving them the trouble of going back to your main menu or digging deeper into your site for contact details.

Here are a few more tips when including your contact details:

  • Physical address – If you want people to easily locate your physical store, consider adding a map. Alternatively, make the address clickable so it opens a map on another tab.
  • Multiple branches – If you have multiple locations, you can place contact details for each site. If this is not feasible, insert an anchor text that opens to a page with a list of all your branches.
  • Call button – By being one click away, you make it easier for clients to contact you.

Copyright

This protects your content from website plagiarism. It sends a strong signal that you will take legal steps if someone takes credit for texts, images, or videos you published. While copyright requirements vary across countries, at the very least, be sure to include the © symbol, publication year, and the name of the copyright owner.

Privacy Policy

Complying with this legal requirement helps you establish trust among your readers by keeping data collection transparent. Your privacy policy explains to visitors what personal information you collect, how these are stored and used, clear options for opting in or out, and third-party service providers that may also be using these data.

Check out your business locations’ privacy policies, such as the General Data Protection Regulation (GDPR) if you have clients in the European Union. If your business uses third-party service providers, such as for payment processing, check out their requirements as well.

WebMD website footer example WebMD’s page footer, for instance, positions their Privacy Policy in a column with other important guidelines. They also display a TRUSTe seal, ensuring users that they are taking privacy practices seriously.

Terms of Use

Providing a link to your terms of use page (also referred to as “terms and conditions” or “terms of service”) is not a legal requirement. However, it provides website owners protection from liability and, by outlining the users’ responsibilities, protects their site from copyright infringements and other illegal actions such as spamming.

Call-To-Action (CTA)

Placing CTAs on your page footer turns visitors into subscribers or followers, helping increase your conversions or move your clients deeper into the buyer’s journey. Incorporating CTAs, especially social media links, also help paint your business as an established company, and allows your visitors to follow you using a platform that’s most convenient for them.

There are multiple CTAs you can include, such as:

  • Signing up to your newsletter
  • Following you on social media
  • Filling out a contact form
  • Requesting a demo
  • Signing up for a free trial

Company Details

Once you’ve impressed readers with your content and they’ve reached the bottom of your page, they’d most likely want to know more about your company.

Utilize your footer to emphasize details about your business that you may not be able to include in the header, such as links to the following pages:

  • About Us
  • Blog
  • Careers or jobs
  • Affiliate or partnership opportunities
  • List of products or services
  • Press releases
  • Reviews
  • White papers
  • Events

Customer Support

Part of designing customer-focused page footers is ensuring that links to pages that readers may need–either as a potential client or a current customer–are easy to find. These support links may include:

  • Help
  • FAQs
  • Knowledge Center
  • Tutorials

E-commerce sites can even include the following anchor texts:

  • Shipping and delivery information
  • Return and exchange policies
  • Payment methods accepted
  • Special offers

Website footer example of offering customer support Instead of simply saying “Support,” Book Depository’s footer has a “How can we help?” column, and below it are the anchor texts “Where’s my stuff?” and “Where do you deliver?” The style is informal, conversational, and helps convey a sincere desire to provide assistance.

The Four Don’ts of Page Footer Design

1. Having the Same Header and Footer Menu

At times, web visitors turn to the footer when they can’t find some details in your header menu. In this case, using exactly the same links on your header and footer does not add value to your visitors or to your company.

Divide your important pages between the header and footer to keep web visitors from being overwhelmed by text. Utilize your header for your highest-value pages, and reserve your footer for other important links.

Apple's website footer example Notice how Apple’s sticky header featured only six product categories. Complementing this is a footer that contains a longer list of products (leftmost column) as well as a list of services.

2. Over-Optimizing

Over-optimization, whether in your content or footer, is not an effective way to boost your search page rankings. Google’s ranking algorithm has been catching up on this keyword stuffing technique, and it may only have a negative impact on your SEO results. Instead of over-optimizing, pick a handful of keywords and focus on those.

3. Unimportant Links

Your footer is not a space to list down any and all pages in your site. Visitors who scanned your whole page and checked out your footer are likely already interested in your offers. Instead of throwing in a hodgepodge of anchor texts, turn the footer into an effective navigation tool. Lead them to your product or services page, or helpful links like tutorials or your company’s blog.

4. Overcrowded Layouts

It may be tempting to pack as much as you can at the bottom of your site. But a crowded footer may turn off your visitors, causing them to exit the page or gloss over your anchor texts. Choose the essential pages, organize these, and leverage white space to create a neat, readable footer design.

How to Craft an Effective Footer Design

There are so many ways to craft a footer that’s both aesthetically pleasing and functional. Aside from the tips above, here are the top five best footer design practices.

1. Put Readability First

Since footer texts are often small and web visitors tend to skim these, you need a design that ensures the words are easy to read. To ensure that your footer is readable, you can:

  • Opt for simple typefaces like sans serif.
  • Avoid using too many fonts or colors.
  • Take advantage of white space, and experiment with kerning and line height.

Another way to increase your footer’s readability is to use good color contrast. This enables your visitors to comfortably read your anchor texts, without squinting or straining their eyes.

The standard combination is to use black text on a white background or vice versa. If you want to deviate from this and experiment with more colors, here are some tips:

  • Choose colors that complement your branding and your website’s overall design.
  • Design with your target audience in mind. If your site caters to elderly individuals, use hues that are gentle on the eyes. Combine this with a limited amount of text and generous white space.
  • Select colors that convey the emotion or personality you want to give to your site. For example, choose red if you want to convey urgency and energy. Go for blue to symbolize trustworthiness and calm, or green to represent nature or health.
  • Make your CTAs pop out of the page by using a different color, such as The Guardian’s yellow buttons against a blue background.

Website footer example using color

2. Stay True to Your Branding

Your website is a major component of your branding. This is especially true for ecommerce businesses, whose main touch points with customers are online.

A strong, consistent branding helps web visitors remember you and associate your company name with your logo, services or products, values, and a specific feeling or experience.

There are multiple ways to craft a footer design that’s consistent with your branding. Here are a few ideas:

  • As mentioned above, pick colors that represent your values or hues you’ve used in your logo or marketing materials.
  • Incorporate your logo, mascot, or other elements that symbolize your brand.
  • Adopt similar design elements, including typography and layout you’ve used in other promotional materials.

Website footer example using same color for header and footer Notice how Smashing Magazine uses the same text and background color for its header and footer. The illustrations help sustain a playful vibe from the site’s top menu down to its bottom section.

3. Optimize for Mobile Users

Since mobile users are more likely to scroll to the bottom of your page than desktop visitors, optimizing your site for different devices especially on mobile is a must. This strategy goes beyond responsive designs. To make it easier for mobile users to reach you or scan your site:

  • Adjust your footer text size so visitors can easily tap options without zooming in.
  • Include a clickable call button so visitors can easily reach out to you.
  • If you want to encourage users to drop by your physical office or showroom, link your address to a map.
  • If you have apps, provide links to these.

4. Keep It Simple

Simplicity in footer design refers both to its style and content. Keep your footer clean, stick to a few colors and typography, and avoid elaborate backgrounds. In terms of content, keep the anchor texts short and limit the items you display. Inundating your readers with ornate layouts or too much text may only pull their attention away from your CTAs and other valuable links.

5. Get Organized

A well-organized footer improves the site’s readability, enables readers to get a bird’s-eye view of the site and the company, and allows visitors to easily find details they need.

If you want to add several anchor texts but are worried that the footer may look messy, apply the following techniques:

  • Arrange related menus into columns and provide a column header.
  • Experiment with font sizes, line height, or text colors to show content hierarchy. For example, use a slightly larger font for the column headings, and leave more space between the header and the anchor text below it.
  • Utilize different background colors to separate one section of your footer from the rest.

Website footer example using different colored sections AgingCare uses three background colors to divide the footer into sections. Their CTA, displayed against a blue backdrop, stands out against the footer menus (in light gray background), and the copyright, terms of use, and privacy policy information at the bottom (dark gray background).

Putting It All Together: Footer Design Inspirations

One way to generate ideas for your site is to browse other pages. Notice how other designers incorporate the concepts covered above to deliver well-crafted footers. Here are four designs to inspire you.

Blue Stag

This design studio’s footer, with its animated background and running blue stag logo, displays the firm’s creativity. The out-of-the-box background amuses, and the contrasting image of a blue logo sticks to your memory. This neat footer highlights the CTA, i.e., the company’s contact number and email address, both of which are clickable.

Website footer inspiration example

The New York Times

The New York Times’ footer has a simple, clean design, utilizing ample white space and a standard contrast of black text against a light background. Anchor texts, organized in columns, guide visitors to other interesting pages and articles, encouraging them to explore and stay on the site. The design leverages typographic hierarchy to draw more attention to the company’s name on the left and the subscription options on the right.

Website footer inspiration example

Sephora

The beauty brand’s footer adopts a classic look with white text against a black backdrop. A thin line divides the footer into two sections: the columned anchor texts at the top, and the CTA, social media icons, copyright, and privacy policy at the bottom. The brand also has a dropdown menu for visitors to choose their region or language, providing an English and French-Canadian version.

Anchor texts are neatly grouped in four columns. Using sufficient white space, Sephora’s footer is able to incorporate a lot of information without looking cluttered.

Meanwhile, the company’s mobile version retains the column headings, sign-up option, and social media icons. Displayed right above the footer are links to the App Store and Google Play, where mobile users can download the Sephora app.

Website footer inspiration example

StackSocial

StackSocial provides an incentive for new customers to sign up to its newsletter. Also, it uses a blue button for the CTA, allowing it to stay consistent with its branding. The blue CTA also leaps off the page amidst the dark background and light text. A logo of the Better Business Bureau (BBB) on the lower right helps build trust for the brand.

Website footer inspiration example

Final Words

There are so many ways to design a footer that can increase your conversion and make your site accessible and easy to navigate. Keep experimenting and applying the tips above until you come up with a footer design that meets your company’s goals and your target clients’ needs.

Do you have tips, tricks, or impressive footer designs to share? Leave your thoughts below.

The authors

Learn more about us

Inka Wibowo

Content Manager

Hi, I'm Inka! I started using website builders and content management systems over 10 years ago, when I managed websites for clients in my first marketing role. Since then, I've worked on hundreds of web and digital projects. Now, at Tooltester, I'm happy to be able to use my experience to help users like you find the right website builder for your needs.

Robert Brandl

Founder and CEO

Hi, my name is Robert Brandl! I used to work in a digital marketing agency where I managed website and email marketing projects. To optimize my client's campaigns, I always had to find the optimal web tools. Tooltester offers this knowledge to you, hopefully saving you endless hours of research.

Learn more about us

THE BEHIND THE SCENES OF THIS BLOG

This article has been written and researched following a precise methodology.

Our methodology

Comments

website creation ebook cover page

The Step-by-Step Guide to Website Creation

Are you keen to learn the basics before you get started? In our ebook, “Website Creation for Absolute Beginners” we’ll show you the steps you need to take to create your own business website.

Note: We will never share your email address with anyone except our email service provider. Of course, you can unsubscribe at any time.