10 Techniques for a Fantastic Footer

by Joshua Johnson on 5th January 2010 with 129 Comments

A strong footer can leave your visitors with a lasting positive impression.

There are tons of creative ways to boost the cool factor of your footers by focusing on both form and function. Below you’ll find 10 simple ideas to inspire you towards footer greatness.

1: Make It the Primary Navigation Tool

This sounds crazy right? Why would anyone in their right mind take the primary navigation, traditionally placed in the header, and put it at the bottom of the page? It goes against so many rules and can be an absolute disaster for usability. However, if executed properly, footer-based navigation can be easy to use and refreshingly different. The example above uses a large stationary footer that lays on top of a scrolling page. You can even toggle off the navigation menu to view the page content in its full glory. This is an excellent implementation of a risky idea. Two thumbs up to Madfrog for originality.

2: Give It a “Back to Top” Button

One feature that I really love in a footer is a button that takes you back to the top of the page. On lengthy pages, you’ve done some serious scrolling by the time you reach the footer and the trek back up can be a long one. You can overcome this annoyance with a simple JavaScript button that sets the scroll position. See the implementation in the examples above as well as on the Madfrog footer from the previous tip.

3: Give It Contrast

If you want a strong footer, don’t leave any doubt as to where it begins. Using a simple line or graphic to differentiate the main content from the footer helps, but giving the footer a drastically darker (or lighter) background color goes even further. The example above actually uses both techniques. The dark footer background contrasts nicely with the white page background and they’ve added a beautifully eye-catching graphic that is engineered to steer your attention toward the contact form. To take the example further, placing a simple contact form within the footer is another way you can increase it’s functionality.

4: Illustrate the Heck Out of It

If you’re a talented illustrator, the footer can be a great opportunity for a creative element that allows you to break away from the strict but necessary utility of the page above. If the footer is going to be the last thing a user sees on the site, you might as well go out with a bang. The two sites above have implemented huge, ridiculously amazing illustrations that serve almost no purpose beyond just looking really cool.

5: Pack It with Content

There’s definitely a strong argument for keeping footer content simple, and trust me, I’d be the first to make it. But there’s also plenty of occasions where it’s appropriate to just cram a bunch of stuff into your footer (in a stylish and organized fashion of course). The three sites above have opted to do just that. There is often plenty of content, such as legal copy and blog archive links, that you want the user to see without cluttering up the primary content of your page. An oversized footer is a convenient and logical place to put such content.

Notice from the examples above that this is also a great place to put a list of free resources for your users. No matter what kind of site you have, providing a list of free external resources is an easy way to add value to your site in the eyes of your visitors.

6: Stick Your Head in It

Can’t think of anything to put in your footer? Try your face! If you’re creating a blog or portfolio, it’s appropriate to include information about the site owner (be that you or your client). Write yourself a short, witty bio, throw it next to your ugly mug and suddenly your site is transformed from cool and professional to inviting and personal. Obviously, contact information is a natural complement to this setup if you’re looking to add even more content.

7: Make It a Social Media Hub

Along the same lines as the personalization in the previous tip, the footer is also a natural place to include all of your various social media links and widgets (you know you’ve got a ton you social media nerd). This is a common enough practice that the footer often the first place I look for social links. Don’t stop at Facebook either, go crazy and throw in your Twitter feed, Flickr stream, and even a MySpace link if you’re unfortunate enough to have one.

Just remember to style each peace to fit your theme and give the footer elements a cohesive look instead of throwing in a bunch of prefab, mismatched widgets. The example above uses rocket ships and CSS styling to tie it all together in a fun and unique way.

8: Update It Daily

Another great feature for your footer is to come up with a unique idea for a brief daily feature that complements your site. Try to think of something useful enough that a user would conceivably check in from time to time just to see it. The example above is a designer’s website featuring a free, downloadable daily color scheme in the footer. This is both practical and relevant to the site’s audience. Think about who is visiting your site and what they might be interested in.

