How to Build a Footer That Doesn’t Stink

As the first thing visitors see, home pages and headers often steal the design spotlight.

But above-the-fold thinking neglects the natural flow of vertical page layout. What happens when people reach the end of a page?

You can bet that a simple copyright statement won’t hold visitors’ attention, but many pages are designed with the expectation that people will find their way… or so we assume.

The bottom of a page is not the end of a website. An informative, compelling footer is the natural place to lead people to more information within the site rather than wandering aimlessly.

Read more about the trends and innovations that follow page content and answer the unspoken question, where to from here?

The ongoing problem of how to hold people’s attention can be addressed in many ways: eye-popping graphics, clever use of negative space, snappy typography and well-written text.

But all too often people are left hanging when they scroll to the bottom of the page. Should they scroll back up? Visit another website? Close the tab?

Where the body content ends, the footer takes over.

diagram showing how readers' attention naturally wanders to the  footer

The footer is a distinct collection of content that concludes every page of a website. Typically, it contains a copyright statement, a link to the home page and either an email link or a link to the contact page.

Footers almost always span the width of the page. Beyond this, they exhibit a variety of styles.

Even though it doesn’t offer many links, Dishizzle makes it hard to miss the large icons at the bottom of its website. With its search box and friendly type, this footer is both legible and useful.

screenshot of dishizzle's footer

Compare it to the footer on 43 Folders, which takes the opposite approach. A handful of concise sentences explains the website’s purpose, describes its owner and links to its web host. After a thorough copyright statement, the page ends.

screenshot of the 43 folder's footer

Sometimes footers merely repeat the navigation bar. It’s a natural fit: once the reader has read or skimmed the page, they come upon a list of interesting links to other pages, rather than be left to wander.

But those links are often just that: bits of clickable text arranged in a thin, underdeveloped strip. While this may work for websites that have little content, a serious website isn’t complete without a well-planned footer.

A footer is not just an appendage. It’s a good host.

 

Unsung Stewards

The bottom may seem an unlikely place to put vital information, but footers are ideal real estate for navigation and important features because visitors naturally move in that direction as they scroll down.

Like a good host, an elaborate footer presents different kinds of information that reflect the nature, and content, of the website.

A footer can play many roles on a website. The trick is deciding where guests should go when they’re done with a page. A good host lets their guests enjoy themselves and steps in only when the guests begin to wonder “What’s next?”

Footers as Site Maps

While the header presents links to major sections of the website, the footer can delve into details. Site map-based footers, which are ideal for websites that store content in many sections and sub-sections, reflect the scale and concerns of a website.

The White House is a good example. Its footer presents the website as six sections, each with as few as 6 and as many as 23 links.

Deliberately simple, the keyword links can be absorbed at a glance by guests scanning for topics of interest. Almost as tall as it is wide, the footer is hard to miss, but its content doesn’t compete with the page above.

screenshot of the white house's footer


Footers as Advertisements

Especially if the website sells something—a product, service or membership—the footer is a second chance to incite visitors to act. The end of the page is a great place to remind guests of the benefits of the product or service being offered. Repeating this same message on every page drives the point home.

Mail Chimp takes advantage of this space to repeat its sales pitch: 1) free templates, 2) a comparison of its service to that of competitors and 3) flexible pricing.

screenshot of mail chimp's footer

Expression Engine lists some of these things, too, and also links to the help section and other information that prospective customers would want.

screenshot of expression engine's footer

Unlike plain site maps, footers that advertise must be more persuasive than informative. They should give guests incentives to buy and lead to pages that enable them to act.


Footers as Character Studies

While a personal website would address topics that interest its owner, the footer could describe the person behind it. Whose website is this? What is he or she like? What else do they do?

Few websites do this better than the one of graphic designer Jason Santa Maria, whose footer could be a page unto itself.

screenshot of the Jason Santa Maria's footer

Meanwhile, the footer of standards expert Jeffery Zeldman’s contains visual—and even photographic—snippets of projects he is involved with or interested in.

screenshot of Jeffrey Zeldman's footer


Footer as Colophon

A footer can contain information about how or why the website was built. It could:

  • Reiterate the website’s mission or tagline.
  • Say which CMS or ISP is being used.
  • Declare that the page has valid (X)HTML and CSS and complies with certain accessibility standards.

 

Variation Based on Context

The footer should generally stay consistent throughout the website. Page-specific information usually isn’t warranted. But complicated websites can bend the rules.

The playful icons on IBM’s website provide a friendlier, less corporate way to navigate pages. But these icons appear only in the “Smarter Planet” section.

