10 Techniques for a Fantastic Footer

by 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.


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


  • 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


  • 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!!!


  • 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()


About the Author