We see footers every day, all over the internet. Sometimes they are huge sections, containing a lot of shortcuts to other pages and additional items like social widgets, contact forms and more, while other times they are just horizontal bands with a few links. But what makes a good footer and how do we actually decide how big our footer should be, and what information it must contain?
A fat footer is the term given to a website footer that can act as an additional navigation option for a webpage. There we put all important links, a sitemap of the website. Giving a lot of navigation options at the bottom of а page is also called a “safety net”—we hope that if the visitor is not interested in the content presented above, he might still get curious in what else we offer. That is why another definition of the fat footer is:
The online equivalent of that well-turned phrase: “Is there anything else we can help you with today?”
We tend to create a fat footer on pages which present general information about a brand or a service (a home page for example), where we assume that the visitor is still not sure what to discover next. In this case we should consider giving more links at the bottom of the page, to keep our guest on the website.
Here is a list of extra elements you can place in your fat footer:
Of course you can include much more, but it is better to be selective and give the visitors just enough to remind them that there is more they can explore on your website.
Let’s look at a few examples:
In this footer example we see a lot of options—the most important pages of the website are exposed here. They are organized in groups, with labels for each group, which helps visitors navigate. The problem here could be that the length of some of the links is too long, which makes them hard to scan quickly. Try using cleaner and more concise text links to improve usability.
The positive of this example is that the links are nicely organized and distinguished by labels which speak directly to the different target personas: evaluators, existing clients, web agencies representatives etc. This grouping approach helps visitors quickly scan trough the labels and find their positioning in the website.
Another example of a fat footer, directly from here at Progress, which includes: highlighted links with short descriptions, quick links, navigation options about the company and a CTA to a contact form. The footer is well organized and easy to scan. The hierarchy of the navigation options is obvious.
The slim footer, on other hand, is а compact and unobtrusive finish for our webpage. It contains only the information that most website visitors expect to see in this particular place:
If we assume that we have exposed the most important topics with further links in the content of a webpage, and we have provided the desired CTAs that point the user to the desired website journeys, then it is better to keep the footer simple to avoid confusion. By doing this we keep users away from any distractions.
Here is an example of one really compact footer. It contains only a couple of links, which users expect to always be able to find at the bottom of a webpage. Included are also some of the most important links from the top navigation.
If you are about to create a new website journey and you are wondering how to organize your footer, you might consider this checklist of questions before starting:
By asking yourself these questions—and considering any data you’ve collected about customer behavior to help answer them—you’ll be better prepared to build an engaging footer for your business.
UX Designer, Web Presence, Progress
Radost has 3+ years of experience in the field of website design, and recently turned her focus to UX and interaction design. She has a passion for and curiosity about user behavior, end-to-end experience and human-centered design.
Subscribe to get all the news, info and tutorials you need to build better business apps and sites
Copyright © 2019 Progress Software Corporation and/or its subsidiaries or affiliates.All Rights Reserved.
Progress, Telerik, Ipswitch, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.