screenshot of the ibm's smarter planet footer

IBM’s regular footer looks like this:

screenshot of the ibm's default footer

Likewise, the links in Apple’s site map-based footer varies according to the section it appears in.

screenshot of the Apple's Mac footer

Above, the footer in the Mac section. Below, the one for iPods.

screenshot of the Apple's iPod footer

None of these roles are exclusive. Elaborate footers can incorporate site maps, highlights, updates, credentials, search tools and more. Below, BustedTees offers ways to stay current, browse and submit feedback.

screenshot of busted tee's footer

Functional doesn’t always translate into compelling, though. CNN’s footer includes a search tool, local weather, a site map, legalese and links to its content in other languages. Useful, but dry. The most interesting visual element is the red strip.

screenshot of CNN's footer

Although it fits the tone of the website, CNN’s footer is merely designed not to compete with the page above.

 

How to Craft a Useful Footer

Generally, a web page invites people to act or to learn. After reading a news article or blog post, people walk away with a new idea or set of facts. Product pages educate visitors on the items being sold. Pages with weather information affect how people dress. In each case, a person has changed somehow by the time they reach the bottom of the page. And there they find the footer.

So, the end of the page is a natural place to put two things: tools by which visitors can act on what they have just learned; and calls to action.

Footers have a tough job. People ignore them out of habit; they instinctively scroll to the top or click away. That’s why good footers must be designed not as afterthoughts but as if they were pages themselves.

Creating a useful footer begins with asking certain questions:

  • What content on my website do I want to emphasize?
    A good footer guides guests to those pages.
  • What else would interest visitors?
    A good footer attracts guests with information they would like. Visitors who scroll all the way to the bottom were likely engaged by the page’s content. Links to related information will keep them on the website.
  • What content would benefit visitors the most?
    Like a good host, its job is to be helpful. The footer rewards guests for reaching the end of the page with, if possible, freebies or entertainment or, better yet, frequently requested information. If the website is for a bricks-and-mortar business, the footer could contain a simple map to the location.
  • What would epitomize the website’s character and style?
    Like a good conclusion, the footer sums up the nature of the website: its topic, attitude and theme. In this way, the footer is similar to the header, which introduces the website to newcomers.

T-shirt seller Threadless answers many questions in its keyword-rich footer:

diagram of questions and answers at threadless

Once you’ve decided what to put in your footer, don’t neglect presentation.

  • Make it big.
    A token footer is thin, just tall enough to admit one line of text. An attention-grabbing footer is substantial. A rule of thumb is to make the footer’s height at least a quarter of its width. For example, if the page is 960 pixels wide, then the footer should be at least 240 pixels tall.
  • Set it apart.
    Give the footer a distinct boundary, and make sure it spans the width of the page. Guests should see where the body ends and the footer begins.
  • Give it style.
    A footer should carry the theme of the website, in style, color scheme and typography. If possible, it should reuse visual elements from elsewhere on the website. But it shouldn’t detract from the page’s content.
  • Make it worthwhile.
    The ideal footer is strong enough to warrant the visitor’s attention. It offers interesting content to peruse in an attractive package—like any important page.

The Guardian isn’t afraid to play up its footer. Eye-catching graphics laid between brand-matching color bars tell visitors that this is content, not just fine print.

screenshot the guardian's footer

Silverback has few features in its footer but plenty of style. It offers an easy-to-read experience that restates the website’s purpose and encourages visitors to receive updates via its newsletter.

screenshot silverback's footer

While Travelocity packs 72 links into its footer, a lack of visual hierarchy or clear layout makes it hard to take seriously. More doesn’t always mean better.

screenshot travelocity's footer

All of these criteria may sound like a tall order, but there are two easy approaches to creating a good footer.


Approach #1: Create a Miniature Home Page

The easiest way to create a helpful footer is to recap the website’s purpose and highlights. Look at your home page for inspiration.

Typically, the home page is a cross between a table of contents and a news ticker, giving guests an overview of the website and the latest information.

A footer need not include every element from the home page. If the home page showcases 10 best-selling products and the 3 most recent blog posts, then the footer could highlight the top 5 products and 1 post, with links to more of each. A smaller version of the website’s logo would also be appropriate.

Think of the footer as a table of contents that conveniently appears when visitors need it most: when they’re wondering what’s next.

MacTalk Australia has a relatively small header, which leaves more room for content and advertising above the fold. Nearly twice as tall as the header, the content-rich footer expands on the simple header’s navigation and introduction by spelling out how much content each category has and which tags are most popular. Both the header and footer have RSS and Twitter icons, and the footer includes a newsletter sign-up form—plus two other RSS and Twitter links just below the copyright statement.

