Website Footers: Best Design Practices & 24 Top Examples

Download Now: Free Website Design Inspiration

Think of the footer on your website as a safety net for users. If they can't find what they're looking for on your home page or in header menus, they'll often check the footer before leaving.

But what makes a good footer? How do you build one, and how do you ensure it's optimized for SEO? You're in luck - in this post I'm going to review good footer basics, design best practices, SEO optimization, and finally, share some fantastic footer examples.

Table of Contents

• What is the Footer of a Website?
• What to Put in a Website Footer
• Which Footer Links to Add for SEO
• Types of Website Footer Designs
• How to Optimize Your Website Footer
• Best Website Footer Examples
• Designing Your Website Footer

You might be thinking there's no point in putting effort into the page footer. Do people even pay attention to content below the fold?

The last major study performed by Nielsen Norman Group in 2018 - a bit old now, but still the go-to research on this topic - found that people do look below the fold.

According to Nielsen, only 57% of the page-viewing time was spent above the fold. However, the study found time spent above the fold is decreasing as screens get larger, designers favor minimalism, and scrolling becomes normalized in general.

So footers matter.

They serve navigational and informational purposes for your audience. You need to optimize this real estate despite it being so far down the page. You'll even notice that Nielsen Norman Group saw an uptick in user attention at the very bottom of sites.

Image Source

This is an indication that users know that the page footers include valuable information. They won't overlook it - particularly when they are looking for something specific.

Now, let's take a closer look at what information belongs in this section of a web page.

No two footers are exactly the same. They vary widely based on the websites' different purposes. That's why there's no precise recipe for a website footer. There are some standard ingredients. But, what exactly you put in, the amount, the order - it's up to you.

Here are some of the common links found on most websites. When crafting your footer, you'll want to include these elements.

Copyright Notice

Arguably, the most important element of a website footer is the copyright notice. In a legal article on Nolo, Stephen Fishman, J.D. writes that a copyright notice is "a written notice stating that a particular work is protected by copyright and that you own that copyright."

The purpose is simple: to deter anyone from copying an image, animation, paragraph, or otherwise trying to steal content from your website.

All that's needed is the copyright symbol © (or the words "Copyright" or "Copr."), the year of the website's publication or most recent substantial update, and the name of the copyright owner.

The copyright notice only has to appear once on your website's homepage, but it can appear on as many pages as you want. While this symbol can be placed anywhere on the homepage, it's most often found in the footer.

Here's an example from HubSpot's blog homepage.

Image Source

Privacy Policy Link

If you're collecting personal data from users, like their email addresses or payment information, then Privacy Policy agreements are mandatory by law. For this reason, it's essential to draft a legally compliant Privacy Policy and ensure this policy is easy to access on your website.

A best practice is to put a link to your Privacy Policy in your website footer. Not only will this satisfy the legal requirement, but it will also meet most consumers' expectations, as they expect to find this information in the footer.

Some companies like Conde Nast will choose to include an excerpt of their Privacy Policy, in addition to a link. Here's an example from The New Yorker.

Image Source

Sitemap

You can add a sitemap to your page footer in two ways. You can provide multiple links to sections of your website, or you can provide a single link to your XML sitemap.

The first approach is known as creating a "sitemap footer." These footers contain navigation points that can't neatly fit into the top-level or global navigation bars of the larger site. There may also be navigation points that encourage visitors to browse the site.

The sitemap footer on Cuyana, for example, includes navigation links that visitors might not have considered when first entering the site but would like to explore.

Image Source

The second approach to including a sitemap is designed with search engine bots in mind.

One of the most important things a search engine bot will be looking for is a link to your XML Sitemap. Your sitemap is a file that contains URLs and information of the pages and media files you consider most important on your site.

According to Google, search engines use this file to better crawl websites, particularly large and content-rich sites. That's why providing a link to this file in your footer is considered a best practice for SEO.

Logo

Page footers are a great place to reinforce your brand identity. There are a few approaches you can take. You can include your logo, but present it in a different way than in your header.

Maybe you increase the font size. Maybe you include an image. Maybe you include a mission statement or your brand values below the logo. These are just a few ways you can remind visitors what your company stands for and make a memorable last impression.

