Hire us
Hire us
Website Footer: Best Practices to Apply & Worst to Avoid 3 Website Footer: Best Practices to Apply & Worst to Avoid
Review: 4 - Website Footer: Best Practices to Apply & Worst to Avoid

Footers can be found at the bottom of almost every web page, and often take many forms, depending on the type of content on a website. Regardless of the form they take, their presence is critical (and highly underrated). (NNGroup)

Website Footer: Best Practices to Apply & Worst to Avoid 17
Designed by Fireart

A footer for a website is a great design element that helps navigate on any web page. It saves time, helps confused visitors, and increases their loyalty and conversions. Let’s revise the best examples of website footer design and give some practical tips for using them in your websites.

Why footer for website?

Website footer development is a story of how to help the user and at the same time achieve the business goals of the client. You will be surprised again, but the visibility of footers is considered to be very high. How come?

Based on the data from 25 million web views, the Chartbeat content analytics and digital publishing insights team has conducted research on the impact of any content in real-time and has compiled a graph that proves the user’s distance from the heading of a web page.

Surprisingly, it turned out that there were no too long pages and too far removed headers and footers at all. Just have a look:

Website Footer: Best Practices to Apply & Worst to Avoid 18
Retrieved from Chartbeat

Anyway, website footers are an integral part of any full-fledged website, and you have to deal with it while building your platforms for the most sophisticated users.  That’s where website footer best practices will come in handy.

What elements to be placed in the footer of the site?

Developing the optimal footer for a website isn’t always a top priority for a web designer. Given that the footer is at the very bottom of a web page, it’s easy to assume that most website visitors will hardly notice it in the end, and therefore not all developers pay enough attention to it. And that’s too bad because it pays. The footer is actually a very important part of any website UX.

Moreover, some of them go down at once to find what they need extra fast (social media buttons, contacts, awards, testimonials, addressees, or other business notices) so, never give up or underestimate the meaning of the website footer from the start.

About 70% of visitors can scroll to the footer, and about 25% of visitors will always scroll to the bottom.

A visitor who scrolls to the very bottom of a site is certainly looking for more information. This means that you have to provide them with this information in an intuitive way. Therefore, pay attention to potentially required elements that should be added in the footer of every page on your site as the best practice html website footer.

Most popular footer elements

You may include most of the following elements in the footer or just a few that you would like to emphasize. Do it wisely not to overdo it because your UX is still the key. The list of the most common elements that every site visitor expects to find in the footer may be:

  • Address (with a map)
  • Clear Call to Action button (for order, contact, donation, subscription, etc.)
  • Embedded video (company explainer/promo/demo video, etc.)
  • Guarantees
  • Scheduled events
  • Icons with links to social media profiles
  • Copyright information
  • Contact information (phone, email, etc.)
  • Logos or branding images
  • Mini image galleries
  • Navigation links (main menu items, tags)
  • Awards, certificates, gratitude
  • Reviews/Testimonials
  • The search field on the site
  • Link to popular topics and/or recent blog posts
  • Links to sitemap, privacy policy, terms of use, etc.
  • Login form for participants
  • Newsletter subscription form and so much more.

Needless to say that do not try to place absolutely all of these elements in the footer. Instead, choose only a few essential elements, emphasizing the main message you want to convey to your visitors. Let common sense be the key leveler of your UX design solutions.

Website Footer: Best Practices to Apply & Worst to Avoid 19
Discover more design Cases

Website footer: elements to avoid

Of course, there are many advanced technologies to try as best practices for creating and filling in the website footer spaces. It’s better to be clean and careful as they may affect your UX and the overall website aesthetics.

And of course, there are some things that should never be done, varies in the project specifics and other factors. Things to avoid:

Menus in footer

Placing the entire menu in the footer is a decision that requires great care. If your web pages are too long and the impact of your navigation might be lost when users reach your footer, then keeping the entire menu at the bottom is helpful.

However, if you have shorter web pages and/or many items on the main menu, this practice will only frustrate your website users.

Broken links

Shit happens but beware of broken and empty links.  Double-check everything. You don’t want users to click on an element and then navigate to a 404. Likewise, you don’t want them to click on a link that does nothing. Make sure all the links inserted are accurate and updated.

Too wide footers

Choosing a footer that takes up a lot of space is decisive. It gets even more difficult when you make your sites mobile-responsive. You wouldn’t want people to keep scrolling through the footer praying that this is over. Make sure the footer is optimized for mobile devices (you may need to remove some links or render them more compact).

Taking users away

Interlinking issues are a side effect that may occur even to a well-thought UX. People from Bootcamp say that if you lose your users as they interact with your footer, it definitely won’t help your UX. Make sure all external and internal links open in a new tab. If the link opens in the same tab, make sure users log out or return to your home web page.

Endless scrolling

If you have a footer on a website, adding infinite scrolling doesn’t make sense. The point of the footer is to allow the users to find it and access the information needed. If the footer isn’t even visible, or it scrolls all day and night without any reason, then it shouldn’t be there at all.

 Designers checklist

Website footer design best practices will hint at what’s good or what’s wrong with your footer. Of course, opinions may vary, but the leading UX design principles remain human-centricity and make decisions out of common sense. Thus, some principles are impossible to avoid:

  • Make sure the links in the footer are not empty or broken and lead to the right data.
  • The footer should match the overall theme of the website.
  • Make sure the elements are clear and unambiguous.
  • The terms used should give an idea of ​​what is being discussed even before users click on them.
  • If you have a lot of information in your footer, try grouping some of the items into categories.
  • Make your designs simple, readable, and aesthetically pleasing for your users to work with.
  • Mind the interlinking and the website SEO.

Put in the footer everything the user is looking for and provide a positive user experience with no obstacles.

Conclusion

A website footer is a crucial element of any website that needs to be given enough attention. Place in your footer the optimal amount of information that your site visitors expect to find there. And it is clear that there are many methods, and the set of possible information elements is really large. Though, make sure you pick what’s aligned with your website logic and common sense, with your end-user in mind.

Feel free to add best practices for the website footer in the comments below.


Update:

Want to estimate a project?

Just tell us about your project, what are your goals, and let's start.

Website Footer: Best Practices to Apply & Worst to Avoid 23 Website Footer: Best Practices to Apply & Worst to Avoid 24 Website Footer: Best Practices to Apply & Worst to Avoid 25 Website Footer: Best Practices to Apply & Worst to Avoid 26 Website Footer: Best Practices to Apply & Worst to Avoid 27