Functional Footer Design: 8 Improvements for Ordinary Footers

If you are a web designer or developer, you know that every element of a website has its own place and purpose. Most of us design our website from top to bottom, focusing on the header, the sidebar, and the main content. Many designers hone in on perfecting everything above the fold and end up neglecting the footer of their sites in the process. Few sites have footers that are truly specialized for their purposes, and many of them end up being generic afterthoughts within an otherwise excellent design. Below are some viable design options for building a footer with deliberate, thoughtful choices.

Footer Sitemaps

Sometimes even the best of us get turned around when looking through a site, especially one with an unusual or inventive design. A sitemap placed in the footer is a great way to retain visitors who are finishing the content on one of your pages and contemplating their next step of web surfing. Offering all of your content in a concise, organized manner is a great way to recapture their interest and keep them on your site, and there’s no better location for achieving this than the footer. Different visitors will be attracted to different content offerings, but a sitemap in your footer will appeal to as many of them as possible and may increase your website’s pageviews and pages visited per visitor.

Sitemap footers can also create an opportunity to make unorthodox or whimsical design choices elsewhere on your website. If the footer contains a detailed, pragmatic structure showing all of your content, you’ll be free to make the rest of your site highly creative, knowing that your site’s organization is already crystal clear at the bottom of each page.

Contact Information

Having your site’s contact information (phone numbers, email addresses, and physical addresses) in the footer is already a common practice, but it’s a popular choice for good reason. Omitting your contact info can be frustrating for those looking to contact you, and missing or hard-to-find contact information has embittered many customer inquiries that would have otherwise been pleasant. You want to give visitors every possible opportunity to contact you. Nothing can be more frustrating than trying to figure out how to reach someone, especially if they have no apparent way to contact them on their site.

When presenting your contact information, avoid using acronyms or words within your phone numbers. Although it can be really easy to remember 1-800 and one or two words, more and more people are carrying smartphones and committing less and less to their own memory.

I needed to contact my cable/internet provider, and they had 1-800 and their name plastered everywhere on their site. It was actually more difficult to decipher the semantic, word-based phone number than it would have been to simply read it and dial it in numerically. It was easier to call information and have them redirect me to the cable company. The moral is, use the entire numeric phone number, and if you collect payments by mail, make sure to include your physical address. Don’t make your site visitors hunt and peck to find your information.

Promote Important Links

Your header may have topics broken down into specific categories, but you can also place carefully-chosen important links in the footer of your site. When a user reaches the bottom of an article, they may exit, but if you have something of interest there, such as a promotion, a unique article, new information, etc., the footer area serves once again as your last effort to retain their attention. Unlike a sitemap, this doesn’t offer every one of your pages, which allows for a greater concentration of attention on fewer content options.

Looking at your traffic patterns could tell you very statistically and objectively which of these links are truly appealing. If you replace unpopular links with those that have proven themselves to be highly “clickable,” you could have a very effective footer after just a few iterations.

Organize Your Links

If you are placing a lot of content links in your footer (which is almost a certainty if you’ve chosen to present a sitemap), a best practice is to organize them into relevant sections and present those sections as columns. For example, if you have a lot of legal information, privacy policies, disclosures, or liability information, you might place them in a column by itself and title it “legal” or “terms.” Another example is that you might have a “Company News” link, an “About” page, an “Employment” page, and a “Contact” page. You might place all of these links, arranged according to importance, into a column titled “About <Your Company Name>”. It is important to keep the footer organized, so that users can find information quickly. And, it’s important to consider any organizational differences between your self-styled footer and your main navigation; vast differences in categories, hierarchies, or other organizational aspects might create confusion.

Make it Beautiful

If you have just a few main links that you want to promote, you could have a serious aesthetic opportunity for your footer. This can be a place to show off your great design skills by creating a section with some real style. Use large icons or a captivating design. Basic design principles such as negative space and contrast can really captivate visitors. Tie it in with your site so that it accentuates the rest of the site and leaves a great lasting impression on your user.

Get Interactive

It is very common now to see links within the footers of sites where users can interact with the site owners or others who follow them. Many sites, especially blogs, will place a list of their most popular articles of all time in the footer of their site, as well as recent social media updates. Unlike the other footer options, this is a great way to add dynamism to your template while still offering those who are nearing the end of your page content to get more involved with your company or your subject matter.

Place Credits and Affiliate Links in the Footer