Bequant, for example, adds its mission statement right below its logo in the footer. It reads: "Pioneering network optimization that improves speed, reduces latency and congestion - along with full visibility." That way, a reader would have an idea of what the company did, even if they didn't read the About page.

Image Source

Contact Information

You want potential leads to be able to get in contact with you as easily as possible. For that reason, website footers will often contain contact details like a business email, phone number, or mailing address. Or it might simply include a link that brings you to a contact form.

The luxury boutique hotel Bellevue Syrene dedicates one part of its website footer grid to its contact information. To ensure potential guests can contact the hotel in the way they want, the footer includes an address, phone number, fax number, and email address.

Image Source

Social Media Icons

Social media is another way that potential leads can get in touch with you. Including social profile links in your page footer is considered a best practice for this reason. It's also an easy way to grow your following across your platforms.

Understanding these benefits, it makes sense that 72% of websites include icons for their social media websites in the footer.

Here's a look at a display of animated social media icons on the Rewind App by Flatstudio.

Image Source

Email Sign-up Form

Ideally, you want to present an email sign-up form to a visitor who understands the value of your content and wants more. A visitor who has scrolled to the bottom of your web page is a likely candidate. That's why many websites use their footer as an opportunity to increase their subscribers.

For example, Chobani includes a simple email opt-in form in its footer. The tagline above - "Get the freshest Chobani news" - helps set the subscriber's expectations on what exactly they're signing up for.

Image Source

Footer Links

Footer links, also called boilerplate links, typically appear on almost every page of your website. They're designed to help users navigate your site, especially if they can't find what they're looking for in your header, drop-down menus, or home page links.

Which Footer Links to Add for SEO

While there's no standard set of footer links, here are some common options that I think are a good idea to add.

About Us

This link takes visitors to your "About Us" page, where you can give them the elevator pitch for your company and your mission statement. With customers increasingly interested in why and how your business operates, along with what you make or sell, the About Us link is a solid footer addition.

Contact Information

Sure, visitors are on your website, but they might want to get in touch directly. Adding a Contact Information link lets you provide details such as phone numbers, email addresses, and physical mailing addresses.

Locations

If you have multiple locations, it's a good idea to create a Locations link and list the contact information of each one. This is especially important if you have more than one branch in the same city or if your business spans multiple states.

Sitemap

Including a Sitemap link lets visitors access a birds-eye view of your website. This is useful if they can't find what they're looking for or prefer simplified navigation to more media-rich options.

Privacy Policy

With regulations such as the CCPA, GDPR, HIPAA, and others continually evolving, it's worth including a link to your privacy policy. This provides information for visitors about how you may collect and use their data (if they consent) and helps ensure compliance with rules for collection, storage, and disclosure.

Customer Reviews

If potential customers reach the bottom of your page but still aren't convinced to take action, customer reviews may be just the push they need. Collect some of the best reviews of your product along with some of the worst (that you handled well) to showcase both the quality of what you're selling and the responsiveness of your customer service teams.

Terms of Use

Will your Terms of Use see significant visitor volumes? No. Will they ever be read in their entirety? Probably not.

But are they necessary? Absolutely. While it won't see much use, it's important to include a Terms of Use link in case users have questions or legal challenges arise.

Types of Website Footer Designs

What kinds of footers can you design for your website? There are quite a few options - I'll cover them next.

Fat Footer

Image Source

A "fat footer" includes the grand majority of the website's sitemap and usually categorizes links by a common theme or need. This is a good option for you if you have many pages that users could potentially be interested in.

In the above example, Asana includes links for its own company pages, product pages, solutions, and resources. It's neat and easy to scan, which is what you want in a website footer. At the bottom are the quintessential links to the company's terms and privacy pages, as well as its social profiles.

Narrow Footer

Image Source

A narrow footer contains the basic information your website visitors need and has a smaller footprint compared to "fat footers." The main benefit of a narrow footer is that you can choose its focus because you don't have to include all your website links. Bonus: It's not as overwhelming to look at!

