Components of a Great Website Footer

Footer design has come a long way in the last few years, as can be seen in the many footer design showcases on various web design-related blogs. Creativity and aesthetics aside, what are the elements that make up a great footer design?

Site Map

Many web site footers contain some level of site map. Often this is a duplication or expansion of the main navigation in order to aid the visitor as they move around the site.

Sitemap

Sitemap

With more options for where visitors may want to go, e-commerce sites can have a much more detailed site map.

Apple.com site map

Site Map Link

It's probably a good idea for a site of any significant size to have a site map. And if you do have a site map, your users will expect to find a link to it in the footer.

Apple.com site map link

Legal Links and Copyright Information

Despite the expanded use of the footer, it's still regarded as the place to go for copyright information and legal-related links such as your privacy policy and terms of use.

Legal links

Legal links

Contact Information

It makes sense for commercial websites to have their contact information easily available. Where better than in the footer?

Contact info

Contact info

Contact info

In addition, for businesses with a physical location, a link to a map and driving directions can be a great help for visitors.

Contact Form

Some sites have taken it a step further than simply providing contact information by including a contact form in the footer as well.

Contact form

Contact form

If space is tight, a call-to-action button makes a good alternative to encourage prospective customers to get in touch.

Contact button

Contact button

Newsletter Signup Form

Many online stores provide a convenient email signup form in the footer. Signing up for (yet) another email is often an impulse action for customers, so it's sensible to make this as easy as possible.

Newsletter signup

Newsletter signup

Search Form

If a site design does not allow for a search form in the header or if search is an action of secondary importance, the footer provides a viable alternative location. It's unlikely, however, that visitors will know to look for search in the footer without discovering it first through browsing.

Search form

Search form

Social Media Buttons

The footer makes a great place to place your social media links in an easily accessible place on every page.

Social media buttons

Social media buttons

Recent News / Twitter Feed

By breaking a footer up into columns, it's easy to include lists of recent news, blog posts, tweets, etc. These can give visitors a quick insight into what is going on with your organization and encourage them to venture further into your site.

Recent posts

Twitter feed

Region / Language Selector

It's common to place country/language selectors in a 'utility' navigation in the header. However, if a site design does not support such a layout then the footer is a good alternative location.

Language selector

Country selector

Methods of Payment Accepted

It's a good idea for online stores to let customers know upfront what methods of payment are accepted. Putting this information in the footer makes it readily available to visitors.

Methods of payment accepted

The footer is a good location for other e-commerce related information, such as security badges, guarantees and offers, as well as customer support information.

E-commerce footer example

Archives / Categories / Tag Cloud

The footer makes a good place for blogs to list post archives or categories. Tag clouds seem to be less popular these days, but can fit within the navigational context of the footer well.

Categories

Tags

Company / Personal Overview

Since almost any page on a website can be the first one that a visitor encounters, a quick summary of the company or person can help orient new visitors. This overview can also help to add a little personality to pages that would otherwise be dry and factual.

Company overview

Personal overview

Featured Content or Work

Footers make a great location to showcase your best content or work so that you can do your best to ensure that visitors don't miss it, even when they reach the bottom of the page.

Featured work

Case study

Awards and Accolades

Similar to displaying featured work, listing awards and accolades in the footer allows you to show off your success and expertise without being too upfront.

Awards

Accolades

Links to Site Network

If your site is one of a number in a network, it makes sense to link out to your partner sites. The footer is an ideal place for these links.

Site network

Site network

A Personal Touch

While the footer can contain features that aid usability and drive visitor interaction, it can also be a great place to add a touch of personality and have a little fun. After all, we're all people.

Personal touch

Personal touch

Posted on: March 1, 2010 | 42 Comments

Recent Entries in "Web Design"

42 Comments Posted (Add Yours)

Great collection for inspiration!!!

Very nice article. Reminds us all that the footer doesn't have to be dull and boring.

Some great examples that will come in handy for my current re-design. Thanks.

thanks my footer will now be redesigned ;)

I do enjoy this transition to more creative footers. It enhances the user experience, but can also serve as a last pitch for someone about to leave the site.

Great post! I really like Nick's new design for N-Design Studio, especially the footer too. Great idea for having a search field in the bottom right. I need to add call-to-actions on my footer - it's the one thing that really needs work on my blog.

