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

Футер, или подвал сайта, обозначается тегом 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-файла.