9: Throw In an Infographic

The site above was the only example I came across that used an interactive infographic in the footer. Consequently, I spent more time playing with that footer than I did staring at any of the others. To get a feel for what I mean by infographic, check out this post on 25+ Useful Infographics for Web Designers. Essentially, infographics are a way of conveying boring data in a visually creative and interesting way. Think about the information in your footer and how you can present it in a more interactive and attractive way.

10: Bring It To Life

A little bit of animation goes a long way towards adding visual interest to your page. The footer in the example above features animated insects dancing around a candle flame. The effect is an eye-catching footer that you can’t help but stare at for a few seconds. I recommend keeping your animations simple. The goal is to make it appealing without detracting too much from your primary content. Other ideas for subtle animations could include pulsing colors, floating clouds, and scrolling news tickers.

Conclusion

There you have it, enough creative footer suggestions to keep you going all year. Use the comments below to let us know which examples you think are the best and be sure to tell us about any that we missed!
Footer examples found on Footer Fetish.

Comments & Discussion

129 Comments

http://creativityden.com Liam McCabe

Illustrate the Heck Out of It – yum!

I always feel a bit like ugh.. when I come to the footer. I’ve just done a whole page design and now I have to a damn footer. So I just draw up something quick.

I like the idea of having a fixed navigation for the footer, but this only works if it takes up less than 10-15% of the screen. Otherwise it just distracts the reader from the content.

When it comes to the footer design I think the main aim is too get the reader to continue browsing the site. By putting links to posts, pages and other content the reader is likely to stay and browse your site further. It is for this reason, that I quite like the Pack it with content method. Although I believe the footer should, by all means, not be cluttered.

I guess that only applies to websites that regularly post content. When it comes to portfolio and company websites I guess you just want to make a good last impression.

Nice article Josh :)
http://www.glendelmdesign.co.uk Web Design Cambridgeshire

You have to bear in mind that the footer is probably the last thing on your page that a visitor is going to look at, and therefore your last chance to keep them on your site. It’s for this reason that I always opt for the content option, and try and get as much interesting links/words in there as possible, just to keep them browsing your site.

Anyway, great article :)
http://www.yummygum.nl Leon

I’m a big fan of footers that stand out but I’m not sure if I can agree with the decision to make it the primary navigation. This conflicts with deeply rooted UI patterns and will probably confuse visitors/users.
Pingback: What project52 means for me « WTTS
http://www.coroflot.com/Brandon-M-Miller Brandon Miller

Yes. I love creative footers. Great post , their are a lot of stellar examples in this.
http://vsego.wordpress.com/ Raptor

Great post, tnanks!
Joshua Johnson

Thanks for the feedback!
http://www.wearepixel8.com Erik Ford

I find that if I am working on an large and extensive website, the footer can be valuable screen real estate for third tier content.

And, though I agree with you that the footer should not be an after thought, I will say that your footer design, as in anything else regarding the design of a given site, should match the tone of the site as a whole.
http://www.prodigalconcepts.com rod rodriguez

great set, very refreshing ideas… thanks for sharing
Ploy

This is GREAT! Totally gonna use some techniques!
http://www.camp26.biz Eko Setiawan

I am sometimes confused .. What does the actual footer?? Finally, now I get inspiration.
Thanks …
http://www.petrus-studio.com Petrus

Wow that’s an interesting post with very creative examples. Thank so much for sharing Joshua!
http://logic.butai8.com Neal

How about no footer at all? On my new website I am not even including a big footer, just a faded out logo.
Ben

Great post! Not as good as your footer though.
http://www.mysweetshadow.co.uk Jamie

This is a fantastic post with some great suggestions, the best one for me was the back to top link. So simple and yet would improve the usability of some sites so much, I’ll be implementing that and some of the other suggestions for sure!
http://h-y-p-h-e-n.com Marina

