Fat Footer Design Pattern

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.

More examples

sohtanaka.com
See all 84 example screenshots

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.

This article has been commented 7 times.

More examples of the Fat Footer pattern See all 84 example screenshots

121 0
Add to set
sohtanaka.com
1 0
Add to set
24 0
Add to set
31 0
Add to set
71 0
Add to set
webshots.com
20 0
Add to set
last.fm
11 0
Add to set
mint.com
10 0
Add to set
jasonsantamaria.com
See all 84 example screenshots

User Interface Design Patterns

Getting input
Navigation
Dealing with data
Social
Miscellaneous

Persuasive Design Patterns

Cognition
Game mechanics
Perception and memory
Feedback
Social

7 comments

  • 25076e2b67a240c91ad2faac32a538bf

    Rob on Mar 20, 2009
    Remove Edit

    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.

  • 6ef2341b57e5cd117a55475c275d6165

    MDX on Jul 18, 2009
    Remove Edit

    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.

  • C0cd42487c1001402a53cd2abb08f285

    kungkk on Aug 27, 2009
    Remove Edit

    yeap, we call it sitemap footer instead of fat footer

  • 425be2d55b2370f866f48d028fa83b45

    Brp Web Design on Oct 26, 2009
    Remove Edit

    Nobody seems to use sitemaps. I personally love when I see a well structured footer with navigation.

  • D41e28a8f9739bfeecb67f6aade51aba

    David Friend on Jun 10, 2010
    Remove Edit

    I like these fat footers and I want one. Anyone know where I can get the code? Or perhaps you want to design one for me for a stipend?

  • Fd1bb950d7f661f713ede9529fe67989

    Andy Wight on Jun 18, 2010
    Remove Edit

    I prefer not to refer to them as a “sitemap footer” as they are a departure from the hierarchical structure of the main navigation and often a subset of what I would normally show in a sitemap.

    There are scenarios on smaller sites where the footer ends up being equivalent to the sitemap but I think there is a difference between exposing select items in the footer and the full breadth that a sitemap shoots for.

  • 49a41210571c390aeaaa87d7424e9075

    David on Jul 14, 2010
    Remove Edit

    Fully aree with previous comment. Sitemaps and fat footers are just different. Another issue is that for small websites could be almost equal. The definition for fat footers on this page is clear.

Comments have been closed