When a user navigates to a website, they usually start looking around, and if you’ve really piqued their interest they might even scroll right down to the bottom of your homepage. To many, this is usually a dead end. The user either leaves the website or scrolls back up to navigate to another page if you really caught their attention. But what if your footer could be the beginning of a completely new journey for your users?
Footers have gone through various phases during the past few years; from one-liners, to simple sitemap footers, to fat footers containing lots of information and interactive elements.
Ask any web designer and they’ll tell you that adding a footer to the design comes as second nature. No one really questions whether a footer is needed or how to optimize it for best results.
Although footers seem to be a given, they’re probably the most neglected section when it comes to website design. That’s such a waste when you find out that well-designed footers have the potential to increase sales conversions and revenues!
Establishing Uses for Your Footer
Do you even need a footer? If the answer is “Yes of course!”, then you need to think about the reasons behind your answer. Does your website have a complex navigation structure that requires a footer to highlight important links? Do you need to highlight specific sections on your website? Do you want to add a powerful call to action to boost conversions? Or do you perhaps want to highlight your social media accounts and contact details?
Keep in mind that some website designs automatically exclude footers, like Facebook and Quora for example which feature endless scrolling.
Designing the Perfect Footer
A successful footer allows users to accomplish a task or objective (finding information or subscribing for example). As a designer you must understand your users and their behaviors in order to be able to decide the most optimal use for your footer.
Footers come in all shapes and sizes and can include all sorts of components, among which are:
Mainly used by search engines for indexing purposes.
This could be one of the most important components in your footer. If a user has scrolled this far down, chances are they didn’t find what they were looking for, so here’s your chance to provide it. The types of links you add here can be based on your user behavior flow or perhaps most-searched queries, or alternatively internal pages that need a ranking boost.
Calls to action
Placing a CTA in the footer could be a perfect conclusion for your webpage because it gives visitors a specific direction and contributes to the continuity of the experience.
You can add a link to your main contact page here, not your actual form, since visitors expect your contact information to be linked to in the footer (as well as the top right corner of the header).
About/Keywords for SEO
The SEO value of keywords in footers is debatable. However, you can use the opportunity for one more quick description of who you are, including your main keywords.
Your go-to protection against plagiarism, albeit a weak one. It doesn’t really guarantee anything but it if your footer displayed only one thing, this would probably be it.
- Contacts & map
This tells google about your location and gives visitors easy access to reaching or contacting you. This is especially useful if users are inclined to visit or call after viewing your website, think restaurants or retail shops.
- Social icons
The footer is considered an optimal place for linking to social media pages because it’s a natural continuation of the experience. It also ensures that if a user clicks and gets drawn into the social media vortex, at least it happens after they’ve gone through your entire page first!
- Newsletter subscription
This might not be the best place to place a signup box, but it is done. Just make sure it’s a well-thought out design that helps conversions rather than a lone box added as an afterthought.
Another option that can be used if you really must, but not advisable. Search boxes are usually expected to be above the fold.
- Certifications and awards
This is a good sign of authority and credibility that could increase visitor trust and encourage them to navigate to another page to further explore your offerings.
Designing the Perfect Footer
Usability is all about indulging human behavior. Keep that in mind while you take the following points into consideration as you design the perfect footer.
Aim for Simplicity
“Make it simple, but significant.” –Don Draper
People are bad at processing a lot of information and if your footer design is complex people will get distracted.
Simplicity is one of the most important principles in design and usability. It’s about removing unnecessary elements from your design, allowing users to get your point easily.
Airbnb’s website illustrates the principle of simplicity nicely:
- They use a single font in two shades of grey
- Links are categorized in a highly scannable 3-section format
- Two clear dropdowns are available for changing settings
- Three simple social media icons
Everything is clear and in its expected place with simple typography, neat organization and neutral grey shades that are easy on the eyes.
Contrast helps an object stand out by making it visually distinctive from other objects in the background.
Since the footer is the last thing that appears on your website, it will be disregarded if it is visually unappealing or if it blends in too much into the background. Making good use of the contrast principle will greatly help you with attracting a user’s attention and directing their eyes to important information or CTAs.
Contrast is not confined to colors, it can be achieved using other style elements like sizes, shapes, and typography styles.
Shopify cleverly use contrast in their footer design:
- The dark blue color commands your attention
- The red CTA button contrasts nicely with the blue background, thereby drawing attention
- The hierarchy of font sizes and boldness to differentiate between main five navigational elements
Think of Google’s web page design. It’s almost all white space free from distractions; just the logo, a search field, and search button.
White space improves text readability, creates balance in your design, simplifies your design, and helps you highlight important information.
Mozilla’s website footer efficiently makes use of white space which helps users quickly identify different categories, making the design very simple and easily scannable.
Organize Information well
In design, the close proximity of elements suggests a relationship between them.
When designing the footer, this becomes a very important design concept since in many cases it is a collection of links, icons and categories which need to be visually separated and categorized.
Grouping related elements make it easy for your users to visually recognize the categorization and helps guide them to the information they’re looking for.
Smugmug organizes their footer links and elements using the concept of proximity. You can see that they have 5 main categories with relevant links underneath each. They also use space to separate these categories from the newsletter subscription and social media icons.
However you choose to design your footer always keep these 3 points in mind:
- Make it relevant to the information you’re displaying
- Make it visually appealing, allowing attention to be drawn to critical information
- Make it simple in order to avoid an overwhelming experience
What’s your take on footer design? Have examples of websites with super cool footers? Let us know below!