This has been really helpful- most website footers are so drab and boring. I need to design my own footer one of these days >.<
http://www.bwired.com.au Steve Martin

Wow cool stuff! You must have worked really hard to get this collection.. Good job! Thanks..
http://www.west-design.at west design

Great Footer – i love the design of the second footer! Thx for the great post
Angelo

Thanks for the great work, good insight and outstanding depth in this blog post.
http://www.wvss.net Rajib Roy

I am sometimes confused .. What does the actual footer?? Now i got some idea. thanks for the post.
PKD

Very good ideas. I´ve never seen this good uses for footer, thanks!
http://www.footerama.com Tejas

This is a nice article. We must add some of those to our footer gallery – http://www.footerama.com

You should be able to check some great designs there too, with tiny bit of comments. :)
Greg

Using JS to operate a back-to-top link? That makes it unusable for me and many others. Moving the navigation to the footer? That could only be done if its proper position in the mark-up could be maintained: otherwise, it would be potentially a huge problem for users of assistive software (it would have to be combined with a skip link if anyone insisted on doing it) and little better for anyone who cannot use a mouse.
Incidentally, your feedback form is messed up: its fields are showing to the left of the labels and there seems to be no border or background colour, so they are invisible. Almost unusable.
http://www.madfrogdesigns.com/ Julien

Thank you for displaying my website on yours Joshua. I was quite happy to see it at the top of your page.

I have been heavily criticized in the past for using the footer as such. However, as a web designer, thinking outside of the box is a must. I don’t break rules unless I know them and understand the consequences of breaking such rules. I definitely would not use this technique on any website, but for a designer portfolio, “showing off” what you can do and how you think is what differentiate you from the competition. It’s the icing on the cake that makes potential clients stop and say “maybe I need to call this guy”.

Thank you again for displaying my site.
Pingback: 10 Techniques For a Fantastic Footer | Design Shack | Rumball Motors Interactive
http://www.jennifermariedesign.blogspot.com Jennifer

I’m soooo loving the attention footers are getting. Every time I see one, it really wows me. Now I just need a project that an awesome footer would be appropriate for!
Pingback: New Year inspiration.. « Richard Eskins
http://www.bluebuffalomedia.com Blue Buffalo

Interesting concepts on footers! I like it.
http://www.web4half.com Jaisa — I LOVE WEB DESIGN

Hi Joshua,

Really nice post, it’s interesting to see what people are doing with what were previously throw away page elements.

Brilliant work! Very inspiring… thanks for sharing!
http://www.mrtunes.ca mr. tunes

i have been thinking about a lot of these things lately, but you compiled them all into a great post. thank you.
http://www.zorinweb.com Matt

Large footers, constructively filled with info, are wonderful, and can only enhance usability.
Pingback: Quick Thought: Is Your Footer Too Fat? | HowWhyWeb.com
Pingback: Fantastic Footers in Web Design | Web design and development in London and Surrey
http://www.AnthonyVO.com Anthony Mendez

Thanks for the ideas. Has anyone argued for not having a footer at all?
http://www.justinmcgonigle.com Justin

Amen on the Back to Top comment. It irks me that the back to top link has seem to have gone out of fashion. It’s sorely missed on most sites.
http://bensmithson.com/blog ben smithson

Nice post. Thanks for putting all of these together. Loving the contrasty example!
http://www.imawebdesigner.com Luke Desroches

Great article. Good footers can really enhance a site.

Another item that could be on here is to have a method of contact in the footer, whether it just be contact info or a nice contact form.
http://www.lendlallenvtrazo.com/ Lendl Allen V. Trazo

Thanks for including my website :)
http://graphiceyedea.co.uk prisca

brilliant article and excellent examples :) feeling quite inspired now, thanks ;)
http://SiteOf.Me ryan

Nice post.. :) it’s very helpfull, i am designing my blog footer.
http://www.raumfuer.de alexander

what about your footer? ;)
http://www.supercarly.co.uk Carly

