A few years ago, the large website footer – also called the “fat footer” – emerged as a trend and quickly took off. Prior to its emergence as an important navigational tool, the humble footer was mostly a place to stick a copyright line, various logos and seals, and links to “other stuff.” The footer was the website basement, where things without a home were stashed.
But done right, a website footer can be a workhorse, helping users find their way through complex content, positioning your brand, reaching out to specific markets, and even serving as primary navigation.
The effective footer starting point
Certain elements belong in a website footer no matter how you choose to treat it, because this is where web users over time have been trained to look for them. Because the footer appears on every screen, the user has a persistent means of finding all of these items while moving around the site. Basics to include are:
- Company address
- Preferred contact method
- Opt-in email sign-up mechanism
- Social icons
Depending on the nature of the business, the footer is also the place to add connections to:
- Payment and delivery information
- Advertise with us
- Work for us
Side note: Some websites use no footer at all, allowing the site page to go on and on and on with no end. Personally, I don’t recommend this approach as it ignores the legions of users who are looking for the items listed above in a footer that never appears.
Second side note: This article focuses on footers for public websites. Footers for intranet sites and web-based business applications are entirely different kettles of fish and a subject for a different article.
Five website footer approaches that work.
Once you’ve accounted for the basics, it’s time to think about how else you want the footer to function. There is no one best method for footer planning as the best approach is entirely specific to the content you have to wrangle, the size of your internet footprint, and the characteristics of your users. The key is to determine the role you want your footer to play. There are many approaches, so I’ve chosen just a few to discuss here.
1. Website footer as another way to find what’s in the global navigation. A fat footer can replace or augment a drop-down mega menu. Dropdown mega menus are commonly used when there are too many choices to display in the master, overt navigation set. Using a fat footer to display all of the topics available within each content section without clicking helps a user who has scrolled all the way down and has still not found what they may be looking for. This approach works best on sites that are not overly huge – about a dozen topic headings, with no more than 5 or 6 links aligned to each, is about the maximum you can go without creating a gray mess.
2. Website footer as a method for wrangling external links. Certain circumstances call for the inclusion of many links to external sites. Once you have attracted a user to your site, you don’t want to encourage them to leave. So, these links are often best contained in the footer, where they should be clearly indicated as links to other places. Many organizations own multiple websites or employ third-party tools their users may need. The fat footer can contain all of these way-finders in one useful location. Just make sure to use clear, explanatory headers so users know what to expect.
3. Website footer as a replacement for an HTML site map. If your site is small enough, a footer can function as a complete site map with a link to every page on the site. This approach allows you to keep your master navigation clean and simple while displaying everything you have to offer at the bottom of the scroll. However, this should not be confused with a replacement for an XML site map, which you will still need for search engines.
4. Website footer as a guide for specific audience targets to self-select. In cases where a website is organized by topic, but serves several discrete types of users, a fat footer can direct users who represent specific personas to the content most relevant to their needs. Say you have prospective members, current members of Plan A, and current members of Plan B. Each of these personas has different needs. Or, perhaps you have current customers, prospective customers, and distributors. Or, you serve Industry A, Industry B, and Industry C, each in a different way. A fat footer organized into the buckets most likely to be needed by each of your audiences can add clarity and quick access to someone who does not want to poke around by topic or isn’t sure where to look.
5. Website footer as a means of displaying buried content based on search volume. Study your site analytics. What do users search for most frequently? Are they using search terms that indicate they are looking for something you have? Data can highlight high-demand content that’s buried. Consider adding links to this content in the footer, along with explanatory headers so users understand. What about fat footers in mobile?
My point of view is that it’s important to design for each device. The screen real estate between desktop and mobile is radically different. And the behavior of a mobile user differs significantly from that of a desktop user, even when it’s the same person. So, adhering to a strict mobile-first policy and simply scaling up can lead to a poor navigational experience once on desktop. See Raluca Budiu and Kara Pernice's thoughtful article for more on this topic.
Consider the role your footer plays before making decisions on how it should respond, or if it should respond.
In any case…
However you decide to organize a fat footer, it’s important to keep a few things in mind:
- A fat footer is not a fix for poor site architecture.
- The user comes first. Make sure your decisions are based on a firm understanding of the users’ goals, informed by user personas.
- Design is key: Remember to leave plenty of room around and between links in a footer, especially if it contains many choices. Keep “tap-ability” in mind rather that fretting too much about matching your footer spacing to spacing on the rest of the site.
- Don’t overload it with stuff. Then, we’re just back to the “footer as basement.”