Quantcast
Viewing latest article 2
Browse Latest Browse All 12

Website Footer 101: Design, Content, Best Practices & Examples

A website footer is the section that appears at the bottom of every single page of your site. It typically includes important features like a copyright notice, an email capture, or links to resources.

The footer is a valuable piece of real estate on your site. Why? Because it provides an opportunity to connect with visitors one last time and encourage them to continue to engage with your website. Plus, it’s a seamless way to include required information — like legal disclaimers and privacy policies — on every page.

Unfortunately, footers are often overlooked or thrown together at the last second, leading to lots of missed opportunities and conversions.

So how can you make the most of your website footer?

Why are website footers important?

1. They establish consistency

A website footer provides site visitors with a sense of consistency, as the same information will appear at the bottom of every single one of your pages. This helps people know that they’re really on your site and makes it easy for repeat visitors to find what they’re looking for. 

2. They keep visitors engaged

Even site visitors who carefully read a page’s full content might reach the end of an article and close the page. To keep this from happening, you can offer a way for readers to discover additional content — like FAQs, popular blog posts, contact information, and return policies — at the bottom of the page. 

3. They meet expectations

There are certain things that site visitors will actively look for in your footer — privacy policies, account information, and social media links to name a few. Don’t disappoint them and make their search harder by not including items where they expect them to be.

4. They make it easy to include required information on every page

Many types of websites, especially in fields like real estate and medicine, are required to include notices on every page. The footer provides an easy way to do that without having to manually add information over and over again.

5. They let you have a final say

If someone’s read your entire blog post, consumed your whole page, or skimmed through your content, the last thing they see is your footer. That makes it the perfect opportunity for one final request for a sale, donation, or newsletter subscription. 

The exact contents of your footer will vary based on the purpose of your site. But it’s important that you consider what’s going to be most valuable for your audience and website. For example, are there certain legal requirements you have to fulfill? Is your goal to guide visitors to important areas of your site? Or are you more focused on making sales and gaining subscribers? 

Here are a few common elements to include in your footer:

1. A call to action (CTA)

Calls to action direct site visitors to, well, take action. Here are a few example CTAs:

  • Buy now
  • Subscribe to our newsletter
  • Learn more
  • Get in touch
  • Leave a review
  • Share this post
  • Enter our giveaway

Including a CTA in your footer is a great strategy because it’s visible on every single page and gives site visitors one last chance to take action before they go elsewhere. In the footer example below, the Sacramento Ballet included two CTA buttons in their footer: “Donate” and “Subscribe Now.”

Image may be NSFW.
Clik here to view.
Footer from the Sacramento Ballet website
Website footer example from https://www.sacballet.org/ 

2. Contact information

Make it easy for site visitors to get in touch with you by including contact information in your footer. This might look like a list of ways to reach out, a link to a contact page, or even a form embedded directly in your footer.

In the example below, the footer of Massachusetts General Hospital’s giving website includes an address, phone number, and email address. 

Image may be NSFW.
Clik here to view.
Mass General Hospital footer with clear contact information
Website footer example from https://giving.massgeneral.org/ 

Consider also making email addresses and phone numbers clickable, so that visitors can easily send you a message or give you a call.

3. Locations or maps

If you have a physical store, facility, office, or other location someone might visit, you should include an address or map in your footer. You may also want to consider adding the hours you’re open to prevent any confusion. 

This can help local search results and strengthen Google’s correlation between your website and your Google My Business listing. Strong proof of your exact street address and contact information is important to Google because they want to supply accurate, legitimate information to searchers. The stronger correlation you can provide, the more likely your listing is to show up in search results and on Google Maps. 

But, you do want to list all of this information in the same exact format you use on your Google My Business profile.

Northwest Eye Design features both the address of their office location as well as a link to Google Maps to make things easy on their patients.

Image may be NSFW.
Clik here to view.
Northwest Eye Design footer with address information and links to a map
Website footer example from https://nweyedesign.com/ 

Social media is an important tool for bloggers, service-based businesses, and online stores alike. And while you might send social media followers to your website, there are also benefits to sending website visitors to your social media accounts.

For example, it’s a great way to engage potential customers, share tips and images, and show the following you’ve built around your brand. And, of course, if social media is one of your income streams, it’s even more important!

So, consider including social media icons or even images from a social feed like Instagram in your footer. Boston Market did just this, separating their social media icons so they stand out from the rest of the footer content.

Image may be NSFW.
Clik here to view.
Boston Market footer with separate sociaal media icons
Website footer example from https://www.bostonmarket.com/ 

