5 Best Practices for Designing an Impressive Website Footer
Learn how to design a website footer. Tips on what you should add, what not to add, and examples of good website footers for inspiration.
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.
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.
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.
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.
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.
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.
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.
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
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
- Careers or jobs
- Affiliate or partnership opportunities
- List of products or services
- Press releases
- White papers
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:
- Knowledge Center
E-commerce sites can even include the following anchor texts:
- Shipping and delivery information
- Return and exchange policies
- Payment methods accepted
- Special offers
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.
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.
- Generate color combinations using contrast accessibility tools like the following:
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.
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.
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.
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.
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.
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.
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.
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.