In the above example, a university targets in-person visitors by including links to its "Visit" page, campus map, news page, and events calendar. This is information someone would need if they were planning to explore its campus.

No Footer

Image Source

If your website is particularly artsy, or if you have a one-page website, you may not need a footer. (Although you should always include copyright information and terms of use, as in the above example.)

Forgoing the footer may conserve your website's aesthetic, but having a footer is best for most brands and companies.

That said, even if you don't have a footer, you could always maximize your copyright area by including social and email links, like the above example does.

Product Footer

Image Source

Businesses that sell a specific line of products (like SaaS companies) would benefit from a "Product" footer. Essentially, the first links users see are for the products and their features, like in HubSpot's footer, pictured above. Company links and other pages are usually listed last in this type of footer, or sometimes not at all.

This example is particularly effective because it lists features first, which is what users are usually looking for when they're searching for a product (i.e., they're not searching for the product itself but for a benefit).

At the bottom is a row of social links in a cohesive light gray color - if you think you're required to include the original icons, there's no need. You can always edit the icons so they fit your brand's color palette.

Legalese Footer

Image Source

A legalese footer contains pertinent legal information that website visitors should know when scrolling through your website. Apple's footer is an emblematic example, with its paragraphs upon paragraphs of legal footnotes.

You can always create a legalese footer, even if it's a simple line, such as "All views are my own." This type of footer can be mixed in with other types, such as narrow or fat footers.

CTA Footer

Image Source

CTA footers are a popular type of footer that includes either a contact form, an email form, or a prompt to call your team. This type of footer is highly effective for converting traffic that may be showing exit intent, which could be better (and less annoying) than an exit intent pop-up.

It's also a great way to re-engage users when they get to the bottom of the page, removing a barrier to conversion.

Site Index Footer

Image Source

Site index footers include all of the links on your website - a great option if your site is small. There's no reason not to include all your links unless you have a particularly large URL library.

This type of footer is great for improving the user experience and ensuring visitors find what they're looking for if they can't find it using your top navigation menu.

Now that we know what possible content and elements we can put in a website footer, as well as the types of footers you can create, let's look at some real examples that might inspire you.

How to Optimize Your Website Footer

Good footers can keep visitors on your site and point them in the right direction. Not-so-good footers can frustrate users and convince them to take their interest elsewhere.

But what sets apart a good footer from its not-so-good counterpart? Here are 11 ways to optimize your website footer.

1. Think about your links.

When I first built my freelance writing website, I didn't give much thought to a footer, let alone footer links. The result was a site with limited functionality - if visitors didn't find what they were looking for at first glance, there were no secondary options.

Other businesses take the opposite approach, adding 20, 30, 40, or more links to their footer. While this offers more information, the problem remains the same: It's challenging for visitors to find relevant information.

To optimize your footer, think about your links. Aim for 5-10 if possible. Too few and your footer doesn't offer much value. Too many and users will simply scroll past.

2. When in doubt, go small.

The bigger your footer, both in terms of website space and the number of links included, the more it distracts from the rest of your website. Remember that a good footer isn't the focus of your site - instead, it's a way for users to find specific information that keeps them on your page.

Bigger footers also mean more maintenance and monitoring to ensure links are up-to-date and working as intended.

3. Let your footer fade into the background.

Another way to optimize your footer is by letting it fade into the background. Consider your color scheme - choose a color combination that complements your current website palette but keeps the footer in the background. When users are on your site you want them focused on main page content. While the footer shouldn't entirely disappear, it shouldn't pull user attention.

4. Don't forget your contact info.

It's simple but effective: Make sure your contact info is part of your footer. While it's a good idea to have a separate link for multiple locations, it's worth including your primary phone number and email address within the footer to make it as easy as possible for users to reach out.

5. Make room for fine print.

Don't ignore the fine print. This can include links to your privacy policy, terms of service, and security practices, along with a copyright notification. While these links are infrequently used, including the fine print in footers is an easy way to showcase regulatory compliance.

6. Consider adding a search bar.

Adding a search bar to your footer lets visitors ask for what they want if they don't see it listed. While many companies now include a search bar at the top of their home page, businesses with larger and longer home pages may want to include a search in the footer as well.