diagram showing common elements in Mac Talk's header and footer

The New York Times footer includes the latest headlines and photos from various sections.

screenshot of the New York Time's footer


Approach #2: Provide Supplementary Content

Footers can do the opposite of serving as a miniature home page by offering content not found anywhere else on the website.

Bits of supplementary content that can’t fill pages on their own can find a home in the footer. Unlike the miniature home page, a supplementary footer can contain links to other websites, as long as they’re informative or beneficial to the guest.

But don’t treat the footer as a dumping ground for stuff that doesn’t fit anywhere else. Like any proper page, a footer should inform, persuade, entertain or do all three. The key is to find worthwhile information that supports the website’s overall theme, not any one particular page.

Komodo Media’s footer includes eye-catching links to what the owner is listening to on Last.fm.

screenshot of the Komodo Media's footer

Some websites, such as Veer, point to their family of websites. Corporations can promote their brands simply by cross-linking them to each other.

screenshot of veer's footer


Other Approaches

If your website has a substantial sidebar, try rearranging it as a footer. Although this will change the website’s layout drastically, moving secondary information to the bottom of the page might remove distractions from the primary information.

diagram showing how to change a sidebar into a footer

 

On Your Way

The golden rule of footers is never leave guests to their own devices.

Footers are hosts who present their guests with options. They are natural stepping stones across the website, enticing guests to click to other pages—or related websites.

