Футер, или подвал сайта, обозначается тегом footer и располагается в нижней части веб-страницы. Несмотря на кажущуюся малозначимость, этот блок играет важную роль, влияя на удобство использования сайта и его ранжирование в поисковых системах.
Зачем нужен футер?
Футер помогает пользователям легко возвращаться к основным разделам сайта, переходить в социальные сети компании, находить контактную информацию или заполнять форму обратной связи. Кроме того, правильно оформленный подвал улучшает SEO, распределяя ссылочный вес всего ресурса и повышая его позиции в поисковой выдаче. Удобный футер также способствует улучшению пользовательского опыта и повышает рейтинг сайта в поисковых системах.
Когда пользователи обращаются к футеру?
Многие веб-дизайнеры ошибочно полагают, что до футера пользователи редко доходят. Однако практика показывает, что посетители часто обращают внимание на подвал сайта в следующих случаях:
- Желание продолжить взаимодействие: После прочтения основной информации пользователи могут захотеть приобрести товар, оставить отзыв или связаться с компанией. В этом случае форма обратной связи, контактные данные и ссылки на разделы с заказами должны быть размещены в футере.
- Навигация по ресурсу: Дочитав страницу до конца, пользователи часто ищут в футере ссылки на другие разделы сайта, чтобы не возвращаться к верхнему меню.
- Поиск информации: Согласно исследованиям, пользователи часто ожидают найти в футере контактные данные или ссылку на техподдержку. Поэтому, столкнувшись с проблемами, они пролистывают страницу до конца.
Основные и дополнительные элементы футера
Информация в подвале должна быть четко структурированной и лаконичной. Вот ключевые блоки, которые должны быть в футере:
Политика конфиденциальности
Ссылка на политику конфиденциальности должна быть легко доступной, особенно если вы собираете личные данные пользователей, такие как адреса электронной почты или телефоны.
Контактная информация
Физический адрес, электронная почта и контактные телефоны должны быть размещены в отдельном блоке. Это повысит удобство пользователей и их доверие к вашему ресурсу.
Ссылки на социальные сети
Иконки социальных сетей с активными ссылками помогут пользователям легко подписаться на ваши страницы.
Навигация по сайту
Перелинковка с основными разделами сайта в футере значительно улучшает навигацию. Можно продублировать навигационное меню из шапки сайта, обеспечивая быстрый доступ к ключевым разделам.
Призыв к действию
Форма обратной связи в футере будет смотреться органично и способствовать увеличению конверсии, побуждая пользователей оставить заявку или подписаться на рассылку.
Дополнительные элементы
- Способы оплаты: Логотипы платежных систем, которые вы принимаете, помогут пользователям быстро оценить доступные методы оплаты.
- Ссылка на мобильное приложение: Если у компании есть мобильное приложение, логично предложить его скачать, добавив логотипы App Store и Google Play.
- Краткий текст о компании: Несколько предложений о компании с использованием ключевых слов улучшат SEO, но избегайте чрезмерного использования.
- Информация об участии в знаковых проектах: Блок “СМИ о нас” с логотипами изданий и ссылками на статьи повысит доверие пользователей.
- Интерактивная карта: Для компаний с физическим офисом карта поможет посетителям найти дорогу.
- Гарантии: Информация о круглосуточной поддержке, возможности возврата товара или других гарантиях повысит уверенность пользователей.
- Кнопка “Вверх”: Удобная кнопка для быстрого возврата к началу страницы.
Виды футеров
Футеры могут быть разных типов в зависимости от назначения сайта:
- Стандартный: Одинаковый на всех страницах, находится внизу и не перемещается при скроллинге.
- Контекстный: Изменяет содержимое в зависимости от страницы, что полезно для сайтов с разной целевой аудиторией.
- Для бесконечного скролла: Размещается сбоку, что актуально для новостных порталов и других сайтов с непрерывным обновлением контента.
Создание футера сайта
Вот как можно создать статичный футер с использованием HTML и CSS:
Шаг 1. Подготовка HTML-структуры
- Создайте новый HTML-файл.
- Определите базовую структуру HTML, включая теги
<html>
,<head>
и<body>
. - Внутри
<body>
создайте разделы для хедера и футера, выделив подвал тегом<footer>
. - Внутри
<footer>
разместите контактную информацию, навигационное меню и значки социальных сетей. - Сохраните файл.
Шаг 2. Добавление CSS-стилей
- Создайте файл
.css
и откройте его в текстовом редакторе. - Определите цвет фона, шрифт и другие параметры для элементов футера.
- Чтобы закрепить футер внизу страницы, задайте
position: fixed
, а такжеbottom: 0
иleft: 0
. - Добавьте ссылку на CSS в
<head>
вашего HTML-файла.