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.
Bravo! Great post with show and tell.
Very refreshing to see designer that champions usability…and don’t forget to include XML site map for Google and to leverage sitemap and footers to support SEO!
very interesting!
I noticed this was the ‘in’ thing to do and I think it is very user friendly. =)
There’s also Skype, they have a great footer too.
But thanks for thid collection. You did a good job on this :)
This is really another great article and another place to look for footer inspiration. Thanks very much for sharing it with us.
I forgot about using them that way on front end. I have been, lately, using them only for the search engine
trollsI mean robots :-)I always saw these but never really took into consideration their full benefit. I may try this. Great post, once again.
Personally, I’ve always questioned why we have a footer. If it’s just being used as a navigation safety net, as it is in most of these examples, then the navigation isn’t working hard enough.
Contact details: ok, but these should primarily appear in close proximity to the content that prompts the CTA.
Legal: does the appearance of legal info in a footer carry any enforceable legal weight, over its appearance on a dedicated page?
What we’re effectively doing here is adding yet another block of navigation to be processed by screen-readers and compete for attention during the all important, yet brief scan-time that websites enjoy when visitors first arrive.
would love to hear your thoughts…
-tom
That’s how I’ve got mine laid out!
design, Design Trends and inspiration, thats what you mean :) thanks
Yup, another great post.
A few years back the footer was frequently used for keyword stuffing. During the evolution of Search, at one time Google and Yahoo actually favored sites that used on-page keyword stuffing and under the hood stuffing in the meta keywords tag. Now that Google has a real good handle on the stuff masters, it opened up the possibility for using the footer for intelligent design. I’ve heard the phrase “Phat Footer” or “Phat Foot” used for the latest incarnation where the footer is used for navigation and sort of a “below the fold” block. I really like a beautifully designed footer – it can look great AND it gives SEO people a chance to send the pagerank earned on the homepage directly to interior core pages that you want to pump up for more rankings. Interior links pass juice just like exterior links.
I noticed this was the popular thing to do and I think it is extremely user friendly.
This is an excellent round up. This sites are definitely an inspiration to me.
thnx a lot!
You’re a genius… A sitemap in the footer is a better and more usefull way to catch the users atention.
You missed out on the footer of Tsavo Media which I really like, see here:
http://www.manolith.com/
hmmm, but i think in the same time it should be on the top part of the page too, a lot of people just look at the top part only, they does not know even that sometimes they have to scrool down. it sound funny but it is a fact.
Awesome Post!
You have done a nice analysis of web sites. Yes, that’s very true. It’s better not to have a separate page for sitemap because usually a visitor has got 0.1 chance out of a 100 possibilities of visiting the sitemap. Thus, better utilize the footer space. I guess that’s what it is meant for.
Great Post!!! I really love the functional footer stuff out there now. I have also seen some really nice footer stuff with jquery sliding hidden divs for the sitemap to be revealed on click… just to make it so there is less Text… if that suits the site design anyway.