Back in the old days, almost every website had a sitemap where they listed out all the pages. The purpose of the sitemap is to help visitors and search engine spiders to find information on the site. Now, a lot of modern websites have dropped the sitemap page, instead they place the sitemap in the footer area. I'm going to review 20 websites (from big corporation to small portfolio sites) who organized their footer cleverly to enhance usability.
Benefits of Placing a Sitemap in the Footer
- Engage user click and visit duration:
As you may know, online readers don't read everything on the page, they scroll and scan. Footer is probably the last place they look at before exiting. Placing a sitemap in the footer may attract readers' attention and increase page clicks and views. - Make sure your visitors are not missing out:
Sometimes your visitors might be too lazy to click on the sitemap link or miss it all together, having a sitemap in the footer can ensure your visitors are aware of every page. - Use your footer to promote links:
You don't really have to use the footer to list out everything, you can use it as an alternative location to promote important pages. - Save readers' time:
Having a sitemap in the footer allows users to quickly jump from page to page. - You save the visitors a click:
By placing the sitemap in the footer rather than a separate page, you save the visitors a click. - Enhance layout design:
Don't know what to put in the footer? Perhaps a sitemap can fill up the page and make your site look bigger.
Digg
Digg keeps their header nice and clean by placing only the content categories. The header is focused on the users while the footer is focused on the company.
Mozilla - Firefox
Thanks to the footer sitemap, with just a glance, I know exactly what pages are available on the Mozilla website.
Apple
What if you have a huge website (in terms of content), putting a full sitemap in the footer may be insane? You can learn from the clever Apple.com, split the sitemap into sections. For example, go to the Mac section, you will only see the Mac sitemap.
GoodBarry
Although GoodBarry doesn't list out every page in the footer, but it does act as a sitemap where they list the pages with the most significant content.
White House
In the recent redesign of the White House website, browsing the site has been made easier by using the dropdown menus and sitemap in the footer.
Miro
Miro separates the sitemap with a text bar "Looking for something?".
Six Apart
You may also use the sitemap to connect to your network sites. Six Apart is a good example. In the footer, under the Six Apart Blog column, there are links to their sister sites: Typepad, Movable, and Vox.
Clearspring
In Clearspring, they split their Services section into two columns: Launchpad and WidgetMedia.
SquareSpace
SquareSpace's sitemap tells you which pages you've visited already. Notice the visited pages have a tiny check mark instead of the regular triangle icon?
SugarSync
SugarSync displays only the main level of the site in the footer, the full sitemap lists all pages.
FreeAgent Central
Again, FreeAgent Central has a simplified sitemap in the footer with a link to the full sitemap.
FiveRuns
FiveRuns creatively organizes their sitemap to put the main focus on their products.
Red Nose Day
I particularly like the "red nose" figures in the footer because they make the sitemap stand out.
Tigers
Having too much empty space in the footer? Fill it with a sitemap. You don't need to have a lot of pages to make a sitemap (Tigers is an example).
Get Satisfaction
Get Satisfaction saves their header space by placing the main navigation (which is also their sitemap) in the footer.
Flashloaded
Flashloaded sells Flash components, thus their footer sitemap only lists out the products.
Jamie Oliver
Jamie Oliver displays a simpified sitemap in the footer and also provides a link to the full sitemap.
Redbrick Health
Nice and clean 5-column sitemap.
FortySeven Media
I've been showing a lot of big corporation sites. What if you have a smaller site? FortySeven Media is a good example of what you do with a portfolio site. They use the footer to display the latest entries of their blog and portfolio work.
Jason Santa Maria
This one is my favorite. Not only does it look elegant, but it also attracts readers' attention by laying out the recent activities of the blog in a beautiful way.
Tips For Designing Footer Sitemap
-
Categorize - organize your links in categories.
-
Use Headings - use headings or titles for each category.
-
Be Consistent - the order of the links should be consistent.
http://www.brightcove.com/ has a nice footer as well. I also start using this “technique” more and more…
Great examples… check out PurpleFog.com: http://www.purplefog.com
Great Tutorial!
I <3 WDW
As a web designer I can see the benefits of using an entire sitemap in the footer from a usability point of view, However this should not detract designers from creating a clear and easy to use navigation for theiir website.
Good one! This is probably one of the most useful tips that I’ve read today.
Love your blogs! This is very useful info, and will be changing the ways I design my footers. Thanks for the great content.
I really like the white house web site, and i like the fact that Obama isnt afraid to venture and use the digital world to reach the public.
Nice design and user friendly.
Another great post
Definitely planning on incorporating this idea into one or more of my websites soon! Great advice, thank you!! :)
~Kris
Yeah, just follow the crowd…
Come on people, find out for yourself how to best design a sitemap page.
I kind of dislike these top 100 sites that all use the same design, just because the there are 99 other websites that use this technique.
This makes you think less about design principles and why footers like these work. Just because they work doesn’t mean you should use them.
It’s ok to invent another wheel.
Great list, great SEO idea.
Another good one is my web host provider Logicweb
http://www.logicweb.com
We’ve tried to take a more evidence based approach to designing the footer, and here’s what we’ve found:
1) footer links seem to typically outperform the same link in the top nav
2) a “fat footer” isn’t that great for SEO
3) in some sites, a thin footer will outperform a fat footer
You can see more on post here: footer design results
@Thijs – totally agree – consider why you should add a sitemap in there rather than just follow the smashing magazine etc “top 100″ list
I think Jason Santa Maria’s example is a good one- extending the content and making it useful, rather than trying to stick everything plus the kitchen sink down there.
yes, it should be easy to navigate and user friendly,.. not for seo puropses.
Let’s take this to a different level. Anyone have a site that uses a footer such as the one’s described that would be willing to show the google analytics click-throughs? Would be nice to some rough percentages of usage. Personally, I can’t remember 1 single moment in all my web surfing where I clicked on a footer link.
Thanks.
I really like the idea of having a more comprehensive sitemap in the page footer. I think this is a technique that is definately catching on all around the Web. As a designer, I would have to say that the page could get a little clunky when listing a large number of links. I do, however, like the idea of only listing the pages with the most significant content. Currently, when designing websites, our company lists only the main navigation in the footer. It might be helpful to include some additional links for the purpose of user convenience. It’s definately a topic that’s worth bringing up at the next staff meeting. Thanks for the insight.
@Robin – I’ve outlined uplift that we found here:
large footer design testing results
Keep in mind that we found significant improvements to this approach (as in, like for like clicks typically increased), but there were also several significant negatives. One was a negative SEO impact. The other was that our users achieved goals *much* better with a thin footer.
Our key learning was that it really suits some sites, and is quite detrimental on others.
Thank you for this inspiration.
The post of Uxboot is also really interesting.
http://www.uxbooth.com/blog/6-things-to-include-for-a-user-friendly-footer/
nice list…
thanks for the idea…
Great article! I had done some r&d on sitemaps a little while back. I found that HP had a really awesome set-up but I havent been to their site recently.
Great SEO idea, but not always fitting for every design.. perhaps if you hide the data like the comment guidelines and have it expand on click.. problem is search engines ignore anything that’s hidden I believe.