30 Great Website Footers

  • UserId: 1
  • Title: 30 Great Website Footers
  • Url: 30-great-website-footers
  • Summary: A selection of website footers that have inspired me
  • Search:
  • DateCreated:
  • DateModified:
  • Published: 1
  • Pageable: 1

Today, a Footer is essential to a website. It shows the user that they’ve reach the end of the page and provides them with some additional information/links. Without a Footer, many users may wonder if the page has fully loaded within their browser.

Recent trends in Web Design have expanded on the traditional Footer, which contain a handful of links and perhaps a Copyright notice. These new Footer designs stand out from the norm and can provide a dramatic ending to a user’s scrolling experience.

Although I’m a Web Developer by day, I do have a keen eye for good design on the Web. So the following is a selection of my favourite website Footers.

Firstly, starting with what I consider a bad footer:
wiggle
In general, Wiggle’s site comes across as cluttered and takes a while for the user to digest and find what they’re looking for. It’s also full-width, so on a larger resolution monitor can appear to have too much whitespace. Admittedly, the Footer does have some valid information, but could be laid out better.

So what makes a good footer?

addedbytes
Added Bytes has 3 clearly defined columns showing the user information about the author, his recent work and contact information. It also contains a few obligatory social media icons.

andrew wilkinson
Andrew Wilkinson has a hand-drawn/illustrated feel to the Footer, again with 3 distinct columns.

apple
Apple’s site is clean and crisp throughout, though their Footer is very simple and allows the main content to take centre stage. However, interestingly it contains a breadcrumb of the user’s path to the current page.

bbc
The BBC’s recent redesign impressed me, especially the Footer – which provides useful links for the user and uses a neutral colour palette, so that it doesn’t clash with the various pages throughout the site.

binary bonsai
Binary Bonsai has a black/white Footer with a paragraph about the site along with 4 columns of links.

cephas
Cephas is a good contrast to Binary Bonsai – in that it’s black text on a white background, again with 4 columns.

colour lovers
Colour Lovers has 3 columns with recent forum posts, blog comments and an about section.

design bombs
Design Bombs has a great illustrated Footer, that echoes the site’s theme.

dyn
Dyn has a huge footer containing a vast amount of information, including their latest tweets; flickr feed; site links; social media badges and even a contact form.

elliot jay stocks
Elliot Jay Stocks’ Footer contains a selection of links, but I think its greatest feature is the huge search box.

hash rocket
Hash Rocket has a background-image of a planet within its Footer, which contrasts well with the white background of the rest of the page.

i am paddy
I am Paddy’s footer is very clean and simple with several icons that darken on rollover.

impulse studios
Impulse Studios incorporates a login form for their clients into the Footer, which is finished off with a wood-effect background.

jon raasch
Jon Raasch is another example of an illustrated Footer that reflects the colourful header of the site.

komodo media
Komodo Media’s Footer contains several CDs that change on rollover to show their latest tracks from last.fm

line25
Line25’s Footer continues the blueprint theme of the page and contains what could be described as avatars of affiliate sites.

little box of ideas
Little Box Of Ideas’ Footer makes good use of Lego bricks as links to social media sites. The typography suits the rest of the site well and stands out well compared to others on this list.

microsoft
Microsoft’s Footer is split into 5 columns and fades well to the blue background. It provides the user with more links in relation to the section of the site they’re on – in this example, Windows.

pelfusion
PelFusion’s Footer is split into 3 columns with links to Comments; Categories and Archives – distinct Blog features. I’m interested to see how this will look in a year or two – whether or not the extra Archives will spoil the look, or if the owner decides to only display the most recent ones.

perishable press
Perishable Press has an almost sepia tone to the page, with the Footer echoing this. What inspired me most about this was the 3 sets of images that fit together well and the rollover states display more colourful versions, yet the 3 sets differ in dimensions and location.

play
Play’s Footer displays essential links for an e-commerce site, split into Categories. It also fits well with the aformentioned BBC and Microsoft Footers.

shopify
Shopify’s Footer is large in height and contains a mix of 3 then 4 columns. Visually, it’s fairly simply and dark to contrast well with the rest of the page.

simple bits
Simple Bits’ Footer continues with the grainy feel from the top of the page and is split into 5 columns.

smashing magazine
Smashing Magazine’s Footer shows the team along with 4 columns of links.

sohtanaka
Sohtanaka/Torrance Web Design’s Footer is another 3 column example with a great illustration that uses shades of blue well to show foreground/background objects.

square space
Square Space’s Footer is another black/white example, which is split into 4 columns of links and a 5th with call to action items.

thetravelersnotebook
The Travelers Notebook’s Footer contains many links split into Categories that appear to be useful from an SEO and user’s point of view. The lower part of the Footer reminds me of The BBC’s too.

waterstones
Waterstones’ Footer is perhaps the only one here containing an actual photo, rather than the more common illustrated picture. It fits well with the nature of the site, displaying a selection of books on a Web 2.0 style glossy shelf. Below are 2 columns of links, each divided into 2 (totalling 4).

yodaa
Yodaa’s Footer fits well with the rest of the site, which changes as you scroll down the page – from a blue sky in the header through to the dark earthy feel of the Footer. It contains a contact form that has been designed to fit the illustrated feel of the page very well.

slickhouse
I had to include my own site for reference, purely because at the time of designing it, I believed it reflected the current trend of Footers on the web. I spent a few days researching Footers that I liked the look and feel of – and opted to attempt a cartoony style, with all of the links as pictures rather than text. It’s starting to show its age and in some respects looks fairly plain compared to others on this list in a similar style.

That’s my list of 30 great website footers. Please be aware that these are my personal favourites and have made such an impact that I’ve bookmarked them whilst browsing the Web over the past few months. I can’t pick a favourite of the bunch, but looking through the list there does appear to be a trend in website Footers that I prefer:

  • Multiple-columns – 3 and 4 are the more popular choice
  • Jammed full of useful links
  • Fit well with the rest of the theme
  • Illustrated
  • Big and almost overpowering

And overall, they all provide that important factor – letting the user know they’ve reached the end of the page and providing them with a few more options in the hope of keeping them on the site.

When designing my next version of slickhouse and indeed, any future sites – I’ll be taking these into account, allowing them to influence my design decisions. If you’d like to read more on website Footers, the following Articles are worth a look:

Let me know if you’ve come across any additional Footers that have inspired you and if you agree with the above choices, or not.

Categories that this Post has been filed under

  • Articles - Longer posts that warrant an article status
  • Links - Uniform Resource Locators of interest
  • Web - The Web, XHTML/CSS/ASP/.NET/SQL/PHP etc.

Tags that this Post has been tagged with

Comments

I approve!

bob hoskins


Add a Comment