How to make a footer site footer: design options, why you need it, tips
Developers often overlook the fact that the footer for the site (translated from English footer / basement) is one of its basic elements. It can give more complete information about the company, and also performs various useful functions: it facilitates navigation, helps visitors of the web project to orient themselves, and will be useful for some commercial purposes.
Earlier in the blog, we considered the development of the site header and today we will talk about the basement. Here you need to competently approach the choice of control components that will be included in it in order to obtain an effective and optimal solution. We bring to your attention a translation of an article from Agentestudio, which contains the best developments in footer design and its illustrative examples.
The post consists of three parts:
The use of footer’a for a web resource.
10 options for the design element.
3 steps to create it.
WHY DOES A CELLAR NEED IN GENERAL?
1. It visually completes the content block.
Creating a catchy footer will attract even more visitors. It is difficult to imagine how long potential readers will be browsing the website – perhaps indefinitely! Therefore, when designing it, you should remember: the element is “in the air”, 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 does not 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.
Have more information that can not be placed on the page? – in this case, it is easily added to 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 on the type of reference to the terms / conditions of service, disclaimers, etc. (they are usually placed somewhere at the very end).
4. It directs visitors to the website.
It is necessary to take into account one important nuance: if a person when viewing / scrolling a web page is too far from its title, it means 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 rather poorly, then you can try to attract attention by decorating the site’s footer in the most vivid, creative style and even make it somewhat “entertaining” (as in drawing designs and layouts with cartoon graphics).
TEN FUTTER WEB DESIGN OPTIONS
Considering the available design trends and reviewing dozens of examples, the authors of the original note highlighted the most popular and effective areas for this task.
“Simplicity is an extreme degree of sophistication,” said Leonardo da Vinci. Excessive “fullness” of the footer does not always indicate its informativeness. It is better to focus on a few (no more than three) elements and keep it minimalist and simple. It is logical to use the following combination: copyright + logo + social networking buttons. In our time, we must not forget about the risk of plagiarism, therefore drawing attention to copyright is always useful.
This element is often underestimated, since few people use it. However, unlike the above-mentioned minimalist solution, here the volume footer with an extensive number of rubrics / directories serves somewhat different purposes. Even if readers do not find what they need, search engines will definitely be able to: a big footer allows Google to better index the pages of a website, which can have a positive effect on its position in search results.
In order to avoid unnecessary obstacles in the implementation of their initial ideas, you must 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 format of the footer you need (or choose one of the options above).
Do not forget about mobile devices – think about the adaptive, mobile version or a special application.
If necessary, create several variations of the layout for individual pages: for example, insert a geographic map on the contact page, etc.
2. Decide on the design
Select the size and number of sections / columns. Design them in terms of importance (or standards): contact infa, as a rule, is 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 “fix” it when scrolling. Such an implementation is extremely rare, it is usually just added after the content.
3. Use of additional elements
Insert social functions: Twitter widget with the latest posts, subscribe buttons for the FB-page, etc.
Add Google maps or any other services.
Follow the overall style: look at the template options in Bootstrap or WordPress, create your solution from scratch or be inspired by the work of other designers.