You can learn a lot about a website’s priorities from the contents of the footer. What’s in your footer right now? You do have one, right? Because a website without a footer is worse than an article without an


Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.


  • http://www.designlint.com Zach

    Never want to forget to give attention to your footer. Great post!

  • http://gregorydougherty.com Greg

    I wish there would’ve been a few more footers I haven’t seen before (ie: not Apple and the White House), however this was still a really great post. Could be very useful for some :)

  • http://hamroawaaz.com Web Guru

    Web site footers are also important part of a website… they should also be taken proper care of at all times…

  • http://www.addictivehobby.com Billy

    Interesting reading indeed- hopefully my footer doesn’t stink ?

  • http://trnunes.com Tim

    Yep, great post, and likely an oft-overlooked piece of Web real estate!

  • http://ansh.thisisitonline.info Amberly | Web Designer

    Nice.. Silverback footer looks really nice.

  • http://www.cult-f.net/ KOt

    Thank you for great post. It will help me with footer for my blog.

  • http://twitter.com/Josso000 Johan Jensen

    I find it amusing that your own footer only contains an image that gets the users attention but has nothing else to show. :p

    • Adam

      My sentiments exactly… a great post here, most of which I agree with but – practice what you preach??

    • http://www.webdesignerdepot.com Walter

      see comments #15 and #21

  • //CY

    Nice info, Im trying to desgn for mobile, and this is maybe eaven more important there (can be a little tight) but then Im just at testing yet (doing it for an intranet)

  • http://designinformer.com Design Informer

    Nice post. I definitely agree that the footer is very important to a design. Usually, what people remember about our site the most is the footer as it’s usually the last thing they see before leaving the website.

    I’ve also recently redesigned my site as well and I’ve paid carefuly attention when designing the footer. Check out my large footer.

    http://designinformer.com/#footer-wrapper

    Anyway, great article Ben! Well researched and shows plenty of nice examples.

  • pesho

    Thanks 4 sharing
    great Post!!

  • http://svendigital.co.za/ Sven Digital Design

    Nice article – really nice. I think a lot of us tend to hack on a footer as an afterthought.

    Where does WDD’s footer fit in, I wonder? ;)

  • http://sexidesign.com Melody

    Just goes to show you how important the footer has become in design…definitely has me thinking about different options for my footer design..

  • http://www.chrisjanus.net Chris Janus

    it’s amazing to see how the importance and application of footers has progressed over recent years. good article – thank you!

  • http://www.webdesignerdepot.com Walter

    WDD uses its main content area (in between posts) to feature related posts, comments and other information. It’s just a different approach :)

  • http://www.wlgaiennie.com Mental Graffiti

    I’m feeling inspired already to stop neglecting footers. My latest site makes use of footers as advertisements.

  • http://javatutor.net Java developer

    Very useful. I think I will use it in my project

    • Developer

      I am thinking of using it too.

  • http://www.dietmarhartje.de Dietmar

    Thanx for this article. I always have trouble with designing a good footer. I hope i consider your article before designing a new one!

  • Joe

    Great article! Well researched with good ideas which are backed up with examples and graphics.

    I often read great articles on these sites about navigation, footers, site maps etc… and afterwards I am often keen to see what the site has done themselves….

    In this case, i was amused to find the footer on this site a minimalist, unstyled 4 list navigation, no extra content just a lovely graphic.

    Is this a “do as I say not what I do” moment?

    Joe

  • Shopper

    interesting how liberal left designers are .. could be worldliness.. anyways thanks for the examples!

  • http://benthinkin.net Ben Gremillion

    While footers can be great tools, they’re not requirements. Think of a footer as a solution. Instead of, “what do we put in the footer?” ask “here’s the content we want on a page. What’s the best way to arrange it?” An elaborate footer might be one of several answers.

    Webdesigner Depot’s character-rich footer may be light on links, but as @walter said, that’s because WDD decided to place their content elsewhere.

  • http://cssah.blogspot.com/ cssah

    Awesome information that will help me for designing my footer cuz it need every word you talk .

  • http://webtolerant.com Amey

    Great inspiration for me. Gave me some ideas for a new design I am creating.

  • http://www.blueprintgroupe.com Blueprint Website Design

    Nice article with a wide variety of footer design solutions. I sometimes struggle with designing the footer for design purposes, function, or just going minimalistic with basic info or a comnination of the above. For example your footer, great design with minimalistic functionality. Sometime people don’t want to be forcefed more options and advertisements.

  • http://www.insidethewebb.com/ Inside the Webb

    This can actually be the cause of a lot of debate. I would say a footer really needs to match the whole theme of the website or blog you’re adding it on. It shouldn’t just be a collection of links slapped at the bottom of the page, adding some design and spacing goes a long way.

  • http://www.studioweber.com Alex Flueras

    Great article. It all depends on your layout and the site features.

  • http://blog.alchemycode.pl AlchemyCode

    Nice article :) I’ll make sure that footers in my projects don’t stink :D

  • http://www.creatusdesign.nl/ Gert van den Brink

    Great article. Indead is the footer of the site as important as any other part of your website, and it is a good way to help people guide themself through the website

  • http://www.musings.it Federica Sibella

    Great points thanks! Usually when we arrive to the footer design we think we’re done ;-) but we’re not! A beautifully designed footer is the impression you leave to your visitor, better to give some more attention to its design: you’re right.

  • http://blog.kamarkecil.com Arif R.

    it’s so nice, inspire me. thank you!

  • http://www.omemedia.com OmeMedia

    Great post! Will start working on my footer immediately! :-)

  • http://webylife.com Nikunj Tamboli

    Really Nice article. I am planning to design customized footer this will help for sure

  • http://stephenwilsondesign.com Stephen Wilson

    Nice post, thank you. Here’s a useful article on footer link optimisation by SEOmoz http://www.seomoz.org/blog/footer-link-optimization-for-search-engines-user-experience

  • http://www.webdesigner-michigan.com Kevin Mist

    Thanks for the inspiration. As designer we are always looking for areas to improve and I think footers are a good choice. I know I have to work on improving my footer designs and I think this will push me in that direction.

  • http://www.successmanual.com Ricardo

    Thx for the informative. In my limited experience, I have come to realize that content is king above all else and this is another way of exploiting that principle to further generate traffic and greatly enhance the viewer’s overall experience with the site. Great work.

  • http://www.creativeindividual.co.uk Laura

    This was an interesting read. Was great to see some examples of footers that really work well – really helps back up what Ben was explaining in the article. Although I agree that design-trends are definitely changing to encourage better use of the footer space – I personally don’t feel that the footer NEEDS to contain items such as search boxes, social-networking links, additional site links or maps, etc. if they are working well elsewhere in the site, but I do agree that they do lend themselves very nicely for such things. And @Billy, I really like your footer, I think its really well laid out and planned. – good job.

  • http://www.visualizermagazine.com/ Görsel

    Great article. Thanx for sharing.

  • http://www.kaplang.com/blog Kaplang

    wow cool post, I need to give my own footer some tlc :)

  • http://random-pixels.com Andrei

    Awesome! i love when i see a nicely built footer. if only all customers would agree on this approach

  • http://www.fettesps.com/ FettesPS

    Practice what you preach! Your footer is about the most horrifying one I’ve ever seen. All the links crammed to the left 5% and the other 95% being some useless cluttered mosaic.

    • http://www.webdesignerdepot.com Walter

      @FettesPS:

      WDD’s footer has some of the same information appearing on the right sidebar of the blog, that’s why it’s so short.

      Please note that WDD is a multi-author blog. We have many different opinions and ways of thinking and that’s all good and helps the community grow and explore all possibilities.

      That being said, not every article that I post here will match my personal vision for how things should be done for this particular blog.

      I use some of the principles that are discussed in the articles, but I also bend the rules and try my own ideas.

      I strongly encourage you to do the same. At not point, we’re trying to build an army of designer robots and suggest you learn to pick what works for you and your websites and ignore the rest.

      Our articles are not meant to be used as ‘recipes’ that you just follow to build your websites. Think and decide for yourself what works for you and your particular situation.

      Thanks.

  • http://glejak.pl/forum/ moto_kate

    Cool article, great piece of advice, thanks. I would love to read a series of similar posts, maybe?

  • http://www.e11world.com e11world

    I’m working on a footer for a site and I’m including Twitter tweets (2-3), subscribe, footer nav, friends and favorites, and copyrights info.

  • http://www.ukpb.co.uk/ Buy My House

    Very prolific and dazzling tips and knowledge has been given, really it is very useful and unique for me thanks for sharing with me.

  • http://www.webtasarimsitesi.com wt

    very cool thanks.

  • http://www.dharne.com/website_design.php Dharne Web Design

    Gives a completely different perspective on the often ignored footer. The above examples are a must know for consideration in any website design.

  • http://www.footerama.com tejas

    Footers are sure becoming an extension of the designer’s personality. Huge is in. Footer designs still continue to pack classic info like sitemap and navigation links, but major change is in how illustration is used to set it apart or blend it well into the page design.

  • K Tran

    Excellent post!

  • http://www.crearedesign.co.uk Anna Green

    I like to see a bit of movement in a footer, it can help to draw the eye down the page and remind the viewer what the business motives are. Careful placement of calls to action can almost predetermine where a potential client will go next on your website.

  • http://papimedia.com Joe

    Footers have been a pain in my a$$ in the past. I appreciate your great post!

  • http://www.squiders.com Web Design Kent

    I’ve been guilty of neglecting my footers, I promise to show more love to them!

  • http://www.seniorwebdesigner.com Mohammed Alaa

    Woww this is amazing a pretty nice approach

  • http://webmaren.com Sam

    Noticed as I was reading through that the ExpressionEngine link points to MailChimp. Just a friendly heads-up.

    Great article, too. I’ve never thought about the footer too much because I’m used to hitting the “Home” key and using the main navigation items, but I could see many users who don’t think that way and would feel a little lost at an underdeveloped footer.

  • http://www.muhabbet34.net chat

    Great article, too. I’ve never thought about the footer too much because I’m used to hitting the “Home” key and using the main navigation items, but I could see many users who don’t think that way and would feel a little lost at an underdeveloped footer.

  • http://www.BudBay.com John

    Simply Stellar!

    Thanks for giving me some ideas.

  • http://www.bloggs74.com/ James

    wow…..what a great article…

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Nice post . . . We are still deveoping our footer . . this has helped out an awfull lot – thank you for the insperation.

  • http://www.sendmoneytochina.org Michelle

    These are quite beautiful and give me a lot of ideas. It’s great when you can squeeze in more useful content that perhaps doesn’t fit well in the body of a page, and present it in a way that adds to the user’s good experience of the page.

  • http://www.psyched.be/wordpress Darkened Soul

    I think I know how to manage my feet… ;)
    Still good read though.

  • Peggy Layton

    You are very generous with great information. Thank You!

  • http://www.mermerciniz.com mermer

    This beautiful and informative article, thank you very much. Use this page to your friend told you. I am constantly followed. To receive more information about this topic the following internet sites can follow.

  • http://www.workplacediaries.com James

    This is very helpful. Thank you so much.

  • http://www.calobeedoodles.com/ Caroline

    Fascinating! I’ve only recently given more attention to my websites’ footers and now I’m kind of obsessed with them.

  • http://www.delldestek.org dell destek

    Absolutely beautiful and stunning. Thank you.

  • http://drebpro.com Dreb

    There are indeed many ways to beautify and maximize the usefulness of the footer. I’d to have a loaded footer rather than a single copyright line :)

  • http://pix2brix.com Alison Moore Smith

    Yup. My footer stinks. Great ideas here. Once my header is updated, I’m heading to the bottom.

  • http://www.swomconnect.com Warren

    You have introduced to us the hidden principles of the footer. I never realized how important it is until I read your article. I need to learn more about the footer.

  • Scott H.

    It’s funny that there’s a professional in usability that refers to “the scent of information”. In this case, you want your footer to add aroma, not stink.

    Great job on the article.