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

Подвал сайта — это часть веб-страницы, обозначаемая в коде тегом footer и расположенная в самом низу. Если вы впервые создаете свой сайт, то может показаться, что этот блок не очень важен, ведь до него пользователь должен еще доскроллить. Однако это популярное заблуждение может стоить вам клиентов.

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

Когда посетители используют футер сайта?

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

• Заинтересованность в продолжении взаимодействия. Пользователь уже прочел всю информацию и желает приобрести ваш товар, воспользоваться услугой или поделиться личным мнением. Поэтому в нижнем блоке логично разместить форму обратной связи, ссылку на страницу с информацией о том, как сделать заказ и, конечно, контакты.
• Упрощение навигации по ресурсу. Дочитав информацию на странице, пользователь скорее закроет ее, чем вернется обратно в верхнее меню, чтобы найти ссылку на следующий раздел. Многие специально скроллят до самого низа, чтобы из футера перейти на нужную страницу.
• Поиск информации. Согласно исследованиям маркетологов, интернет-пользователи подсознательно ожидают, что найдут в футере ссылку на форму связи с технической поддержкой или контакты компании. Поэтому в случае каких-либо проблем специально пролистывают страницу до конца.

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

«Собираем» подвал: базовые элементы и дополнительные данные

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

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

Согласно последним изменениям в действующем Законе «О персональных данных», если вы собираете любую информацию о пользователях — адреса электронной почты и физические адреса доставки, ФИО, контактные телефоны, необходимо соглашение о политике конфиденциальности. Ссылку на этот раздел стоит разместить так, чтобы посетитель сайта без труда ее отыскал.

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

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

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

Используйте иконки со ссылками на свои страницы в соцсетях, чтобы пользователи могли перейти и подписаться на вас всего по одному клику. СММ — важный способ взаимодействия с аудиторией, который значительно повышает лояльность клиентов, а размещение блока «Мы в соцсетях» в футере даст возможность для органического роста подписчиков.

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

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

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

Call to action — лучший способ поймать клиента. Посетитель портала уже познакомился с информацией о вас: самое время предложить ему подписать или оставить заявку на консультацию. Форма обратной связи в подвале сайта будет смотреться очень органично и увеличит конверсию.

Кроме того, следует использовать и дополнительные блоки:

Способы оплаты

Если вы принимаете платежи, логично разместить здесь логотипы платежных систем, которыми может воспользоваться ваш клиент.

Ссылка на мобильное приложение

Когда компания располагает таким приложением, логично предложить скачать его именно сейчас, не занимая остальное место на сайте. Добавьте логотипы сервисов с приложениями для Android и IOS.

Текст о компании

Не лишним будут несколько предложений о вас с использованием уникальных конкурентных преимуществ и топовых SEO-запросов. Не стоит ими злоупотреблять: переспама быть не должно.

Информация об участии в знаковых проектах

В самом низу страницы логично собрать блок «СМИ о нас». Добавьте лого соответствующих изданий, ведущие на публикации о вашей компании, логотипы своих партнеров, информацию об участии в крупных проектах и соответствующих наградах. Все это повышает уровень доверия пользователей.

Интерактивная карта

Если располагаете физическим офисом, наглядно объясните посетителям, как к вам добраться. Карта отлично дополняет блок «Контакты».

Гарантии

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

Кнопка «Вверх»

Предоставьте посетителям возможность вернуться к началу страницы нажатием одной кнопки.

Не забывайте, что подвал может быть нескольких видов:

• Стандартный. Такой футер — одинаков на всех страницах ресурса, при скроллинге находится в самом низу и никуда не перемещается. Это классика, которую выбирает большинство.
• Контекстный. Если ваш сайт предназначен для разной аудитории, оптимально в зависимости от содержания отдельных страниц изменять и контент в подвале: например, разместить разную информацию для оптовых и розничных клиентов.
• Для страниц с бесконечным скроллом. Некоторые сайты невозможно «долистать» до конца: например, новостные порталы, где информация обновляется ежеминутно. У таких проектов рациональней размещать подвал сбоку от основного материла, чтобы у пользователей была возможность легко воспользоваться навигацией. Это скорее частный случай, ориентироваться на который не стоит.

Как сделать подвал сайта?

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

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

Давайте разберемся, как сделать подвал сайта html за несколько шагов. Такой футер получится статичным.

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

• Создайте новый html-файл в текстовом редакторе.
• Пропишите базовую структуру нового HTML, включая теги <html> и его атрибуты, тег <head> и его содержимое, а также тег <body> и его свойства.
• В теге <body> создайте два раздела: один для подвала, а второй для шапки сайта. Раздел для подвала выделяется тегом <footer>.
• Внутри <footer> пропишите контент блока: контакты, навигационное меню, значки социальных сетей.
• Сохраните HTML-файл.

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

• Создайте новый файл .css и откройте его в текстовом редакторе или IDE.
• Задайте цвет фона, шрифт и другие параметры для отдельных элементов подвала.
• Чтобы футер не перемещался во время просмотра страницы, пропишите значение fixed параметра position, а также размеры относительно страницы — bottom:0 и left:0.
• Добавьте ссылки на CSS в теге <link> внутри тега <head> вашего html-файла.

Такой шаблон можно использовать для создания футера на всех страницах ресурса, при необходимо корректируя содержимое подвала.

Футер за пару кликов с Taptop

Если вы работаете в конструкторе сайтов Taptop, создание футера не займет у вас больше 5 минут, а искать ошибки в собственном коде и настраивать CSS-стили и вовсе не придется.

Благодаря безграничным возможностям кастомизации, вы без труда отразите индивидуальность своего проекта в каждой детали страницы. В Таптоп можно настроить не только расположение отдельных блоков, но и поработать с такими мельчайшими деталями, как позиционирование или отступы.

Обширная библиотека шаблонов позволяет создать любой сайт — от лендинга до маркетплейса, в рекордно короткие сроки. Если не хочется тратить время на тонкую настройку, выбирайте один из готовых вариантов и наполняйте его собственным контентом. Бесплатный хостинг, который предоставляет Таптоп своим клиентам, позволит мгновенно сделать ваш сайт рабочим.