Ten Fat Footers: How to Make Good Use of that Space at the End of the Page

Tweet

Photographic FooterNot so long ago, there was a concern that everything of importance on your web site should appear “above the fold.” Crossing over from the world of newspaper and graphic design, the “above the fold” concept is that an important article or photograph should always appear on the upper half of the front page of a newspaper or in the case of a web site, on the part of the page you can see without scrolling. By extension, this meant that you should only put the less important (or less interesting) stuff at the bottom of the page, to the area where scrolling is required. So that’s why on lots of web sites you see have teeny-tiny text links to things like privacy policies, terms and conditions and disclaimers.

However, many experts now consider “above the fold” to be irrelevant in web design as so many web users are used to scrolling without even thinking about it. It still makes sense to put your important story or article at the top of the page, but as users often scroll down to the bottom, why not put something cool, useful and interesting down there, too?

Many blog themes offer widgetized footer sections and this has pushed the boat out in terms of what people are putting in their web site footers. Some of the most popular items to be found include:

  • Sitemaps
  • Twitter tweets
  • Flickr thumbnails
  • Recent News/Blog posts
  • Advertising
  • RSS feeds
  • Contact Forms
  • Search
  • About Me
  • Author’s Photograph

It seems like pretty much anything goes, so maybe it’s time to re-evaluate that space at the bottom of your page. So for your design inspiration, here are ten web sites making good use of their footers with eye-catching design and useful functionality.

Noded’s footer gives plenty of information about the founders as well as some nice photography.

noded

CSS Tricks shows a little bit about the author Chris Coyier and his projects, and his latest tweet.

CSSTricks

Colorful and textured, ipremidieci has a huge fat footer.

ipremidieci

Tickerville lets you know you’ve reached the end of the line.

Tickerville

Hutchhouse’s footer is clean and full of site-related information. They’ve also included speech bubbles linking to their blog, twitter and last fm.

HutchHouse

Ectomachine’s somewhat grungy look continues into the footer which looks like it’s been held together by safety pins.

Celebrity Sitemap / Celebrity List

Ectomachine

NGen Works footer is big and bold with links to their fun stuff whilst showing off some of their clients..

Ngen

The SquareFactor site is built on one page and when you hit the bottom you can see the full navigation, their contact details and importantly a contact form with a monster face drawn into it.

SquareFactor

With a beautiful background illustration and a clear, clean footer layout, Fresh Coloring is easy on the eye.

FreshColoring

David Hellman’s got a little living room at the bottom of his site.

DavidHellman

Do you use the footer area on your web site for more than copyright information? What other sites have you liked with big footers?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Benji+

    Thank you Jennifer. Awesome post. I love footers and how many cool things you can do with them. It would be interesting to know whether sites with contact forms at the bottom get more submissions, or whether people just get used to it and ignore the forms.
    One site whose footer I enjoy is issuu.com, because you can ask a question right there and it gets results from their Get Satisfaction account via ajax.
    I also like the footer on mailchimp.com’s homepage, mainly because it clearly labels the business links as “Boring Stuff”, which somehow makes it more interesting. Of course, they also have a signup for their newsletter and a twittermonial.
    Anyway, great inpiration. I love the living room one.

  • Pierre

    Hi

    Really good designs. If you use the footer site wide then make sure you place it in an iframe and block google from seeing that page. A nofollow is not enough. Link Juice is still divided into all the on page links that in turn dilutes linking to your priority/targeted pages. Unfortunate move by Google and i was wondering what affect this will have in the use of fat footers. They still have a very good functional aspect but if not treated right from an SEO perspective can have a negative impact.

    Like to hear your thoughts.

    Cheers

  • crazywebfoo

    Great footers should answer the question, “Where to next?”

    I think this area of the page is often over looked and under utilized. Thanks for sharing such great examples.

    Want to see how we do footers? Visit http://crazywebfoo.com/

  • TheMonk

    I don’t consider these footers, when you have that much content in your “footer” it really is part of the overall page design. There are so many content items that could be in the top of the information hiearchy that to me these aren’t really footers.

    A footer is relegated to information such as copyrights, contact links etc in my opinion. I see this more as a part of the overall design of the page.

  • Galen

    Thanks again Jennifer for a creative and helpful article. Here is a great example of a “fat footer” that is used well.

    newsboys.com

  • http://www.bestwebimage.com camp185

    I would have to agree with The Monk on this one. Those are not footers, but features. I think they are nice for overall site design though. Just because less than half your visitors never get there doesn’t mean you should stop designing.

    Pierre also has a valid point, and maybe a better solution is to keep the design element, but limit all links. When a visitor is that far down, they are no longer navigating, they are searching.

  • http://icoland.com/ glenngould

    Beautiful footers, thanks for these.

  • nick y

    @themonk:

    I totally agree with you. By cramming a bunch of crap in a div named footer doesn’t mean that it is a footer. I believe if you are going to be putting things like this then it is part of the overall page design. At most I would call it integrating the content and footer, so that it is subtle enough but people will see it more.

  • http://icoland.com/ glenngould

    Just remembered that I do have a fat footer too, when I clicked at my username. Now I’m not sure these should be named footers, since there is a ‘real’ footer in the footer. Well then I’m calling these ‘tail’ (like ‘header’) ;)

  • http://rmwpublishing.net.au/ mountainash

    While our footer isn’t as fat as some, we made use of the fact that it’s not normally instantly in view when the user hits the page, allowing us to do some AJAX calls to external sites (like slow Yahoo! Pipes) to pull in content and hopefully it will be loaded before the user has scrolled down.

    eg. http://rmwpublishing.net.au/all-in-1

  • 2recker

    I to have a fat footer and a header and an index and yes not another online auction site. Its your turn to signup to my site today.

  • Deepu Balan

    Really interesting post Jennifer, thanks for sharing this…
    I was actually looking for some design ideas to improve my footer part…

    -Deepu
    http://www.deepubalan.com

  • Niubi

    I’m not so sure that footers need to be sexed up – after all, they traditionally provide links to what I think of as the ‘boring’ parts of a website – Terms and Conditions, a weak About Us page, and anything else legal/not directly the reason for visiting the website in the first place. Dubli.com pretty much sums up how I think a footer should look, and it fulfills its function admirably.

  • Tejas

    I respectfully disagree. If you notice, most of the fat and beautiful footers are from those sites who are not so much concerned about SEO as lot of others. They need not be found on net through search terms but instead by the rich content they provide.

    Footer gives a designer the space to show some personality in a time when web trends are predicted on almost every other design blog and all the websites end up looking clones of each other. Footer is the place where they have the opportunity to go crazy, add some individuality – of course keeping it in sync with rest of the site.

    It doesn’t have to be boring. And that’s the policy we have at http://www.footerama.com – the footer design gallery.