On Design Trends: Footers

03 November 2009

Well, all right: lots of people are still going to put up meaningless lists of trends for 2010 or 2020 or whatever it is they're doing. And Jason Santa Maria's criticism is (of course) spot on.

The tendency towards meaningless lists is probably as much lamented as it is irreversible, but I'd like to counter it at least a bit. So, as a public service because I have nothing better to do since it's a fun way to procrastinate, here's my stab at addressing the situation: I'll take a look at a couple design trends that are coming on the web now and try to parse out a bit why they're effective (or not effective) and what sorts of sites might want to use them. Today...

The Footer

A number of sites (including this one) have been reinventing the footer. Footers have often been afterthoughts in web design, a place for some fine print, utility links, or a basic sitemap. CNN's recent redesign uses something like this.

CNN's footer

But there's been a big change in the way people interact with content on the web. In the early days of web design, people were obsessed with “the fold”—that area of the page that appeared on the screen when people first load the page, before they had to scroll down. These days, “the fold is dead.” We need no longer obsess about fitting stuff into the top of our sites.

The fold is dead?

Well, all right: the fold isn't really dead. There's a number of reasons why people say that, most of which are explained in the links above, but the part that's important for this discussion is that, contrary to the belief (and perhaps the reality) of the early web, visitors will scroll down the page. Indeed, people scroll all the way to the bottom. (I attribute this to two things, by the way. First, scroll wheels have become ubiquitous on mice in the last decade; second, the rise of blogs and the run-on designs that software like Blogger and WordPress have made commonplace means the web is teeming with very, very long pages.)

If people will scroll, it means the bottom of your website is not a tomb. Visitors will read what goes down there.

Moreover, visitors that do get there are probably people who're interested in what you have to say. They read your page.

Enter the massive footer.

Behold the Mammoth

So now we've learned that visitors to our sites will actually look at stuff at the bottom of the page—putting things in the footer isn't a waste.

Still the most common use for a footer seems to be site-mapping, but instead of the giant jumble of links many pages use, it can be done elegantly, taking a little more vertical space to let readers make sense of the list. The Los Angeles Times takes this approach, setting out a basic directory of the site at the bottom of every page.

LA Times

The wonderful FortySeven Media take this a step further, diving into their sites content structure and providing individual bits of content.

FortySeven Media's footer

Alternatively, CSS Tricks puts a list of site feeds and Chris Coyier's related other sites in his footer.

CSS Tricks footer

Jason Santa Maria's blog uses its footer as a digest of many different kinds of content he features on his site: portfolio, photos, book reviews, assorted links—and, of course, a search bar.

Jason Santa Maria's footer

There's a central theme in these approaches, and it's a good one. The visitor who makes it down to the footer read your page—or, at least, was interested enough by what you put above to want to keep going.

More importantly, they're done with what you've just served up to them. They're looking for where to go next. These footers are in the business of giving them ideas. Sticking RSS feeds or links around your site in the footer is inviting the reader in. They're saying, "Oh, you liked what you saw? Well, here's where you can get more."

An ideal footer might even tailor links in the footer to content on the page (instead of putting it in the sidebar, where people have to scroll back up once they've done reading)—though standard blogging software isn't generally set up for this, preferring to have uniform headers and footers and put post-dependent content in between.

Making Contact

The other common use for a footer is for contact information. Arrival Design puts their address, phone number, email, and a helpful map in their footer, so that anyone can get in touch.

Some sites, like the Greg Brady Project, put their whole contact form into the footer, to make it easy to get in touch.

Alternatively, Edgepoint Church features their social media outlets—Facebook, MySpace, Flickr, and YouTube—prominently in their footer.

These sites are out to make contact with the reader, whether it's in a business transaction, fan feedback, or to establish a connection, rather than just directing them to other parts of the site. By putting this in the footer, they're inviting feedback, giving their readers a gentle nudge in the direction of getting in touch, taking the next step—ultimately, making a conversion.

Do I Want One?

Start by thinking how your users are going to interact with your page. Footers work best with linear content, like blogs or articles, where readers will scan from top to bottom and the footer is the natural endpoint for their progression through your content. If you're designing something that's more application-like than page-like, a large footer is probably not for you.

Similarly, if your page isn't organized in a linear fashion, a big footer isn't going to be as effective. On a site like Typeneu, a large footer wouldn't make sense (even if the page didn't scroll endlessly), because the eye isn't drawn down the page, it's pulled across and up and every which way. The footer is most effective when the content is driving your reader towards it.

Conversely, a big footer is great for text-heavy sites that draw have blocks of text that direct the reader down, down, down. Blogs and newspapers/magazines are the obvious examples.

Before we move on, though, a special consideration for blogs: comment threads get in the way of the footer. If your blog accepts and displays comments by default, your comment thread and comment form at the bottom will separate your content from your footer. Many visitors who are interested in your content, won't read through your readers' content—and won't see the footer on post pages. Plan accordingly.

Amazon addresses this problem by putting a "footer" in the middle of the page, rather than at the end. There's a short block of vital information about the book: title, author, price, if it's in stock, add to cart, etc.— and then: a footer!

Below this is minutiae about the book and then user reviews (e.g. the comment thread). But Amazon wants to be sure people see their footer (links to other stuff you might buy) before you get bored by content they don't control, and wander off to some other website.

Setting Out on the Right Foot(er)

The first rule is contrast. If you're going to have a footer, make sure it's obvious where your content ends and your footer begins.

There's plenty of ways of achieving that, but by far the most common (and most effective) is with color contrast (e.g. as Jason Santa Maria does). Others use lines (like the LA Times) or large white space (the Greg Brady Project). Whatever you do, it should be clear to your users that they're looking at a separate piece of the page.

The same things that make for good web design in general, make a good footer. It's an opportunity to draw your reader in, and suggest to him or her what a likely next course of action might be. Do you want customer contact? Give them a way to reach you. Want them to read your article? Link it in the footer. Do you want people to buy your book? Point them at its Amazon page. Are you soliciting money? Drop in a donate button.

The footer should be part of your overall content strategy—think of it as a generic conclusion to every page of your site. Its job is to tie things up neatly and restate your point (so to speak).

Don't try to cram the footer with too much content. Keep it straightforward and directed. Your footer can give the reader an idea of where you think they might want to go next. Lay out some alternatives, in a clear fashion. Think about which “next actions” you want to include are more or less important, and use contrast, size, and placement to prioritize them to the reader.

Well, that's all for me for now. I'll do another of these... probably next time I've something to put off. I hope you found this useful. And by all means, let me know what you thought or what I've got wrong in the comments.