On a webpage, the footer remains at the bottom of every page and below the main body of content. This term has come from the print world; however, it has a different meaning in the digital world. In the printing industry, a ‘footer’ is a consistent design element that is seen across all the pages of a document. However, in the digital world, the footer contains different types of information.
In yesteryears, the footers were either used as the utility areas containing succinct data on a subject (tiny and nearly intelligible texts) or used as a location for different types of links. However, the importance of footers has changed over the years and they work as a crucial reference point for the people. Therefore, the footer is used to perform a variety of tasks these days.
UX designers pay more attention to the design of the elements located above the fold of a webpage, as the majority of the users spend more time reading or viewing the top of any web page. However, the importance of the footer has changed over the years and this element can be used to include additional information or navigation options at the bottom of a web page. Therefore, it is important to consider the usefulness or the application of the footer on a particular web page before considering its design.
In a recent study, Chartbeat tested around 25 million website visits. It shows that many visitors are willing to scroll down the long pages (through thousands of pixels) in order to see what is in the footer. Therefore, the footers are no longer overlooked on a web page.
In any of the aforementioned scenarios, it is essential to ensure that the design of the footer remains consistent with the design of a web page alongside being predictable and easily discoverable. It is important to consider the main objective of a website along with the main application of the footer before considering the type of content that is supposed to be included in the footer.
How you want to feature the footer on a web page depends upon your discretion, as there are many options.
Infinite scrolling is a method of web designing and the content being featured on a web page is continuously loaded with the help of this technique. Hence, there is no option to use the conventional form of the footer on this type of web page. In this scenario, you may feature the content of the footer in the right rail (right-side column) or in wider Global navigation.
This type of footer is known as a ‘mini footer’ and this type of footer becomes easier to use when used in the right-side column (right rail) of a web page instead of on the global navigation, as the footer stays in one place and does not move below the fold whenever a visitor scrolls down a web-page.
For Example –
LinkedIn.com usually features the footer content at the bottom of the right rail.
Source: LinkedIn.com
BarstoolSports.com features the footer content within the global navigation.
Source: BarstoolSports.com
Six ways to improve the user experience on long scroll mobile websites.
The footer’s content usually remains the same across all pages of a website. However, it is useful to customize the content of the footer according to the type of a web-page in some scenarios. These footers are known as ‘contextual’ footers. This type of footer can be ideal for websites receiving multiple visitors or different types of users. You may use the contextual footer to feature some vital pieces of information (relevant to a particular web page) if you were unable to feature these data on global navigation.
For Example –
The contextual footer of Medium.com includes some link-related posts
Source: Medium.com
The most viewed part of a web page has always been below the fold or top portion of a web page. However, in recent years, a change has been noticed in this pattern of users’ behavior, as many users have been found to engage more with the bottom of a web page in comparison to the top of that web page. These users are known as the most-engaged users who view the bottom of a web page three times longer than the top of a web page. The fat footers are ideal for such visitors, as these footers contain a plethora of data and various elements.
For Example –
Joulefinancial.com offers a great deal of information via the footer
Source: Joulefinancial.com
You can add an additional level to the web page footer when using sub-footers. These footers are useful if there is a particular type of information that you want to feature in a different way on your website. For example, you may add the subscribe buttons, social media icons, or copyright below the useful website links or other important data like the “Get a Free Trial” CTA or any giveaway above the main footer. See one of the best examples of SEMRush footer having a sub-footer above the main footer.
Source: SEMRush.com
These footers are used to suggest some type of action to the users, such as ‘Give Us a Shout’, ‘Hire Us’, or ‘Join Free Weekly Newsletter’. There are various other examples of CTA-focused footers and these footers are always followed by the phone number and e-mail address of a business.
Example –
Demicreative.com or Bluestag.co.uk feature CTA-focused footers followed by the contact details.
Source: Demicreative.com
Socialtriggers.com has a traditional CTA-focused footer that features no contact details.
Source: Socialtriggers.com
On some websites, a list of different types of services or products is mentioned in the footer. These services or products are usually linked to various pages of a website and a user may get to these web pages by clicking on the services/products mentioned in the footer.
For Example –
Webflow.com lists various products/services that can be used for the designing of eCommerce platforms.
Source: Webflow.com
As the name suggests, this type of footer includes different types of contact information for a business, such as an office address, map with Geolocation, phone number, and e-mail address. A contact-focused footer may even include the address of different branches if a company has offices in more than one location.
For Example –
The footer of Bluefountainmedia.com is filled with the contact information
Source: BlueFountainMedia.com
To get an idea of how well a footer design works on your website, Wireframing can be a quick and cost-saving solution to try out different combinations.
The content of the footer or the type of elements present in the footer depends upon the demands of a business or the user’s goals (the final states that users want to reach). The web designers select different types of footer elements due to this reason and some common examples of footer elements have been listed below.
Most websites include utility navigation or utility links in the footer. These links point to the following details of a business.
It is prudent to use the aforementioned links at the footer even if you have mentioned these details at the top of a web page, as many users search for contact information or the details associated with customer support at the footer.
The main navigation can be included in the footer along with the header of a web page. This feature is extremely useful for long web pages, as it enables a user to move to different sections of a website without scrolling to the top in order to reach the main navigation.
If you want to help the visitors to your website find additional content that is not directly related to the website’s main objective, then you may include the secondary task links to the footer. The following list may give you an example of the secondary tasks to include in the links and these tasks are not usually added to the global navigation or utility navigation.
A site map provides a list of pages on a website. Therefore, the style-map-styled footer features the components of global navigation along with the web pages that are absent in global navigation. This type of footer exposes the lower-level subcategories of the main categories and is useful in the following scenarios.
It is important to remember that the Site-map footer component may not include all the web pages unless there are fewer than 26 pages on a website. In this scenario, you may feature a complete site map on a separate web page and provide a link to this web page at the footer. A large website with multiple levels of domain or information benefits from this type of footer component.
It is a proven fact that businesses with awards and positive testimonials can quickly instill credibility into visitors’ minds. Therefore, it is a sensible decision to feature the awards and testimonies in the footer if you want to win the trust of the users and want to build authority.
However, it is important to remember that featuring numerous testimonials or awards may deliver the wrong message to the visitors of your website. They may believe that a company is featuring multiple testimonials or awards because it does not have enough maturity or stability.
Therefore, it is prudent to run a usability test or A/B test with the target audience in order to determine if this strategy is suitable for the target customer or to determine the number of testimonials to be featured at the footer without delivering a wrong message to the users.
A large business organization may own multiple brands or may preside over numerous smaller companies. These businesses generally use Universal navigation to connect child companies to the parent company.
Universal navigation provides a link to a website’s homepage from the Subsites (subordinate sites), Microsites (individual web pages), or various other sections of a website.
These businesses may equally benefit from including a list of brands/subsidiaries in the footer in order to underpin the awareness of other companies/brands within a company’s portfolio.
The web page footer may even be used to increase customers’ engagement, as most users scroll down to the footer in order to find information regarding promotional offers or coupons or to stay updated with regards to the product releases or sales of a business. Hence, the footer may include prompts for mailing list sign-ups, social-media links or links to a company’s social media accounts.
E-mail newsletters are one type of e-mail communication sent to the audience in order to deliver the latest news, tips, or updates regarding a company or its products and services. The e-mail newsletters keep the subscribers engaged, connected, and informed regarding what is new with an organization or business and you may include the e-mail newsletters in the footer to increase users’ engagement.
The links to social media accounts can be equally useful in increasing the engagement of the users. However, it is important to consider how frequently you post on social media platforms before embedding a widget for social-media feed into the footer. You need not embed this widget if you have a less active social media account. However, there is no negative effect on your business if you feature links to social media accounts in the footer.
After having a view on all these, let’s see what is the purpose and importance of website upgrades. Importance of Updating Website and Steps to Upgrade
The importance of web page footers may have changed since its introduction in the 1990s and the design concept has also undergone changes accordingly. However, a few problems with the footer still persist and the following tips may help you avoid/resolve these issues.
It is important to include only important information in the footer. For example, it is not essential to include an entire site map of large websites with multiple web pages in the footer.
It is essential to prioritize the content and to display the links to the first-level or second-level categories in the Information Architecture (IA). You may feature the link to a lower-level web page if this page is important instead of showing all the levels of the information hierarchy.
If a link on a website has no relation to the secondary tasks or global navigation, then it is called an orphan link. In many websites, the footer includes ‘orphan links’ along with or devoid of other links. The users may not spend a lot of time looking at the footer if it has no pattern of organization.
In this scenario, it is prudent to use visual-design patterns in order to indicate the visual hierarchy, as it conveys the information hierarchy of the items at the footer with clarity to the users.
In many scenarios, the Resources link on footers sometimes represents the conventional footers with different names. It may lead to confusion and make it difficult for users to understand the purpose of the link.
It is important to stick to conventional and easily understandable terms in order to resolve this problem. A usability test may help you find out the terms that are confusing to the users.
It all depends on the purpose of your site and the needs of your visitors (Give space to what your business offers to the audience).
Are you a big eCommerce site? Lots of links may help to occupy the footer space.
Is customer service busy? Add that info down there.
Just ask yourself, do your visitors have an important question that isn’t answered in the header or in the rest part of your website?
If so, add it to the footer.
Let’s wrap up here…
You can share your thoughts and experiences on more footer examples, in below comment box…
Thank You!
Browse some of our latest articles...
Subscribe to our newsletter and learn about the latest digital trends.
