Fat Footer Edit
Problem summary
The user needs to access a specific section or functionality of a site in a quick way regardless of hierarchy.
Example
Usage
- Use as a secondary navigation – never as the main navigation of a website.
- Use to shortcut an otherwise hierarchical structure of a website.
- Use when you have many sections of your website with possibly long section names.
- Use when you want the secondary navigation to fill the entiry width of the page.
- Use to show functionality that is important to all users regardless on what page they are visiting.
- Use to link to parts of a website that are more frequently used than others, but does not follow the hierarchical structure of the main navigation.
- Visually anchor the content of each page with a base consistent, substantial design element.
Solution
- Add the same footer on all pages of a website – with the same layout in the footer on all pages.
- Add links to frequently used section of your website, relevant links, recent news, signup forms to newsletters, links to RSS feeds, or the likes.
- Add functionality that is vital to the concept of your website.
Rationale
The footer appears on all pages of your website. By adding the functionality that is vital to the concept of your website directly in the footer, you first and foremost give your users easy access to this functionality. You also mold the usage pattern of your users, by placing shortcuts to the most important functionality of your site in a spot that is always the same.
By using Fat Footers, you provide the user with an easy and natural way of browsing to a new page and while staying on your website. The Fat Footer is placed at the bottom of a page: where the user ends up, once he or she has finished reading it. Here, the Fat Footer can provide an overview of your website and inspiration for the user to continue browsing. Such information is often lost in the situation where the user has browsed to the bottom of the page, as it has been common practice only to put such links at the top of a page.
More example images of the 'Fat Footer' pattern
This document is in version 2 and was last updated on Sep 2, 2009 by dave. The original author of the design pattern was Anders. Edit this pattern.
Related information
Collection
Related patterns
See it in action
Fat Footer has 6 comments
-
10 months ago
Rob
20 Mar 2009
I’ve been calling these “Sitemap Footers” because they often replace the function of the old “sitemap” link. These Fat Footers are also useful for covering ADA requirements.
-
9 months ago
jonathanpberger
27 Apr 2009
Derek Powazek has a great article about designing content-heavy footers. Worth a look: http://powazek.com/2005/09/000540.html
-
6 months ago
MDX
18 Jul 2009
These footers do make great sitemaps -as long as the site structure is not too large. Also, CTA like a newsletter signup can make a second appearance in the footer as well.
-
5 months ago
kungkk
27 Aug 2009
yeap, we call it sitemap footer instead of fat footer
-
3 months ago
Brp Web Design
26 Oct 2009
Nobody seems to use sitemaps. I personally love when I see a well structured footer with navigation.
-
3 months ago
mahalie
29 Oct 2009
Smashing Mag has a few articles on fat footers, here’s one:
http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-web-design/