The footer, as if to warrant its physical position in life, can often be left until last during the design process, like some sort of digital outcast. To the contrary, the footer deserves so much more attention than that.
It can often be the next port of call in the event of a site’s navigation lacking a link that a user feels should be there (most commonly, this is a link to contact details). It can reinforce a brand, offer up exciting tools and just simply finish off a page in an aesthetic way.
There are two main approaches to footer design. Simple and complex. Both approaches have their pros and cons like most things in life and what may be right for one site wont necessarily be right for another.
The simple footer
This may contain as little as a copyright notice, but more often than not will contain two or three distinct elements.
- Basic company information (a legal requirement, more of which later)
- Copyright information
- Validation/Accessibility information
Now that last item is probably the least useful to the majority of users but it is a handy indicator for those that it matters to as to the site’s compliancy. And that’s all that you need for a simple footer, but with great simplicity comes the potential for missing a trick with the footer. However, here is a list of pros and cons.
- PRO: Clean
- PRO: Functional (to a degree, as it hardly has any function other than informing)
- PRO: Can be used consistently throughout the site without overcrowding pages
- CON: Not particularly useful
The complex footer
This would contain all the features of a simple footer, but could contain any number of extra features. Some of the more useful ones are;
- Site search
- Site navigation (often top level only)
- Basic contact form
- Related links
- Page tools (such as bookmark and print)
- Customisation options (such as font-sizing)
However, while the the simple footer could leave a user wanting, the complex version could leave you bemused and overwhelmed. Here are some pros and cons.
- PRO: useful to the lost
- PRO: consistent placement of useful features
- PRO: often cluttered
- CON: potentially unnecessary features site-wide
Maybe a good alternative to these fixed offerings is a footer that adjusts to its surroundings. A contextual footer that keeps it simple on pages where the content is already quite comprehensive, but becomes more advanced on the lighter pages. Or maybe this would have usability issues with regards to the non-consistent placement of links and tools.
Aside from the functional attributes of footers, there is another important role for this down-trodden element, and that is to visually close-off your pages. When it comes to the aesthetics, its a case of opposites attract. Your simple (in terms of functions) footer can be dressed to the nines whilst your complex footer should be closer to being in its birthday suit.
So, what makes a really good footer? Here are some of the more outstanding ones.
Complex footwear
Iconbuffet
This is one hard-working footer. The site doesn’t have a traditional main navigation as such, so this footer is a site map of sorts. Follows the rule of simple look-and-feel to compliment the quantity of content.
Ars Technica
Once you’re into an news article on this site and you’ve reached the bottom of the screen, you are greeted with a plethora of footers. The main site footer, a general news article footer as well as article specfic footer. That’s a lot of footers, but they are clearly separated and therefore work.
VIRB°
A wonderful selection of links that could have quite easily been just chucked in any old way, but they have been neatly grouped and placed into columns. This footer also shows how Google Ads can be integrated nicely.
Simple footwear
A List Apart
Strapline… check
ISSN number… check
Copyright notice… check
Done. That’s about as simple as it’s possible to go. Not dissimilar to the Dusted footer in terms of complexity.
Apple
Apart from a couple of extra copyright notices for other people’s products this footer holds a simple list of handy links and that’s pretty much it. I particularly like the drop-down list to select your country.
BBC
A nice bit of branding (along with a Roman-numeric copyright notice… very BBC) and some key links and there you have it. There were a lot of complaints when the BBC launched this new version of their site, but I don’t recall any being about the footer.
Sexy footwear
No matter which level of functionality you go for, it’s always possible to give your users a visual treat. Here are some examples.
ExpressionEngine
Glossy buttons in a shiny panel and arranged beautfully. Very useable whilst being nice to look at. I could almost reach into the screen and touch it! It’s good to see clear grouping of links on this too.
Vimeo
Not much information in this one with it simply linking to useful pages, but very fun visually with their pixel art people on a hillside watching and recording video. Like a pixelated scene from The Sound of Music (without the goat-herd).
Web Designer Wall
The site has a sketchbook feel to it and this isn’t forgotten in its footer. But not content with just looking good it includes links to recent comments and posts as well as little piece about the site. I particularly like the little pencil-drawn bullet stars.
Which brings us to the foot of this entry. So in conclusion, and to continue the metaphor, choosing your footer is very much like choosing what shoes to wear. If your site is a three-piece suit (corporate, professional) you wouldn’t slip on some sandals. Also, it’s worth saying that, with all design, your choice of footer may vary. I’d love to hear about your faves. You know what they say… you can tell a lot about a person by what they have on their foot.
Picture credits
- Shoes on wires: How can I recycle this
- Rollerblades: *clairity*
- Flip-flops: static
- Stilettos: natalia-p
Share.
- Web Design.