It’s all about the footer these days, yes it’s very much ‘in vogue’ to make a statement and to optimise that space at the bottom of the page. It’s good, because it’s slowly going to adapt how we use the internet. Usability and design nuts everywhere are going to freak out when studies reveal that actually, due to this trend, people are spending a lot of time below the fold.

I have also followed the fashion with my own footer, and I use mine to draw attention to things I’d like people to see. :-)
http://www.freebyrddesign.com Kellee Byrd

This was a great post, I really enjoyed it. It was a matter of getting information just when you need it; I am redesigning my site and have been contemplating what do to about a footer. Thanks!
Shae

2. Give it a “Back To Top” Button

all of these are great ways to give your footer some umph, but I strongly dislike using Javascript links for damn near anything, since I find myself middle clicking links more often than not to open them in a new tab and avoid leaving a page with interesting content. Now, I’m not saying that I would middle click a back to top button, but when this can be done just as easily by setting an HMTL anchor at the top and linking to it at the bottom, I would certainly opt for that instead, just in case.
Shae

^^^didn’t read your link until after posting, and your description led me to the wrong conclusion about what it was. I like it now :D
http://www.tutsbot.com TutsBot

Thanks Alot for this fantastic review :)
http://www.technophobia.com KieranOShan

Good post…I think that while creativity is good, you can’t do away with standardisation. As a user I turn to the footer for answers or when I can’t find something in the main content (eg. contact details, site maps etc). I want the information quickly and where I can see it/know its going to be. A footer is not necessarily primary navigation its secondary navigation (though I like concept on small, content lite/mobile site). The infomatics and social hub stuff are good.Please don’t bring your footer to life! it’s for info.Dn’t sacrifice the useability
http://twitter.com/HO_BA Ihab

Can I add “Put search box”
http://pojemario.com/ Poje Mario

I see footers are very “in” lately.
Nice collection ;)
Izycrzy

This is really going to help our art director get a leg up on the new site…. I just our manager doesn’t get cold feet when he sees the comps!!!
Pingback: CSS Brigit | 10 Techniques for a Fantastic Footer
Jason

Great list. I love the fat footer and artistic footer trends. More room for creativity!
http://www.rtyucel.com rtyucel

thats great list, thanks
http://www.tutsbot.com TutsBot

Thanks Alot for these amazing techniques :)
http://myfacefriends.com Jehnee

yes your right making your footer outstanding it will bring more members or visitor to your site… thanks for the tuts…. keep on shinning…
Pingback: You are now listed on FAQPAL
Pingback: Meine Link-Tipps für die Woche 02/2010
http://www.snel-geld-lenen.info/ Snel geld lenen

Thank you for this great inspiration, really like the example with contact form. I think that this will boost the responses.
http://www.santaclaradesign.com Lauren

Love these ideas. I was really just thinking about this yesterday – and put it on my to-do list to search around for “footer inspiration”. You beat me to it!
Pingback: Enlaces interesantes (10) | Cosas sencillas
http://flaboratory.ru maq

Give it contrast – this is the best, I think. It is a really great solution to capture the users’ attention to Contacts, for example, or adertisement.
http://routinechaos.com Josh

I love how this entry is about what to do with footers… when this doesnt even have a very impressive one :) haha just kidding, this inspired me to do a better footer for my blog Cheers

Josh
http://www.luxe-campagne.com/ Campagne

Very good job !

Thank you, I like it.

I like 30 Beautifully Designed Tumblr Themes too…
http://nomadchique.com Karen

Great article, well done! Love the samples too.
Pingback: » 李安：永远做个“局外人” T·Web
Pingback: Cairns Web Developer » Blog Archive » 197. Energise your ecommerce
http://www.the-dude.co.uk The Dude

Content! Thats the way!

I have a habit of putting a mini-sitemap in my footers – it’s a great way to keep people on your site when they get to the bottom by offering useful links, plus its great for SEO!

