How to make a site footer: design options, why you need it, tips

Developers often overlook the fact that footer for a website (translated from English footer / footer) is one of its basic elements. It can provide more complete information about the company, and also performs various useful functions: it facilitates navigation, helps the visitors of the web project to navigate, and is useful for some commercial purposes.

Earlier in the blog, we considered the development of the site header, and today we will talk about the footer. Here you need to competently approach the choice of control components that will be included in it in order to get an effective and optimal solution.

We bring to your attention a translation of an article from Agentestudio with current developments on the design of the footer element on a web page. We also recommend checking out our selection of 40+ beautiful site footers for inspiration.

The post has three parts:

Why bother with a basement?

1. He visually completes the block of content

Creating a catchy footer will attract even more visitors to you. It is difficult to predict how long potential readers will browse the website – maybe indefinitely! Therefore, when designing it, you should remember: the element is located “in the wings”, it will always find its audience.

2. Helps the site owner to make “leads” (sales, actions)

Let everyone see that after the content, the web project doesn t end. Place there any suitable option for return contact: Email-mail, contact form or just your address. These additional details will help readers take the “next step” and call / write you.

3. Footer contains useful information

Do you have more information that you can t fit on the page? – in this case, it is easily added in the “basement”. These can be any external links to useful resources, your partners or colleagues. It is also logical to include here some legal data by the type of reference to the terms / conditions of service, disclaimer, etc. (usually they are placed somewhere at the very end).

4. It directs website visitors

It is necessary to take into account one important nuance: if a person, when viewing / scrolling a web page, turns out to be too far from its title, then he did not find what he came to you for. “Redirect” it using the navigation at the very bottom of the screen to the main sections of the web resource.

5. To attract attention

If all the content looks scarce, then you can try to attract attention by designing the footer of the site in the most vivid, creative style and even make it somewhat “entertaining” (as in hand-drawn designs and layouts with cartoon graphics).

Ten web footer designs

Taking into account the existing design trends and looking at dozens of examples, the authors of the original note have identified the most popular and effective directions for this task.

1. Conciseness

“Simplicity is the ultimate sophistication“- said Leonardo da Vinci. Excessive “fullness” of the footer does not always indicate its information content. It s best to focus on a few (no more than three) elements and keep it minimal and simple. It makes sense to use the following combination: copyright + logo + social media buttons. Nowadays, the risk of plagiarism must not be forgotten, so drawing attention to copyright is always useful.

2. Sitemap

This element is often underestimated as few people use it. However, unlike the aforementioned minimalist solution, here the voluminous footer with a large number of headings / directories serves a slightly different purpose. Even if readers don t find what they need, search engines will definitely be able to: a large footer allows Google to better index the pages of a website, which can have a positive effect on its position in search results.

3. Feedback form or newsletter

When placing a contact form, web designers choose the following positions: top-right, bottom-right, or center. If you add a link, then it should redirect to the web page with the form, and not display it in a pop-up window. It is also not recommended to publish email addresses, as they often attract spammers and automatically get into their databases.

The second method of attracting additional audience is to subscribe to the newsletter, which is located in the basement of the site. This function is especially recommended for online stores: tell us what and how often the user will receive in this mailing list + mention the number of already existing active subscribers.

4. Additional navigation

This solution will help orient those who are “lost” in your online project. If people are already at the very bottom of the page, then most likely they never found what they were looking for. In this case, a properly selected set of useful links in the footer will correctly guide them through the main sections of the web resource.

You can arrange the menu in the form of tabs, drop-down lists or a regular list in several columns. Here you must first define the most important or simply the most visited sections / pages and make them sufficiently visible.

5. Social networks

Usually, companies have a positive attitude towards the audience that comes to them from social networks. However, at the same time, some developers are in no hurry to embed such functionality in themselves, for fear of losing some of the visitors. Since now Facebook, Instagram and others have long been part of the marketing funnel of the business, you should take care that the footer of the site contains the appropriate icons and links to your groups in social networks.

In the above photo, the social buttons are centered, and in addition to them, they also added: a short menu, contact details, terms of use and copyright information. A very nice and functional example.

6. Call to Action (CTA)

“Let s talk!”, “Hire us!”, “Enter your phone number and we will contact you as soon as possible!” – a simple but catchy call to potential readers / customers together with a contact / subscription form can improve the conversion of a web page. You need to make sure that your message is very clear and does not contain any incomprehensible details – this is important, because modern audiences don t like to think too much about exactly how to proceed.

7. Contact information, phone number, address

Most often, users expect to find a block with contacts in the basement. Write your phone number with the country code there – this will enable search engines to understand where the business / web resource is operating specifically. It is advisable to make each link clickable so that anyone can quickly dial the specified number or send an email directly from their smartphone (read how to link to a phone number in HTML in another blog).

The above example contains only the necessary information, which in turn does not distract attention and does not distract on unnecessary trifles.

8. Using maps

Placing the card instills additional confidence in the business and at the same time clearly shows where the company s office is. This is a good way for Google Maps fans to find your address faster. This feature can be beautifully embedded in the template, plus it is very effective for perception.

9. Custom solutions

When creating a site footer design, the presence of various drawings, animation, team photos, etc. is encouraged. – it contributes to more “personalization” of your business / project. Some layouts allow the addition of video, which is an even more memorable way to convey the necessary information to a potential client.

10. No footer

Sometimes you can move away from the classic header-content-footer structure and stand out from the “crowd” of competitors by removing this element altogether. This approach is allowed for some landing page or main page, while keeping the standard template in other web pages. So in the screenshot above there is no bottom block for the purpose of highlighting key accents.

How to make your footer as effective as possible

In order to avoid unnecessary obstacles in the implementation of your initial idea, you need to have a clear understanding of what you and your visitors expect to see at the bottom of the website.

1. Identify the main components

• Review the overall design of the resource and determine which footer format you need (or choose one of the options above).
• Don t forget mobile – think responsive, mobile or dedicated app.
• If necessary, create several layout variations for individual pages: for example, insert a geographic map into the contact page, etc.

2. Decide on the design

• Select the size and number of sections / columns. Format them in terms of importance (or standards): contact info is usually placed in the center or in the right corner of the block.
• If necessary, by analogy with a fixed menu using HTML / CSS, you can attach a footer to the bottom of the browser screen and “freeze” it when scrolling. This implementation is extremely rare, usually it is just added after the content.

3. Using additional elements

• Insert social features: Twitter widget with latest posts, FB subscribe buttons, etc.
• Add google maps or any other services.
• Maintain the general style: Check out the template options in Bootstrap or WordPress, create your own solution from scratch, or get inspired by other designers.

Total. In this article, we have shared with you various examples and tips on how to make footer effective and useful for your website. However, do not rush to apply them all at once, think about your potential target audience, its expectations and preferences – be sure to take all this into account in your work. If you have any questions / additions on the topic, write below.