skinyourscreen.com

Big Fat Footers

Remember when footers in websites used to be tiny text with links to XHTML and CSS validation and some legal disclaimers? It seems lately that more and more sites are switching a decent chunk of site navigation to expanded, multi-column footers. They range from banal, minimalistic, functionalist (musiciansfriend.com) to highly graphical. In many cases the footer becomes a graphical signature of equal importance to the site headers at the top (webdesignerwall.com and blog.spoongraphics.co.uk, notably), stylistic punctuation to your browsing experience.

Big fat footers are great for all those secondary links you wish you could shove into a site’s principal navigation scheme but just don’t have space for. Site APIs, disclaimers, RSS feed links, help, and legal information are all great candidates for a footer. A multi-column layout makes these visually organized and easier to understand. To the right is the Musicians’s Friend’s multi-column footer. Although not beautiful to look at, it does provide tiered navigation that would take a page by itself if employed as a vertical list.

A similar, but more stylized, example is Digg.com . It employs a LOT of links crammed into a confined space while still retaining the character and readability of the overall site. In addition to the regular mix of About Us, Navigation and Help categories of links, Digg has provided API Links and other social integration links which emphasize its overall purpose and provide developers with access to tools for Digg mashups. Further emphasizing the social nature of Digg, the right-most column is reserved for in-life Digg meet-ups and announcements with graphical emphasis.

Big fat footers have a secondary, unstated, purpose: they avoid link-outs. Specifically, they direct the reader back to other articles or content on your site, rather than directing them away.
Right is Revision3’s footer, which makes use of graphics and multiple columns, but most noticeably, links back to itself everywhere it can.

Dan Cederholm’s site, www.simplebits.com has one of my favorite big fat footer. It’s large but simple, elegant, but full of information. In it Dan manages to pack in a similar amount of links to other sites, even including his subtle own graphical touch. What’s interesting to me in this big fat footer is the space as much as the content: it’s very open, not cluttered like Digg’s, making it twice as easy to digest in a glance. The use of alternating subtle horizontal colors further subdivides the footer – a multi-column footer with multiple vertical layers.

Finally, the use of a big fat footer as the punctuating remarks of a designer are an incredible way to re-capture a reader’s attention after they’ve gone through the main contents of the page. Both Spoonographics and Web Designer Wall have very graphical multi-column footers that provide visual interest as well as redirect users back to other articles in their respective sites. They demonstrate that a designers touch applies to ALL aspects of a web-page, from an eye-catching header down to a thoughtful footer.

So what’s the best recipe for a big fat footer? I hope this article demonstrates there is no singular way to approach a big-fat footer. Here are a few principles to keep in mind, however:

1. Organization – Use headers to organize lists of similar or related links.
2. Multiple-columns – They condense many small lists into a horizontal layout that’s easy to read through.
3. Miscellanea – Big fat footers make great places to stick all those accessory links, such as legal info, about statements, or APIs that would simply clog the main site navigation. They’re also an easy way to present social data, such as Flickr pics.
4. Style – Make it pretty, and people will be drawn to and use it.