Win win!
http://illastr8.wordpress.com/ illastr8

I have always wanted to get more creative with footers. This is a good reference for the future. Good job guys!!!

Illastr8
Pingback: 10 Tips for an Awesome Footer | SouTravelMultimedia
http://www.webadvisor.com.br Leonardo Ladeira

Great compilation of ideas. Great post, people. I´ve bookmarked it for future references.
http://www.taptapdesign.com Igor Ivankovic

It’s a great practice to choose one of the techniques and go for it! To mix a bunch of them all together can make another little site in the bottom, which can be a little to much info. Although, You can’t go wrong with experimenting! On my site, the footer is a place where I put my awards, and explain that everything is done by me LOL :))
http://www.emptyhead.com.au/actorswebsites.html Matt Edwards

Great article. I always feel I want to do more with the footer than just stuff some navigation and copyright details. This gives me lots of ideas! Thanks
Steve

I have read this article on smashingmag., could it be?
http://designlovr.com DesignLovr

Great post! I always struggle with footer, but there are some awesome tips right here…
Pingback: Footere som gjør forskjell « WEBSTRATEGI – portaler, e-handel, sosiale medier, online marketing
http://hubersen.ch hubeRsen

great tips and examples.
Pingback: 10 tips para crear fantasticos pies de pagina | Adventure Graphics
http://www.crejz.com menu

thanks! I love footers! I kept on browsing for recommended good looking footers as I am not satisfied with my works. Inspirations are always needed.
Pingback: Inspirations ressources webdesign « iw2 – Veille techno, web 2.0, gestion de projet
http://kittyloafdesigns.com/ Debra

These are (mostly) great! A few I didn’t much care for but overall a nice post. I love the idea of illustrating the heck out of the footer area- as a few people have said, its the last thing the viewer will probably see, and if you can make them want to see more, you’ve got a winner.
http://www.proscreens.net nev

cool info thanks
http://www.proscreens.net nev

i keep coming back to this footers nice
http://www.gostomski.co.uk/ Damian Jakusz-Gostomski

Great post although I’m still a tad unsure about the first one… In order to successfully pull off something that is so differant from the norm takes a lot of skill and will only work in certain scenarios
Pingback: 10 Techniques For a Fantastic Footer | Design Shack | [codepotato]
http://www.gamercity.co.uk Gamer City

thanks for the insightful article :D Btw have you got any articles that would show us how to animate our footers? I quite like that idea and might take it forward on my next website :D
Pingback: [Miguel Sá] | Blog >> Top 10 – Week #1
Pingback: [Miguel Sá] | Blog >> 10 Techniques for a Fantastic Footer
http://listentohousemusic.com/ House Music

Thanks for this article, it’s very interesting to me.
http://www.collabarama.com Blea

This is a great read. I’ve been meaning to spend a lot more time on Footers.

Top Stuff mate.
http://wl.blog.br Alexandre Berbe

I was looking for some ideas to use in my personal blog… I think I’m inspired now… :-)

Great post!
http://blueprintds.com chicago web design

wow, I havent thought of really using it as my nav bar! Great idea, thanks poster!
http://www.adnpost.com jashim

Great post although I’m still a tad unsure about the first one… In order to successfully pull off something that is so differant from the norm takes a lot of skill and will only work in certain scenarios
http://www.spaarhypotheek-weetjes.info Hypotheek

Thank you for your great post. I really love the design of the second footer.
http://deepikadutta.wordpress.com Deepika

Thanks Joshua for this article. I always thought with the changing design trend, footers are no more just one liners. But they hold so much of space at the bottom what more can they be used for and What kind of info can be added there.
This is a great article and leaves me thinking further.
Pingback: Il Footer: design, risorse ed utilities | MLangella.com
http://www.artisani.be ARTisani

Thank you for this article.
Reference material.
http://www.linkmesh.com/vampiros.php Imagenes de Vampiros