Consider a user who has made it all the way to your footer but still can't find the link they want. If the only search bar is at the top of the site, they're more likely to leave than scroll back up.

7. Add social proof.

Along with your social links, it's worth mentioning any recent accolades in your footer. For example, if you've just won a local, state, or national award for service, quality, or value, highlight it in your footer to showcase your expertise.

8. Highlight certifications.

You can also use your footer to mention relevant certifications. These might include compliance symbols for GDPR, DMCA, or for trusted sites such as the Better Business Bureau (BBB).

Pro tip: More doesn't always mean better. Select a few certifications that are relevant to your industry and well-known to the public to help engender trust.

9. Incorporate a call-to-action.

One more call-to-action may be just the thing that gets a user to take action. After all, they've made it all the way to the bottom of your site - that has to count for something, right?

By including a clear call-to-action in your footer such as signing up for a newsletter, requesting a trial, or scheduling a demo, you can speak to the limited subset of users who made it all the way to the bottom of your site.

10. Bring in your branding.

Optimize your footer by making sure that it's consistently branded. This means including your company's logo, preferred font, color scheme, and anything else that sets you apart. While your footer may not be the most exciting part of your site, it still represents your brand.

11. Keep SEO in mind.

Good footers can help drive SEO. Consider footer links. Search engines like Google can tell when links were added for SEO purposes only and when they actually provide value to users. Simply put, if you "link stuff" with more links than you need, you may lose search ranking. To improve SEO, take the time to curate your footer and ensure each link has a purpose.

Best Website Footer Examples

As discussed above, there's no "right" way to create a website footer as long as it reflects your unique brand identity and is tailored toward your audience. Let's check out a few examples that do exactly that.

1. Lorelei Londres

Image Source

Lorelei Londres is a luxury hotel in Italy that strives to provide hospitality and charm. Its footer succeeds in both aspects.

Anticipating any question from a site visitor or guest, there's contact information on the left, navigation links at the center, and a newsletter opt-in form to the right. On the right, there's also the privacy policy link as well as the submit form directly in the footer.

Below, there's another link to the privacy policy, cookie policy, and the agency that created the website, as well as the copyright notice.

All of this is placed against a background image depicting someone in a pool on a balcony overlooking a beach.

What I like: This footer is standard and straightforward - but also perfectly aligned with the brand.

2. Drunk Elephant

Image Source

Drunk Elephant is a beauty brand that offers biocompatible skincare products. Their footer contains the information you expect - a well-organized menu of product categories, ways to learn about the brand, legal info, and social media accounts to follow, and more.

What I like: What this footer does best - in addition to clarity and readability - is leveraging Drunk Elephant's bold and vibrant brand colors and overall aesthetic.

3. Spline Group

Image Source

Spline Group is a mechanical and electrical engineering firm that values effective communication and simplicity.

This is clear in its footer. A minimalist design, the footer features black text on a white background. There's an address and links to its Instagram, LinkedIn, and Careers page. Below that is much larger text. But unlike Superfluid, it's not Spline's logo or brand name. Instead, it's a contact link with the simple but inviting CTA: "Let's talk."

What I like: This footer merges the firm's mission with its aesthetic, and it makes the CTA the priority.

4. Art4web

Image Source

Art4web is a creative digital and branding studio committed to making unique websites, mobile apps, and brand designs. Its own footer section is an example of unique design. Rather than offering one touchpoint to potential customers, Art4web offers three.

What I like: This unique CTA-centric footer is eye-catching and also makes it easy for clients to reach them.

5. gOOOders

Image Source

gOOOders is an online platform and series of hotel boutiques that sell ethical and sustainable products. Its mission is to help people make better choices in the products they buy and the way they travel.

Since gOOOders is a brand focused on action, it makes sense that the footer is so action-oriented. Most of the footer section is dedicated to the email sign-up form. The form's background is colorful and eye-catching, so your eyes are drawn to that section.

What I like: This is a great model for websites that want to optimize their footer for conversions.

6. Ajeeb

Image Source