You certainly don’t want these links sprinkled throughout your more important content. The footer is the best place to place links such as terms of service, copyright, hosting affiliation links, partners, related services, and anything else that doesn’t directly promote your company. These are rarely more interesting than your primary content, but if these links must be sitewide, the footer is likely your best option.

Include a Search Bar

Maybe your user didn’t find what they were looking for. If they didn’t, the footer is a thoughtful place to put a search bar, where visitors can look up information or search via the keyword or topic that they are looking for. This is the last place a user will look before going elsewhere to find what they’re looking for, so it is important to help in every way possible so that they can find what they are looking for on your site. This also opens up opportunities for users to find other related pages where they may find pertinent information or related topics, increasing pageviews and giving you more chances to convert this visit into a sale.

If you’re wondering whether your footer search bar is working as intended, consider using a hidden form field, URL variable, or separate “action” for the form so that you can meticulously track how many users you saved from walking out the door with your searchable footer.

Conclusion

The footer of your site doesn’t have to be boring. It can be a vibrant place that serves a valuable purpose for promoting your website and its content, your products, social media pages, and more. It is all about user experience. Get the user’s attention, make the content easy for users to find, and promote interesting links and information on your site. Having an excellent footer will increase pageviews and help promote your site and brand.

How have you designed your footer? Do you offer a sitemap in the footer? How about social media links? Let us know what you think is the best way to design a footer in the comments below.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Johan

    Nice article, thanks! My question is tho… nowadays the footer is a lot bigger than in the past and usually dark. Has anyone used anything else than the ‘current’ design with better results?
    The ‘bubbly’ footer is a nice idea, but might be too colorful/look cluttered/take the attention of the rest of the page.. What is everyone else’s opinion on that one? (just curious)

    • http://www.darlingblogs.com marianney

      I too have noticed that most large or widgetized footers are dark, but not all. I’ve seen footers with the same background color or image as the header, maybe slightly modified.

      In any case, I like the large footers, I just wonder do people tend to ignore them? I’d be afraid to only have my search bar, social links, contact form, etc. solely in the footer. But as an addition to other locations, I think it works well.

      As for the colorful footer, I tend to like fun and unique footers like that. They just make me happy and it shows that a lot of thought went into the entire site experience/design. You usually don’t see it until you scroll down so I don’t believe it would take away from the main content but that’s just my opinion.

      Just my two cents…

  • Dianne

    Personally tiny white type on black/grey backgrounds are a curse for non-perfect eyesight. I won’t bother looking at a footer (or anything else) that is so user unfriendly. I don’t understand why it persists as a style. All of you who think it looks so great will know why I’m complaining in a few years. Design should not get in the way of user access or functionality, in my opinion. Any site that makes it hard for me to find what I want will lose me as a visitor. And I might be a buyer you’ve lost to a better designed site. Just a thought.

  • Kelly

    I like the one on Pilgrimage Software’s site. Simple, functional, out of the way.

    I’ve never been a fan of a whole bunch of stuff crammed at the bottom of the page just because someone felt they were supposed to because everyone else did.

  • Gcs

    I didn’t have a problem with the “bubbly” design myself because I was already familiar with Webdesigner Depot, which uses the same graphic at the top of the pages. I thought that it carried the theme through nicely, and partly because of the bright colors. With browsers that have multiple tabs, we often have several sites open at the same time, switching back and forth. To me the same bright graphic at the foot was a nice reminder of which site I am on, and what type of site I am on.

    Within the last few years, I have noticed footer areas growing to similar sizes as those displayed. I must admit that I have tried to reduce the amount of footer information in my more recent sites, however each footer presented here seemed logical for the site it was for. I think it depends on the client and their wishes, plus how much they have to offer. Many sites start out small, then grow in size. At that point, a more useful footer could be a welcome improvement.

  • http://www.jkb.com.au Jacob

    @Johan, the bubbly footer only really works if the rest of the site design is equally colourful, otherwise it will indeed direct attention away from the true content.

    I think the point is that the footer can be a place to be creative too, as long as it’s in keeping with the overall design/feel of the site.

    I know I’m guilty of not using the footer space to its full potential!

  • http://buckstop.biz Irene Hartfield

    Thanks for your inspiring article. I changed my boring centered list of page links in my footer to a sort of site map (although I have a “real” site map on the site) and the client loved it. Said it would make it easier to guide people through the site over the phone. I think it looks a lot sharper, too!