This is very good. Muy buena referencia en realidad. :) Saludos. Bye!
http://www.auto-accessoires.be/ autoverzekering afsluiten

Da je a muile moet houwe! oh ja ook nog de zoekwoorden autoaccessoires en autoverzekering, daag
http://www.techtic.com njmehta

gotta love the footer on this page. It’s a horizontal line, and the copyright!
http://www.techtic.com njmehta

This looks absolutely fantastic. Will have to try it! http://www.generotechnology.com/
Pingback: Liens utiles pour la conception rapide, le SEO à toute allure et l'écriture véloce | Pink Seo - Another SEO blog
http://www.mavermedia.com/blog Brad Maver

Awesome and unique collection! Very cool and creative ideas there. Thanks for sharing.
Pingback: SEO rapido, Création et contenu pour les pressés | Webmarketing Afrique
Pingback: Enhance usability: Footer design for web sites | Ari Salomon: Art and Design
http://www.accesomayores25.com Acceso universidad mayores 25 años

Great tips! We’re using this in our web site! Thanks
http://www.cheapleafletprinters.com Cheap Printing

Really cool post, always have a problem with footers. cheers.
http://tintation.com Vladimir

Thanks for the ideas and tips :)
Nicely put details into an article.
http://www.almekhlafi.com Almekhlafi Portal

this very very fantastic
thankyou very much
http://swissusb.net/ suneodelta

It cool information for promote website, Thaks
http://friscoplumber.frontpagebiz.com/ Frisco Plumber

Great information. I got lucky and found your site from a random Google search. Fortunately for me, this topic just happens to be something that I’ve been trying to find more info on for research purpose. Keep us the great and thanks a lot.
Pingback: { bliss happens } » Web Dev Goodies
http://www.eyebridge.com.au/ Eye Bridge

Thank you very much for sharing knowledgeable tips. Keep posting.
http://moneyqik.com/ sree

great work,thank you.
http://healthenfermeradesalud.blogspot.com cutecankil

nice and interesting keep it up!!
http://www.wiiombouwen.info dewiiombouwen

Good article and very interesting to read

PS: I love the footers
http://dsgamesdownloaden.com/ DS Games Downloaden

Nice Post And keep up the good work
Pingback: 15 UI Design Patterns Web Designers Should Keep Handy | Online Music,Movie Entertainment Portal
http://www.schimmelinfectie.com man met schimmelinfectie

Good Ideas, I am gonna use it on my blog
Mathew

These are some nice techniques, thanks for sharing. Here are some references to great footer designs http://www.creativesen.se/category/footers
http://www.diigo.com/user/alexandernea617?domain=oknotizie.virgilio.it Junior Wallenstein

I’ll right away grab your rss feed as I can’t in finding your e-mail subscription link or newsletter service. Do you have any? Please let me realize in order that I may just subscribe. Thanks.
Pingback: Opéra Print blog d'un imprimeur Reflexion sur le design et les fonctionnalités du site e-commerce ?
http://www.nintendowiiombouwen.net Wii Ombouwen

Great article and definately a good idea to have a good look at the footer. Some inspiration for my new blog. Many, many thanks.
http://www.photoshopwarrior.com/ PhotoshopWarrior

I think i should give it a try to my own blog, thanks for the post
Vu Hung

Your post is great,Tks
Pingback: 10 ciekawych fat footer’ów | Krótko i na temat
http://www.zelfwiiombouwen.org Zelf Wii ombouwen

Thank you for sharing.
http://www.kettlebelltrainingnl.nl Kettlebell training

I am very inspired. Thanks for sharing about this subject!
http://funflow.ru Amir

good idea to contrast with the contact form footer. You can even combine half of these techniques to add a graphic, social networks, will be very informative!
Pingback: SEO rapido - Mar1e - Another SEO blog | Mar1e – Another SEO blog

Design Shack — Web Design Gallery, Articles & Community