Если в настоящее время вы работаете над новым дизайном или даже редизайном вашего лендинга, то одна из областей проекта, которую не стоит игнорировать, — это раздел нижнего колонтитула, или футер.
Стремление разработать почти идеальный нередко приводит к усложнению всего процесса. Работа над дизайном может захватить настолько, что вы быстро забудете о некоторых важных, но недостаточно используемых частях страницы.
Мы уже слышим, как вы говорите: «Да кому есть дело до какого-то футера?! Все равно до конца мало кто прокручивает». Но мы бы не были в этом так уверены.
Конечно, приоритет стоит отдать разделу хедера и дизайну над линией сгиба (Above The Fold), потому что именно посетители проводят большую часть своего времени. Однако нижняя часть страницы, в частности, нижний колонтитул вашего лендинга, также заслуживает внимания.
В своем весьма любопытном тематическом исследовании компания Chartbeat, занимающаяся анализом контента сайтов, обнаружила, что 65% вовлеченности на их страницах происходит сразу за линией сгиба (Below The Fold).
Так что люди все-таки скролят! И если вы не оптимизируете нижнюю половину посадочной страницы и, в том числе, футера, то вы можете упустить уникальные возможности, такие как:
- Предоставление дополнительной важной информации о вашем бренде и продукте.
- Улучшение пользовательского опыта и навигации.
- Увеличение коэффициентов конверсии.
Для пользователей, желающих потратить немного больше времени на ваш лендинг и прокручивающих всю страницу до конца в поисках нужных им сведений, хорошо продуманная область нижнего колонтитула имеет значение.
В этом посте мы раскроем все детали создания и использования футеров, независимо от типа сайта. Начнем с самого начала.
Что такое футер?
Футер (Footer) — это самая нижняя часть сайта или лендинга. Они бывают всех форм и размеров. Некоторые сайты имеют маленькие зоны футера, другие, наоборот, очень большие, включающие несколько колонок и нижние колонтитулы. У одних сайтов нет футера вообще, в то время как на других интегрирована особая функция, называемая (Infinite Scrolling). Это означает, что в нижней части сайта нет футера, нет конца страницы как такового. Данную тему мы сегодня освещать не будем.
В футерах, как правило, размещается контактная информация, окно поиска и навигационные ссылки на важные страницы, значки профилей социальных сетей. Нижний колонтитул также может использоваться для предоставления другой значимой информации о бизнесе, например, включать заявление о миссии компании, информацию о местоположении офиса (карту), статистику сайта, социальное доказательство (Social Proof), форму подписки на электронную рассылку, детали для регистрации или входа в аккаунт, другие типы (Call-To-Action, CTA) и пр.
Почему вам нужно заняться дизайном футера
Наличие футера не является строго обязательным, однако его отсутствие может стать причиной недовольства и разочарования у посетителей, пытающихся найти конкретные сведения о продукте или вашем бизнесе.
Секция нижнего колонтитула идеально подходит для размещения деталей об авторских правах и ссылок на контакты, условия и порядок оформления заказа, политику конфиденциальности, уведомления о файлах cookie и т.п. Особенно популярно размещение здесь ссылок на группы в соцсетях — большинство людей уже ожидают найти ее футере.
Было доказано, что, помимо улучшения навигационного потока сайта (Navigational Flow), а также опыта пользователей, стратегический дизайн футера влияет на конверсии.
Примеры красивых футеров
Рассмотрим несколько примеров футеров, которые, возможно, вдохновят вас на собственные идеи.
Лендинг, продающий воздухоочиститель A803 AirEngine бренда Bork, имеет привлекательный дизайн футера, включающий навигационные ссылки (причем оформлены они в двух разных стилях: в виде кликабельных изображений и в форме колонок со списками), форму подписки на рассылку и значки соцсетей.
Страница иллюзиониста Игоря Завьялова также выглядит весьма приятно. Дизайн состоит из контактной информации, ссылок на социальные профили и простой симпатичной формы для связи.
Перед футером лендинга Битрикс24 располагается «предфутерный» раздел, имеющий целью конверсию (потенциальному клиенту предлагается оставить контакты для общения с менеджерами). Далее следует основная область нижнего колонтитула с картой, ссылками навигации, конверсионной ссылкой «Обратный звонок» и номером телефона.
Сайт strip-lenta.com имеет оригинальный футер с конвертом, на котором присутствуют контакты и форма для связи:
Футеру предшествует предфутерная зона с социальным доказательством — логотипами известных клиентов:
Но и этим они не ограничились! Присутствует еще постфутерная зона, предполагающая совершение конверсионного действия:
Наконец, посмотрим на необычную концовку лендинга «Альфа-Банка», созданного для кадрового рекрутинга. Сам сайт сделан так, что при скроллинге мы наблюдаем модификацию героя-соискателя: он движется, меняет одежду, становится увереннее и успешнее. В конце страницы он стоит с табличкой, нажав на которую вы переходите на страницу с актуальными вакансиями. Больше ничего в футере нет, но зато выполнена основная функция лендинга — конверсия в виде перехода для ознакомления с информацией и последующей отправкой резюме.
Ну, что ж, думаем, достаточно с пищей для вдохновения. Теперь взглянем на 16 моментов, которые не стоит упускать из вида при дизайне футера.
Базовые элементы футера
1. Информация об авторских правах. Дайте недобросовестным посетителям вашего лендинга понять, что его содержание защищено авторским правом и что плагиат будет иметь последствия. Футер — идеальное место для подобных сведений.
2. Контактная информация. Как уже упоминалось, многие люди прокручивают страницу в поисках ваших контактов (телефона, адреса, электронной почты). Крайне важно добавить их в нижний колонтитул, особенно если вы решили не включать их в шапку.
Совет. Размещая телефон в футере, сделайте его кликабельным, это упростит пользователю процесс связи с вашей компанией напрямую при загрузке лендинга в тех случаях, когда он пользуется смартфоном.
3. Политика конфиденциальности. Законы о конфиденциальности в Интернете становятся все более строгими, и поэтому наличие ссылки на такую страницу весьма важно.
4. Условия обслуживания. Предоставляя услуги или продавая товары через свой лендинг, вы вряд ли хотите, чтобы ваши клиенты путались в нюансах ведения дел с вами. Убедитесь, что в нижнем колонтитуле четко отображается ссылка на страницу условий обслуживания.
5. Обратная связь / отзывы. Необязательная часть, но, если у вас есть отдельная посвященная этому страница, полезно будет включить здесь ссылку на нее.
6. Карта. Если ваш лендинг представляет собой визитку для размещения информации о бизнесе, чья основная деятельность происходит оффлайн (скажем, вы владеете гостевым домом, рестораном или помещением для проведения мероприятий), то обязательно подумайте над добавлением данных о местоположении в футер. Это может быть простой текст с адресом или локальная интеграция с Яндекс Картами, Google Maps или 2GIS.
Вот как можно добавить карту на лендинг при помощи конструктора секций в :
Необязательные элементы футера
Теперь рассмотрим другие, менее существенные, элементы дизайна футера.
8. Социальное доказательство и иконки на профили в соцсетях. Если вы хотите показать свое влияние в социальных сетях или стимулировать людей подписываться на ваши приоритетные аккаунты, обдумайте добавление подобных значков. А отображая количество ваших подписчиков для каждого профиля, вы сформируете социальное доказательство.
9. Карта сайта (SiteMap) помогает поисковым системам лучше понимать структуру вашего сайта и контента. Многие сайты помещают ссылку на SiteMap рядом с информацией об авторских правах, в постфутере.
11. Простая форма для ввода электронной почты — отличный способ повысить Opt-In-конверсии. В качестве альтернативы, если в футере нет места для размещения формы регистрации, предлагаем поместить CTA-кнопку или ссылку на основную страницу, где вы планируете генерировать лиды.
12. Контактная форма для отправки вам сообщений. Подходит на тот случай, если вы не хотите размещать свои контакты в футере, в частности адрес электронной почты. Добавление подобной формы позволяет уменьшить риск получения спама, а также помогает пользователям легко связаться с вами практически с любой страницы вашего сайта. Помните, однако, что данный элемент может занимать значительное количество нижнего пространства.
13. Заявление о миссии. Если вы хотите показать своим посетителям, каких взглядов придерживается ваш бренд, каковы ваши цели и устремления, то подумайте о добавлении сжатой версии своей миссии в футер. Если же емкое послание сделать проблематично, то включите ссылку на специальную страницу.
14. Список последних постов в блоге. Возможно, вы захотите добавить сюда фид с последними записями в блоге. Еще более эффективная стратегия — отображать только лучшие, самые популярные публикации в блоге. Четыре или пять ссылок будет более чем достаточно.
15. «Обо мне» / «Биография». Когда речь идет о сайте персонального бренда или блоге, можно также добавить короткую биографию о себе, включая фотографию — она добавит сайту живой, «человеческий» элемент. Добавление ссылки на страницу «Обо мне (О нас)» даст посетителям возможность узнать о вас больше.
16. Конверсионные ссылки или призывы к действию. У вас есть товарные страницы, разделы с бестселлерами или партнерские страницы, которые вам нужно продвигать? Как насчет внедрения ссылок на них в якорный текст (Anchor Text) футера?
Что не следует добавлять в футер
Вот, чего нужно избегать:
- Счетчиков просмотров страницы и виджетов, отражающих статистику по трафику.
- Прямых партнерских ссылок.
- Встроенных фидов социальных сетей.
- Рекламы.
Какие инструменты использовать при работе над дизайном?
Это зависит от того, на какой платформе функционирует ваш сайт. Для пользователей LPgenerator, к примеру, существуют множество готовых макетов и бесплатных шаблонов посадочных страниц высокого качества, которые вы можете и настроить под себя:
Вот и все!
Надеемся, этот пост был полезен для вас. Мы также хотим, чтобы он побудил вас переосмыслить то, как вы используете раздел нижнего колонтитула. Каковы бы ни были ваши цели по конверсиям, просто много экспериментируйте и вы увидите, что работает, а что нет.
Начните с нескольких базовых элементов и того, что, по вашему мнению, улучшит навигацию и пользовательский опыт.
Если вы подозреваете, что люди не прокручивают до футера, настройте тепловые карты и карты прокрутки, чтобы узнать это наверняка.
Независимо от того, что вы решите сделать, не позволяйте своему футеру «провисать». Пора ответить на следующие вопросы:
- Есть ли на вашем сайте или в блоге футер?
- Максимально ли вы его используете?
- Что находится в нижнем колонтитуле прямо сейчас? Как это можно улучшить?
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Футер сайта (footer) - это нижняя часть сайта, подвал. Является противоположностью (шапки), правильное оформление футера играет огромную роль в успехе продвижения сайта и улучшения его юзабилити.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Что такое футер сайта на примере
“Именно обувь делает женщину женщиной”, - говорит секретарша в известном фильме. И она права! Если на вас надеты валенки - вы гуляете по заснеженному лесу. Если туфли на шпильке - то вам предстоит незабываемый вечер. Если кроссовки - то вы собираетесь заняться спортом или же много ходить. Не так ли?
Многие думают, что если футер размещается в самом низу - у пользователя не хватает терпения “долистать” до него, и поэтому его оформление менее важно, чем оформление шапки. Но это не так.
Что должно быть в футере сайта
Чтобы сайт работал, он должен быть удобным, читабельным и привлекательным для посетителя. Рассмотрим элементы подвала сайта и оценим их значимость. Футер не обязательно должен содержать все эти элементы. Подберите для вашего сайта индивидуальный перечень.
- Карта сайта.
Это полный список страниц сайта, отображаемый согласно его структуре. Данный элемент улучшает юзабилити, облегчает навигацию пользователя, рассказывает поисковым системам обо всех страницах сайта. Если страниц на сайта очень много - выберите самые важные из них и отобразите в HTML-карте сайта.
- Контакты.
Продублируйте информацию о контактах из шапки сайта в подвале. Можно разместить самые важные контакты. Если посетитель дошел до конца страницы, значит, он дочитал всю информацию и есть вероятность, что он сделает заказ. Для его удобства необходимо разместит контакты.
- Форма обратной связи.
Позволяет посетителю связаться с вами, не уходя с текущей страницы. Это удобно для ваших потенциальных клиентов.
- Стрелка “Вверх”.
Позволяет посетителю моментально вернуться к шапке сайта, не прокручивая длинную страницу.
- Форма заказа обратного звонка.
Работает также, как и форма обратной связи. Не забывайте, что обратный звонок должен быть осуществлен в самые короткие сроки. Иначе вы потеряете доверие потенциального клиента.
- Ссылки на соцсети.
Если вы активно общаетесь с посетителями в соцсетях - разместите ссылки на ваши группы и страницы внизу. Соцсети - важные инструменты для связи с клиентами и роста их лояльности.
Несколько устаревший вариант блока навигации, дающий возможность быстрого поиска нужных страниц.
- Ссылка на разработчика
Какую роль играет футер
Красивый футер - иначе, подвал ресурса - не просто улучшает внешний вид сайта, но и полезен для работы с пользователем.
Мы дадим основные советы, как сделать функциональный футер для сайта.
Обращайте внимание на:
- Важность иерархии. Не сваливайте информацию в одну кучу. Пользователь должен суметь легко в ней разобраться.
- Понятность списков. Отведите для заголовков списков больше места, чем для самого текста.
- Наличие границ между элементами.
- Единство шрифтов. Используйте те стили оформления, которые сочетаются друг с другом.
- Разбиение на колонки. Это структурирует информацию.
- Наличие отступа между футером и последним блоком сайта.
- Единство подвала на всех страницах портала.
- Единство стилей для футера и всего сайта.
- Простоту. Поставьте себя на место пользователя. Он должен легко найти интересующую информацию.
- Использование субподвала, если в основной части футера слишком много информации.
Каждый футер должен отчетливо отделяться от основного содержания сайта. Обычно подвал оформляют другого цвета, контентную часть веб-ресурса. Цвет футера также может незначительно отличаться от фона сайта, обычно подвал темнее.
Оформляйте футер необычно. К примеру, в дизайне подвала может быть загнутый кусочек пергамента. Если в шапке - остров и волны, то низ может быть оформлен в виде морского дна, а интересным элементом будет являться раскрытый сундук с сокровищами. На сайте художника ключевым элементом футера может быть кисть и палитра, а на сайте музыканта - черный рояль, переходящий в черный футер. Низ сайта может быть оформлен также в четком классическом стиле.
Интересным подвалом можно также привлечь внимание пользователя.
Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (footer) в самый низ окна браузера , чтобы страница при этом выглядела вытянутой на всю высоту, вне зависимости от объема текста, а при высоте страницы, большей, чем высота окна браузера (при появлении скролла), футер оставался бы на положенном ему месте.
Если с помощью таблиц сия задача решается лишь за счет указания высоты для таблицы и/или вложенной в нее ячейки, то при использовании CSS в блочной верстке применяется совсем иной подход.
В процессе практики я выделил для себя 5 способов прижимания футера к низу окна браузера с помощью CSS .
HTML-код всех представленных способов имеет следующую структуру (отличие лишь в CSS-коде):
В CSS-код, приведенный ниже, включены только те свойства, которые минимально необходимы для реализации соответствующего способа. По каждому из них вы можете посмотреть живой пример.
Первый способ
Footer прижимается вниз путем его абсолютного позиционирования и вытягивания высоты родительских блоков (html , body и.wrapper) на 100%. При этом контентному блоку.content нужно указать нижний отступ, который равен или больше высоты подвала, иначе последний закроет часть контента.
* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { position: relative; min-height: 100%; } .content { padding-bottom: 90px; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }
Второй способ
Footer прижимается вниз за счет вытягивания блока контента и его «родителей» на всю высоту окна браузера и подъема футера вверх через отрицательный отступ (margin-top) для избавления от появляющегося при этом вертикального скролла. В данном случае необходимо обязательно указать высоту подвала, и она должна быть равна величине отступа.
* { margin: 0; padding: 0; } html, body, .wrapper { height: 100%; } .content { box-sizing: border-box; min-height: 100%; padding-bottom: 90px; } .footer { height: 80px; margin-top: -80px; }
Благодаря свойству box-sizing: border-box , мы не позволяем блоку с классом.content превысить высоту 100%. То есть в данном случае min-height: 100% + padding-bottom: 90px равняется 100% высоты окна браузера.
Третий способ
Он хорош тем, что, в отличие от остальных способов (кроме 5-го), высота футера значения не имеет.
* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { display: table; height: 100%; } .content { display: table-row; height: 100%; }
Здесь мы эмулируем поведение таблицы, превратив блок.wrapper в таблицу, а блок.content в строку таблицы (свойства display: table и display: table-row соответственно). Благодаря этому, а также тому, что блоку.content и всем его родительским контейнерам задана высота 100%, контент растягивается на всю высоту, но за минусом высоты футера, которая определяется автоматически — эмуляция таблицы не дает подвалу вылезть за пределы высоты окна браузера.
В результате footer прижат к низу.
Четвертый способ
Данный способ не похож ни на один из предыдущих, и его особенность заключается в использовании CSS-функции calc() и единицы измерения vh , которые поддерживаются только современными браузерами. Здесь необходимо знать точную высоту подвала.
* { margin: 0; padding: 0; } .content { min-height: calc(100vh - 80px); }
100vh — это высота окна браузера, а 80px — это высота футера. И с помощью функции calc() мы вычитаем вторую величину из первой, тем самым прижимая футер к низу.
Узнать, какие браузеры поддерживают calc() и vh , вы можете на сайте caniuse.com по следующим ссылкам: поддержка функции calc() , поддержка единицы измерения vh .
Пятый способ (самый актуальный)
Это лучший способ из всех представленных, однако работает он только в современных браузерах. Как и в третьем способе, высота футера значения не имеет.
* { margin: 0; padding: 0; } html, body { height: 100%; } .wrapper { display: flex; flex-direction: column; min-height: 100%; } .content { flex: 1 0 auto; } .footer { flex: 0 0 auto; }
Узнать про поддержку браузерами свойства flex можно .
Сейчас в футере (от англ. слова footer - нижняя часть страницы) большинства веб-сайтов, можно найти такую информацию как дата создания, название ресурса или информацию об авторских правах. Некоторые сайты размещают в «подвале» навигационные ссылки, например на страницы «О сайте» или «Контакты», или перечисляют наиболее читаемые категории. Наш блог можно отнести именно к таким сайтам и поэтому мы можем с уверенностью сказать, что эти ссылки никому не интересны и процент пользователей, которые на них кликнут, близок к нулю.
Гораздо эффективнее сделать футер более «видимым» и красивым, насытив его полезной информацией. К сожалению, дизайн каждого сайта индивидуален и такой футер может просто не вписаться во внешний облик ресурса. Поэтому внедрение расширенного футера в дизайн лучше всего осуществлять на этапе или эскизов будущего веб-проекта.
Так же очень важно правильно выбрать какими именно блоками насыщать футер. Здесь основной выбор стоит делать исходя из тематики сайта и задач, поставленных перед ресурсом. Ниже мы расскажем какие бывают элементы и для каких видов сайтов эти элементы подходят.
Какие элементы добавить в подвал сайта?
Из всего многообразия выделяю три группы элементов. Это навигация , контактная информация и социальные данные . Именно эти элементы влияют на поиск материалов, общение и дальнейшие действия пользователей на сайте. Все остальные блоки - различные вариации этих элементов, выполняющих схожие функции.
Навигация по сайту
Повторение навигации бывает очень полезно, если страница длинная и для поиска такого же блока нужно совершить ряд действий. При большом количестве страниц или категорий желательно сделать выпадающее меню, которое поможет улучшить поиск нужного раздела. Если же выпадающее меню не подходит, то следуют выбрать наиболее полезные для вашей аудитории страницы и показывать только их.
На большинстве блогов эту группу представляют блоки со списком категорий, перечнем новых или самых интересных статьей, список с последними комментариями и т.п. Главная задача всех этих ссылок - оставить посетителя на сайте, сделав поиск информации более быстрым и простым.
Контактная информация
Добавление контактной информации в футер сайта часто практикуется у ресурсов, предоставляющих платные услуги. Размещение этих данных на каждой странице позволит пользователю быстрее найти телефон офиса и перейти непосредственно к покупке или заказу понравившегося товара.
При разработке, как правило, ограничиваются следующими элементами: адрес магазина или организации, телефоны, e-mail адреса, карта проезда (либо, ссылка с иконкой, либо полноценная карта с возможностью просмотра без перехода на другой сайт) или форма обратной связи.
Так же, нередко можно встретить комбинированный вариант, когда в «подвале» размещают ссылки на важные страницы ресурса и краткую контактную информацию (без карты и формы обратной связи).
В плане оформления часто используют шрифты большого размера. Реже - нестандартные , которые делают контакты более видимыми на странице.
Социальные данные
Если ваш сайт относится к социальным медиа или вы активно общаетесь с аудиторией ресурса через социальные сети, стоит задуматься о размещении ссылок на соответствующие сайты. Как и с группой о навигации, стоит давать ссылки только на наиболее популярные сети, если вы зарегистрированы более чем на 5 сайтах.
На показатели конверсии оказывает влияние множество факторов - это и юзабилити, и визуальное оформление. Футер сайта (footer или «подвал»), несмотря на то, что он находится в нижней части страницы и практически всегда невидим на первом экране, так же имеет большое значение.
При создании интернет-магазина необходимо уделить ему не меньшее внимание, чем другим элементам и сделать его максимально содержательным.
Оформление
Футер должен быть оформлен в едином стиле со всем сайтом интернет-магазина. При этом даже если весь интернет-магазин оформлен в стиле минимализма, в футер можно добавить красивые изображения или анимацию, ведь он не будет отвлекать внимание. Можно оформить его оригинально, чтобы вызывать у посетителей положительные эмоции.
Навигация по сайту
В футере можно расположить альтернативную навигацию по сайту. Особенно это удобно на сайтах с длинными страницами. Посетитель прокрутит ее до конца и не возвращаясь обратно, сможет перейти в нужные разделы каталога. Сделать его можно более развернутым, чем в шапке интернет-магазина, места там достаточно.
Ссылки на страницы
Футер отлично подходит для размещения полезной, но не слишком значительной информации. Например, если в верхнем меню будут ссылки на каталог или категории интернет-магазина, то в подвал можно добавить ссылки на блог или полезные статьи.
Контактная информация
Чаще всего в футер добавляется контактная информация, ссылки на страницы в социальных сетях, иногда даже карта с отметкой расположения интернет-магазина (или пункта самовывоза). Такая информация повышает доверие посетителей.
Так же в подвал сайта можно добавить информацию, направленную на оказание помощи покупателю. Если он прокрутит страницу до конца и не найдет того, что искал, то с большой долей вероятности закроет страницу. На этот случай в футере можно добавить «поиск по сайту», или кнопку «Заказать звонок».
Не стоит добавлять в подвал сайта лишней информации - например, реквизиты компании (ИНН, ОГРН и т.д.) лучше оставить для страниц «О компании» или «Контакты».