5. Newsletter signup forms

Don’t underestimate the power of an email list! Other than your website, it provides the most powerful communication tool for your audience, one that you own 100%. Use an email list to notify subscribers about sales, new blog posts, tips, and other offerings.

And, to build that email list, include a signup form in your footer. All you need to do is embed the form using a code from your favorite email marketing tool. Or, use one of Jetpack’s blocks to easily add a newsletter form to your page, no code required.

Heggerty added a light gray box around their email newsletter form to help it stand out and included simple language so people know exactly what they’re signing up for.

Image may be NSFW.
Clik here to view.
Heggerty footer featuring an email newsletter signup form
Website footer example from ​​https://heggerty.org/ 

If blogging is a big part of your website, consider including posts in your footer. You may want to add popular or recent posts, or even feature ones that are most critical to your blog or business. 

Instead of featuring individual posts, Kylie M Interiors has a list of categories, so site visitors can easily find the type of content they’re searching for. 

Image may be NSFW.
Clik here to view.
Kyle M Interiors' footer with blog post categories
Website footer example from https://www.kylieminteriors.ca/ 

You don’t have to add your post links manually, either. You can use widgets like the Top Posts and Pages Widget to keep information constantly updated.

There are certain types of legal information that the majority of websites should link to: copyright information, terms and conditions, and privacy policies. But if you’re in specific industries — like real estate, CBD, or medicine — you might be required to include extra disclaimers or legal statements. 

Your footer is the perfect place to include these because they show up on every single page. CBD company Best Bud, for example, includes an FDA statement in their footer, along with terms and conditions, shipping policies, privacy policies, and return policies.

Image may be NSFW.
Clik here to view.
Best Bud's website, featuring an FDA statement in the footer
Website footer example from https://www.bestbudforlife.com/ 

Depending on your site, critical pages could include everything from account and login pages to product categories, FAQs, service pages, and contact forms. eCommerce store Wild Mountain Wax, for example, divides important content into three categories: Help, Learn, and Wholesale.

Image may be NSFW.
Clik here to view.
Wild Mountain Wax footer with links to important pages
Website footer example from https://wildmountainwax.com/ 

Don’t just repeat your main menu, however. Instead pare down to just the most valuable pages or focus on content your visitors might be hunting for.

So we’ve talked a bit about the types of information you can include in your footer. Now let’s discuss ways you can make the most of it. Here are some website footer best practices:

1. Design your footer for mobile devices

Don’t let mobile be an afterthought when you design your footer. Remember, people will visit on devices of all types and sizes! And footers often go on and on when shown on a mobile device — visitors may not scroll to see all of your information.

Offerman Woodshop did an excellent job building a footer that works well on mobile. Their design is clean and easy-to-navigate on desktops, tablets, and phones.

Image may be NSFW.
Clik here to view.
Offerman Woodshop footer on multiple device types
Website footer example from https://offermanwoodshop.com/ 

If you’re not sure exactly how your site looks on all the phones, tablets, and desktops out there, try using a tool like BrowserStack. It gives you an instant look at your website on lots of different sizes and brands of devices.

It can be easy to stuff tons of information into your footer, which can very quickly become overwhelming to site visitors. Pare down your footer content to what’s most helpful and most important. And, if you do need to include a decent amount of info, break it up into digestible pieces.

That’s exactly what MailPoet did. Even though they link to a lot of content, it doesn’t seem overwhelming because it’s divided into clear categories and there’s a lot of white space.

Image may be NSFW.
Clik here to view.
MailPoet footer divided into columns

3. Organize your information

Organization relates very closely to the previous tip because organized information helps your website footer design appear less cluttered. But it’s not just about categorizing data. It’s also about using visual cues to group content.

Let’s take a look at what WooCommerce did. They broke their footer into three parts:

  1. Important features. This section stands out with a gray background, visual icons, and purple text.
  2. Valuable links. All of these are categorized underneath bolded, all-caps headlines.
  3. Other info. The final section is set apart by a dividing line and includes legal info, social media icons, and the Automattic logo.
Image may be NSFW.
Clik here to view.
WooCommerce footer with three clear areas

4. Get creative

Footers don’t all have to look the same. Think about your brand, your site design, and get creative! Consider shapes like curves and triangles, images, custom graphics, and other interesting features.

OTRUSA ties in their brand design elements by including an image in the background and using angled dividers for some of their content.

Image may be NSFW.
Clik here to view.
OTRUSA footer with bright colors and fun angles
Website footer example from https://www.otrusa.com/ 

5. Think through different footer layouts