Pranjal Kaila, also known as Ajeeb, is an independent interdisciplinary designer. According to his bio, one of his specialties is "creating interactive spatial and sensory experiences." This is clear in every part of his website, including his footer.

His footer contains basic information - links to his sketchbook and work, contact information, social media icons, copyright notice, and link to his privacy policy - but their presentation is unique.

Against the black background, the white typography looks like constellations. The cursor acts like a spotlight. When hovering over any of the links, the font becomes bold and blue.

7. Tenzo

Image Source

With a mission to provide a clean caffeine beverage alternative to coffee, Tenzo sells matcha tea in an affordable, accessible way.

The homepage features multiple CTAs to try today with a money-back guarantee to make prospects more confident in their purchase. Its footer offers another incentive: a 10% discount if they enter their email.

Visitors who want to stay connected without providing their email can follow Tenzo on Pinterest, Facebook, Instagram, or Twitter. The footer also contains important links for visitors who are looking for different ways to purchase Tenzo's products or want to learn more about matcha or the company.

What I like: Thanks to all the elements mentioned above, the website footer effectively targets top and middle-of-the-funnel customers.

8. Envoy

Image Source

Envoy is a brand and digital innovation firm that aims to create transformative brands and digital experiences. Its website is a great example of a transformative digital experience.

Its footer is particularly unique. It has a clean, three-column layout to display its three office locations. Below are three ways to get in touch depending on whether the visitor is interested in working with the firm, making a general inquiry, or applying for a job.

Finally, there is a copyright notice, links to the firm's Instagram and LinkedIn pages, and links to its privacy policy and terms and conditions, which are all aligned in their own columns.

What I like: This simple, black-and-white design perfectly aligns with Envoy's branding and is a stark difference from the colorful, animated featured work section above.

9. Aisle

Image Source

Aisle is an ecommerce business that provides reusable alternatives to disposable pads and tampons. Top to bottom, its website is designed to inform and inspire customers to purchase its ethically-made sustainable products.

Aisle's footer features a feed of images that promote the vibe of the brand, and underneath are the usual footer links. Finally, the email opt-in form stands out thanks to the orange background color and yellow shapes, as well as the coupon offer.

What I like: This footer continues selling the brand and its mission right to the bottom of the page. The level of detail shows how much the brand cares about its vision.

10. Will Ventures

Image Source

Will Ventures is an early-stage venture capital firm that mostly works with consumer, health, and media startups.

Its black-and-white website helps present the user with clear options and prevents information overload. For example, if a user scrolls to the footer, they only have a few options: they can sign up for Will Ventures' newsletter, follow the firm on X or LinkedIn, or check out the site credits.

What I like: If these were the only elements in the footer, it might seem bland. But, the text "WILL" is animated to move up and down the page to keep users engaged.

11. Tāmras Gin

Image Source

Tāmras Gin is meant to invoke the lush paddy fields, backwaters, and rustic charm of the village of Colvale in Goa. Its website footer also aims to invoke these images.

It features hand-drawn animations of people drinking and relaxing beneath trees, which represents the botanicals and citrus fruit used in the gin.

These animations also serve another purpose: to frame the logo, email opt-in form, and other standard elements of a footer like the Instagram social icon.

What I Like: This footer helps to reinforce Tāmras Gin's brand and encourage visitors to take action, either by opting into the email list or following the brand on social.

12. Callista

Image Source

Callista is a new luxury apartment development in Rose Bay. Its website is designed to provide a virtual tour of these apartments.

Its footer, for example, contains images of the front and back of the apartments. It also features a navigation menu with the inviting question, "Where to?" Visitors can choose to click on certain navigation links to see the outside and interior of the development, its location, or a video tour.

Pro tip: The footer also contains a "Back to top" button, which encourages visitors to keep browsing.

13. Lemkus

Image Source

Lemkus is a leading retailer of sporting apparel and branded sneakers in South Africa. Its website design is designed to be as unique as its product designs.

Its footer on the homepage is a great example. Most of the page has a white background with black text color and yellow accent color, but its footer has yellow as its background color. The email opt-in form also stands out thanks to the bold, black font inviting visitors to join the community. The other text is understated but not easy to overlook, thanks to hover animations.

