Футер сайта: создаем правильно

Футер, или подвал сайта, обозначается тегом footer и располагается в нижней части веб-страницы. Несмотря на кажущуюся малозначимость, этот блок играет важную роль, влияя на удобство использования сайта и его ранжирование в поисковых системах.

Зачем нужен футер?

Футер помогает пользователям легко возвращаться к основным разделам сайта, переходить в социальные сети компании, находить контактную информацию или заполнять форму обратной связи. Кроме того, правильно оформленный подвал улучшает SEO, распределяя ссылочный вес всего ресурса и повышая его позиции в поисковой выдаче. Удобный футер также способствует улучшению пользовательского опыта и повышает рейтинг сайта в поисковых системах.

Когда пользователи обращаются к футеру?

Многие веб-дизайнеры ошибочно полагают, что до футера пользователи редко доходят. Однако практика показывает, что посетители часто обращают внимание на подвал сайта в следующих случаях:

1. Желание продолжить взаимодействие: После прочтения основной информации пользователи могут захотеть приобрести товар, оставить отзыв или связаться с компанией. В этом случае форма обратной связи, контактные данные и ссылки на разделы с заказами должны быть размещены в футере.
2. Навигация по ресурсу: Дочитав страницу до конца, пользователи часто ищут в футере ссылки на другие разделы сайта, чтобы не возвращаться к верхнему меню.
3. Поиск информации: Согласно исследованиям, пользователи часто ожидают найти в футере контактные данные или ссылку на техподдержку. Поэтому, столкнувшись с проблемами, они пролистывают страницу до конца.

Основные и дополнительные элементы футера

Информация в подвале должна быть четко структурированной и лаконичной. Вот ключевые блоки, которые должны быть в футере:

Политика конфиденциальности

Ссылка на политику конфиденциальности должна быть легко доступной, особенно если вы собираете личные данные пользователей, такие как адреса электронной почты или телефоны.

Контактная информация

Физический адрес, электронная почта и контактные телефоны должны быть размещены в отдельном блоке. Это повысит удобство пользователей и их доверие к вашему ресурсу.

Ссылки на социальные сети

Иконки социальных сетей с активными ссылками помогут пользователям легко подписаться на ваши страницы.

Навигация по сайту

Перелинковка с основными разделами сайта в футере значительно улучшает навигацию. Можно продублировать навигационное меню из шапки сайта, обеспечивая быстрый доступ к ключевым разделам.

Призыв к действию

Форма обратной связи в футере будет смотреться органично и способствовать увеличению конверсии, побуждая пользователей оставить заявку или подписаться на рассылку.

Дополнительные элементы

1. Способы оплаты: Логотипы платежных систем, которые вы принимаете, помогут пользователям быстро оценить доступные методы оплаты.
2. Ссылка на мобильное приложение: Если у компании есть мобильное приложение, логично предложить его скачать, добавив логотипы App Store и Google Play.
3. Краткий текст о компании: Несколько предложений о компании с использованием ключевых слов улучшат SEO, но избегайте чрезмерного использования.
4. Информация об участии в знаковых проектах: Блок “СМИ о нас” с логотипами изданий и ссылками на статьи повысит доверие пользователей.
5. Интерактивная карта: Для компаний с физическим офисом карта поможет посетителям найти дорогу.
6. Гарантии: Информация о круглосуточной поддержке, возможности возврата товара или других гарантиях повысит уверенность пользователей.
7. Кнопка “Вверх”: Удобная кнопка для быстрого возврата к началу страницы.

Виды футеров

Футеры могут быть разных типов в зависимости от назначения сайта:

1. Стандартный: Одинаковый на всех страницах, находится внизу и не перемещается при скроллинге.
2. Контекстный: Изменяет содержимое в зависимости от страницы, что полезно для сайтов с разной целевой аудиторией.
3. Для бесконечного скролла: Размещается сбоку, что актуально для новостных порталов и других сайтов с непрерывным обновлением контента.

Создание футера сайта

Вот как можно создать статичный футер с использованием HTML и CSS:

Шаг 1. Подготовка HTML-структуры

1. Создайте новый HTML-файл.
2. Определите базовую структуру HTML, включая теги <html>, <head> и <body>.
3. Внутри <body> создайте разделы для хедера и футера, выделив подвал тегом <footer>.
4. Внутри <footer> разместите контактную информацию, навигационное меню и значки социальных сетей.
5. Сохраните файл.

Шаг 2. Добавление CSS-стилей

1. Создайте файл .css и откройте его в текстовом редакторе.
2. Определите цвет фона, шрифт и другие параметры для элементов футера.
3. Чтобы закрепить футер внизу страницы, задайте position: fixed, а также bottom: 0 и left: 0.
4. Добавьте ссылку на CSS в <head> вашего HTML-файла.