There are lots of different ways you can arrange your footer and there’s not a one-size-fits-all solution. If you just have a little bit of information, you might want a skinny, narrow footer like on the Adobe Blog.

Image may be NSFW.
Clik here to view.
a very thin footer on the Adobe blog
Website footer example from https://blog.adobe.com/ 

If you have more content, you might consider a taller footer with multiple columns, like on Pressable’s site.

Image may be NSFW.
Clik here to view.
Pressable footer with multiple columns
Website footer example from https://pressable.com/ 

Or you might even think about a more visual footer, with very little text and lots of graphics. That’s exactly what Veer did, using custom icons to showcase their important links.

Image may be NSFW.
Clik here to view.
Veer footer, using custom icons instead of text
Website footer example from https://www.goveer.com/ 

6. Remember accessibility 

Accessibility is all about making your website easy to navigate and consume for every single site visitor, including those with visual, auditory, mental, and physical impairments. Here are just a few accessibility considerations that apply to your footer:

  • Color contrast. Make sure text and images are different enough from your footer background that they can be easily consumed. Avoid dark text on a dark background or light text on a light background. Not sure if your design measures up? Run your colors through WebAIM’s color contrast checker.
  • Links. Use more than just color to differentiate links from other text. You can do this with underlines, icons, and other cues.
  • Alt text. Include alt text for any images or graphics in your footer. Screen readers use these to “read” images to those with visual impairments.
  • Fonts. Stick to simple, easy-to-read fonts that everyone can consume. And, while you’re at it, make sure they’re large enough so that anyone with vision difficulties can still read every word.

There’s a lot more that goes into creating an accessible website. For more information, check out this post about web accessibility from WooCommerce.

Typically, your footer layout and design will depend on the theme you’re using. Many themes include built-in footer designs that you can choose from and customize based on your needs. You’ll need to refer to your specific theme’s documentation for details on this. For example, the Frame theme allows you to select from 14 different column styles for your footer.

Image may be NSFW.
Clik here to view.
footer options for the Frame theme

However, in WordPress, footers are widgetized areas, so you can drag and drop widgets or blocks into them without having to edit code. Here’s how you can add content to your footer:

  1. In your WordPress dashboard, go to Appearance → Widgets. There, you’ll see a list of widgetized areas, including footer columns. Again, this can vary slightly based on your theme.
  2. Expand the footer column you’d like to edit.
  3. Click the + icon to show available blocks. From there, you can either search for a specific block or click Browse all to see a full list.
  4. Drag the block you’d like into the footer column area.
  5. Customize the settings based on the block. For example, you might change the color and text of a button or choose an image to add. 
  6. Click the blue Update button in the top right corner.
Image may be NSFW.
Clik here to view.
adding widgets to a footer in WordPress

For more information, read the full instructions from WordPress.

Remember, your footer shouldn’t just be an afterthought: it’s your last chance to make an impression on site visitors and an excellent way to present critical information on every page.

So take the time to really think about the content you include in your footer. Consider what would be most helpful for your goals and your visitors’ experience. After all, a well-crafted, cohesive website footer can make a great impact on engagement.

Need a little help? Jetpack offers a variety of WordPress blocks and widgets to make creating your perfect footer possible. And if you’re just starting out, there are dozens of excellent WordPress themes to choose from that have already done the hard work for you.

FAQs about website footers

The exact size of your footer will depend on your website and the volume of content you’d like to include. Some footers are thin, narrow strips with a single line of text. Others take up much more space and include lots of information.

However, when choosing a footer size, make sure to consider mobile design. If a footer is too long on mobile devices, site visitors could be forced to scroll and scroll to view all the information.

No, technically a footer isn’t required for a website to function properly. However, it’s a valuable and effective place to include important content and can be critical for engagement.

Yes, they can help with SEO rankings because they contribute to creating site hierarchy and internal links. They assist Google in understanding your site pages and how they relate to one another.

But, most importantly, they help provide a good user experience by assisting with navigation. And that’s the most important thing to keep in mind. Don’t just pack a bunch of links in to help with SEO — that’ll have the opposite effect! Instead, focus on adding links that help your site visitors. That’s what’s really important to search engines.

A copyright notice typically looks like this:

© 2022 Example.com

It’s essentially a written statement that the website content and design belongs to you. And, while not legally required, it can help prevent copyright infringement and help you win court cases if you sue someone for stealing your website’s content.

Yes, a website footer is a widgetized area on WordPress. That means that you can add widgets and blocks to build your footer content.


Viewing latest article 2
Browse Latest Browse All 12

Trending Articles