Website Design - Do Not Neglect the Footer

by jan111

The importance of good footer design in modern websites; tips for designing attractive footers together with suggestions for footer content.

Only a few years back, website footers were dull affairs - a line of menu options and a copyright notice with no images and little design flair.

Nowadays, however, a well-designed website footer adds a final "feel good" factor to a well-designed website page - it can be used to confirm the positive impression already created.

The footer can also be used to add extra details such as contact details, a "call to action", testimonials, professional accreditations, professional membership, social media buttons, a few extra SEO words and menu options.

To begin with, let's look at two tips for making your footers more visually attractive.

Tip 1 Use Visuals to Reinforce Your Message

"A picture is worth a 1000 words" - this old adage applies to footers as well as to the rest of your website. Use carefully chosen pictures to give the reader an idea as to the type of services you offer.

Website footer gives a selection of website designsFor example, in our own Web Design and Redesign businesss, we give a selection of websites that we have designed at the top of the footer section (one of these websites just might be of a style that catches the reader's eye).





Asymmetric products are strikingThe site does a similar thing in a striking, asymmetrical way:





 Ipswich rental Property shows the types of properties rented across the top of the footerOther sites - like this Ipswich Letting Property site - have a list of properties owned by the company running across the top of the footer:



Whichever layout you choose, using footer images to show an additional selection of products or services helps to improve the visual appeal of your website as well as tempting the viewer with a visual display of products/services that you did not have space to show in the header.

Tip 2 Maintain Design Consistency With the Rest of the Website

Maintain a cohesive feel to your website by following through design elements found elsewhere. At a minimum, echo colours and font and little design details such as rounded corners or image borders.

Knowsley Safari ExperienceIn this Knowsley Safari Experience website (, the wavy background of the footer menu options echoes the wavy lines found elsewhere on the page.






Sometimes, you can use some creativity in getting your message across. For example, in this driving instructor website (, the website header illustrates the diverse types of learner drivers who could benefit from driving lessons with the school whereas the footer illustrates the different types of driving experiences that open up once you have gained "the freedom of the road". Both follow a similar visual format:

Website header shows a diverse selection of learner driversWebsite footer shows a diverse selection of roads that are accessible once you have passed your test


In this cleaning company website (, the header photos rotate behind a central watersplash; in the footer, this water splash is stretched to form the top frame for images depicting the type of cleaning services offered (see section 1 above). Note how the different text sections of the footer are visually separated by using different levels of background opacity.

Website header has images that rotate behind a watersplashWebsite footer reuses the watersplash in the header

Next, let's look at some functions that modern website footers can serve.

Function 1: Call For Action and Contact Details

One function of a footer is to make a "call for action" and to give the appropriate contact details. Some companies give a small Google map, a link to such a Google map or a photo of their offices.

Bold call for action in an uncluttered designThis website shows how a minimal design can be very effective. Note that, in this design, the black background ot the Tel/Fax and Mob boxes serves as a simple but effective visual.




Other websites mix this call for action with reassuring words, as is the case with this website:

Call for action with reassuring words


Function 2: Testimonials and Companies Worked With

The footer can be an ideal place to add testimonials and/or companies who use your services. If your coding skills permit, use different testimonials on each page or use rotating testimonials.

Testimonial is different on each pageThe testimonial given on is different on each page - together with the attractive visuals, this helps to end each page with a "feel good" factor.





Rotating companies worked withThis website by combines a rotating list of the "great companies we've worked with" on the left with an inspirational "let your imagination soar with a website from us" message on the right.

Function 4: Social Media Buttons

Many websites put social media share/tweet buttons prominently at the top or side and there are reports that such prominent placing increases the effectiveness. The footer can, however, be used to put buttons linking to the company's Facebook/Twitter/Linkedin pages (as opposed to buttons asking the user to share the page onto their own Facebook/Twitter/Linkedin page) or simply to repeat the buttons for those who read first and then click.

prominently displayed footer social media buttons

This site shows how modern footers can give prominent and attractively presented social media buttons. (It also shows a prominent "call to action" and good use of a google map alongside the address.)

Function 3: Professional Membership and Accreditations

The footer is an ideal place to list your professional membership and/or accreditations and/or awards won.

Professional membership is givenThis website puts these professional memberships into a semi-opaque box overlaying a wide-screen road background that mirrors that of the header.

Function 4: SEO

Putting keywords into the footer is nowhere near as effective as putting keywords higher up on the page - after all, if you were a search engine, would you take more notice of a page that used keywords prominently at the top of the page for all to see or of one that tucked these keywords away in small font at the bottom? The footer can, however, be used to "top up" keywords found elsewhere on the page. It can also sometimes be - a bit - helpful in finding very non-competitive terms that you do not want to be included in the main text.

Footer SEOFor this website, we gave common mis-spellings of the company name tucked away in the footer so that people could find them by these mis-spellings if they searched for them in Google. We also put the main website keywords into a table that gives human visitors a useful checklist and that gives some extra keywords for search engines.

Another use that the footer has in SEO terms is to display the last page of your blog or to display some changeable information that you don't want to clutter up the main text with. This is because it is believed that search engines give some preference to sites that update their content frequently.

Function 5: Menu Options

In contrast to websites of a few years back that simply re-listed the main footer menu options in a horizontal line, modern-day footers allow themselves the space to set out these menu options in ways that assist the reader.

Allow space to layout footer menu options in a meaningful wayAs this website shows, footers are also an ideal place to link to menu options that you do not necessarily want to clutter up your top menu section - for example, the website pages targetting each individual town/city/state that the company is targetting.

Updated: 08/28/2012, jan111
Thank you! Would you like to post a comment now?


Only logged-in users are allowed to comment. Login
mikescoolstuff on 09/04/2012

Good tips, I find it's a good place for backlinks to your other online properties.

mikescoolstuff on 09/04/2012

Good tips, I find it's a good place for backlinks to your other online properties.

Mira on 08/27/2012

This is a great article, with clear organization and interesting ideas. And I loved the visuals, too.

sheilamarie on 08/27/2012

Helpful information on ways to use footers. Thank you!

Ragtimelil on 08/27/2012

I'm going to have to come back and read this in more detail. Thanks for the tips!

You might also like

Best Free Portfolio Sites for Artists and Designers

Are you an artist or designer (or both)? Where can you expose your portfolio ...

Understanding Website Development : How to Benefit?

With over 1.7 billion websites on the World Wide Web, the interface has becom...

Disclosure: This page generates income for authors based on affiliate relationships with our partners, including Amazon, Google and others.
Loading ...