What I Like: Its logo is huge, spanning the entire footer, which makes it more likely that visitors will remember the brand name even after they've left the site.

14. Avex

Image Source

Located in New York City, Avex uses the Shopify platform to create attractive and effective online stores for lifestyle brands. As a full-service agency, the company uses its footers to show off the full scope of its offerings. You can learn about the work they have done and their services.

What I Like: The footer highlights helpful information related to thought leadership. Visitors can easily learn how to elevate their businesses through Avex's Insights or Podcast pages. Careers, another point of visitor interest, is also clearly marked/

15. The Financial Diet

Image Source

The Financial Diet, a personal finance website, takes a minimalist approach to its footer - demonstrating the value of simplicity. Instead of overwhelming visitors with more information than needed, they stick to the important essentials.

Copyright, contact forms, and privacy terms are all standard stakes. What we really love? The Affiliate disclosure section. Here, The Financial Diet is transparent about its involvement in Amazon's affiliate program. We love this clear disclosure and wish other sites using affiliate links were more upfront about their participation.

Worth noting: The site offers its RSS feed for those who want to add the site to their typical news and reading rotation.

18. Nixie

Image Source

Nixie stands as the most delightful zero-calorie, zero-sweetener beverage available today. The site's website is colorful and friendly. It bubbles with personality!

Nixie prominently features links to its social media pages. This gives visitors the ability to see the brand in the wild. That includes mocktail recipes, pairing ideas, and where people can find Nixie in stores.

What I like: Nixie's footer takes the time to call out Manufactur, the creative agency that helped build its online experience.

17. CALECIM

Image Source

CALECIM is a pioneer in stem cell skin regeneration science. The site's footer is easy to navigate. There are four columns, each with an icon and heading that groups pages together. You can easily see the products available to buy, information about how they were made, and support if you have any questions.

Beyond that, the footer offers another place for users to log in to their accounts. If a member has already scrolled 75% down the page, they can easily log in via the footer, instead of navigating all the way up to the top.

18. Rejouice

Image Source

Rejouice is a digital marketing agency based in San Diego and Paris with a beautiful website and an even more beautiful footer. What makes its footer so unique? Well, it's not just a footer - it actually takes up the entirety of the screen when users scroll down to the bottom. I've never encountered that, but it sure makes for an impactful experience. It also includes everything a footer needs, from a site map to a logo to a link to its legal documentation.

What I like: The unique CTA, which tells visitors to relax and take a seat. After clicking, the user arrives at the contact page, where they can reach out to the Rejouice team.

19. Olivier Tardie

Image Source

Web developer Olivier Tardie pulls out all the stops in this fun and imaginative footer, which takes up the entire screen after you scroll down. It includes a meta note about the footer: "This is the end of the page, but the beginning of our journey." That's a great way to summarize the utility of this section.

A paper airplane flies around the screen, signaling that visitors should send a message to him for a work opportunity.

What I like: The bottom CTA is clear and unmissable: "We should talk." Serious, but reflective of his tone and personality. When you click on it, a pop-up slides onto the screen with a contact form. Everything about this footer is delightful.

20. Sycom

Image Source

IT service provider Sycom implements a similar tactic to Olivier Tardie, where they include a CTA to contact them. I like the large, unmissable text, the descriptive subtitle ("Let's discuss your project together. We will be happy to help you"), and the circular "Contact Us" button that's easy to click with your thumb on a mobile device.

Worth noting: This footer is quite minimal - it doesn't include any site links, and you can barely identify the legal links at the bottom. That's a great tactic to implement if you'd like the focus to stay on your CTA and if your website is small enough to not need a footer sitemap.

Designing Your Website Footer

As you no doubt have gleaned from this post, designing your website footer requires careful planning. (If you need a place to start, there are some great templates available.)

Your website footer is a section where humans and search engine bots look for important information they haven't found elsewhere.

I recommend taking a look at your website footer - or your current plans to design one - and making sure you're providing users with the content and elements they need so they can continue to explore your site.

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.

Topics:Website Design

Don't forget to share this post!