Cheers,
Robin

Really great post. A solid collection of helpful components all in one place...Nice!

Great footers.

Looks like you covered pretty much everything. The About section is a nice design touch. Great round up.

I'm working on two sites right now and I want interesting, useful, creative footers for both of them. This is a great starting point! Keep up the good work.

Looks like you have covered all the bases. Excellant job in getting the entire range of design ideas together. Well written.

Its always good to have types of payments on footnotes right?

Great examples, and inspiring.

amazing collection of footer design very inspiring please keep posting

Great post, very inspirational and will be looking to add something like these in the near future.

A footer should match the personality, design and branding of your site. Some really good examples above great post.

Great Post i like it.

Brilliant Post! This has really given me some inspiration to design more interesting and functional footers!

We have used some of the examples posted. But plenty of new once I see to be considered. Thanks for posting.

Don't stuff every listed suggestion in the footer or it can grow to be larger than the main content ;). Good ideas.

good and nice article

Footers have definately become a more interactive part of a web site and there are many good uses as mentioned in this article that have been found. I tend to try to keep forms out of the footer although most of the other aforementioned uses we have included at some point or other. Maybe we are seeing a more crammed footer because the whole design of header and body of web sites is now a more blog / US style with less elements (cleaner). We still need somewhere to put the other stuff and the footer can help with this.

Nice articles. Footers used to be a place where people dumped privacy, copyright notice, terms and conditions and so on... but since there are so many websites emerge every seconds, it makes sense to use every avenue available to make your website is more visible to either the search engine and the visitors. I personally think websites look nice with a thick footer compared to a boring thin footer :)

i really was not aware of these stuffs till
thanks for sharing
your site is worth bookmarking in my browser

I'm probably guilty of not thinking much past putting navigation links in the footer, its good to see a different perspective every once in a while!
Thats a good inspirational article...thanks

I've added a comment box to my website which is really useful although we should really get round to adding a captcha box because we do get horrible spam something which clogs up my inbox no end!

Great post, I have wanted to look at footer design and content in greater depth for some time. Generally when designing web sites we have stuck to the usual suspects and added contact info, email, copyright etc. Recently with ecommerce web designs we have added more navigation. As more and more new site designs seem to fill the footer with links I wonder whether it is starting to go to far and become a place where navigation that doesn’t fit up top is thrown in at the bottom because everyone else is doing it?

Very Very Help article. cover all type of possible footer design...

Thanks for inspiring examples :-)

It's a good article! There is so much you want to share in the footer that readability and usability is going down. For clients it is sometimes difficult to choose.

Thank you very much for sharing these great information. Well explained, and teach people about the in and out on the footer of a website.

Adding a creative element to a websites footer design is a great way to enhance the overall appeal of the website. It's also helps your viewers scroll through the whole website maximizing your exposure.

Some great ideas on how to incorporate the important footer information you need on each page.

Contact info on each is an important one in case the visitor prints out the page for future reference or to put in the need to call pile for their project.

Really cool post. I saw those all kind of footer before, but I never think about mine. Thanks this gotta be my inspiration to fill my new site footer's with better stuff.

I saw one on best CSS vault: http://www.bestcssvault.com/tropica-web-design/#respond

That was cool, it had a search and nice mouseovers in the footer etc...

Great footers, plenty of inspiration! Thanks Ted.

It's not a requirement, but I'm seeing more "Powered by" mentions in the footer. You can use this to state the CMS you're using or any other technology your Web site's built upon (ie Wordpress,AWS,etc).

Less is more. If possible don't have a footer!

I love footers. . . Its one of the best part if not the only part of a web page where you can splurge on the design as hard as you want. . . The header is one thing, its already given that it would have the logo and other stuff, but the footer is somewhat similar to the signature on a contract where you , as a designer would place your mark on. . .

Great article by the way

Really awesome post. Inspirational

Another useful and very comprehensive article, great work.

Thanks for that. Always good to get some inspiration for footer designs to stop them looking boring!

Post a Comment

*
*
 

Live Comment Preview

Subscribe

Subscribe to my RSS FeedSubscribe to my RSS Feed

Categories

Proud member of 9rules network