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

При создании интернет-магазина необходимо уделить ему не меньшее внимание, чем другим элементам и сделать его максимально содержательным.

Оформление

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

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

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

Ссылки на страницы

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

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

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

Так же в подвал сайта можно добавить информацию, направленную на оказание помощи покупателю. Если он прокрутит страницу до конца и не найдет того, что искал, то с большой долей вероятности закроет страницу. На этот случай в футере можно добавить «поиск по сайту», или кнопку «Заказать звонок».

Не стоит добавлять в подвал сайта лишней информации - например, реквизиты компании (ИНН, ОГРН и т.д.) лучше оставить для страниц «О компании» или «Контакты».

Сейчас в футере (от англ. слова footer - нижняя часть страницы) большинства веб-сайтов, можно найти такую информацию как дата создания, название ресурса или информацию об авторских правах. Некоторые сайты размещают в «подвале» навигационные ссылки, например на страницы «О сайте» или «Контакты», или перечисляют наиболее читаемые категории. Наш блог можно отнести именно к таким сайтам и поэтому мы можем с уверенностью сказать, что эти ссылки никому не интересны и процент пользователей, которые на них кликнут, близок к нулю.

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

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

Какие элементы добавить в подвал сайта?

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

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

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

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

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

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

При разработке, как правило, ограничиваются следующими элементами: адрес магазина или организации, телефоны, e-mail адреса, карта проезда (либо, ссылка с иконкой, либо полноценная карта с возможностью просмотра без перехода на другой сайт) или форма обратной связи.

Так же, нередко можно встретить комбинированный вариант, когда в «подвале» размещают ссылки на важные страницы ресурса и краткую контактную информацию (без карты и формы обратной связи).

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

Социальные данные

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

Помнится мне, в тот момент, когда я стал переходить с таблиц на верстку дивами, одной из трудностей, с которыми я столкнулся, была следующая — как прижать подвал сайта (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 можно .

Если в настоящее время вы работаете над новым дизайном или даже редизайном вашего лендинга, то одна из областей проекта, которую не стоит игнорировать, — это раздел нижнего колонтитула, или футер.

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

Мы уже слышим, как вы говорите: «Да кому есть дело до какого-то футера?! Все равно до конца мало кто прокручивает». Но мы бы не были в этом так уверены.

Конечно, приоритет стоит отдать разделу хедера и дизайну над линией сгиба (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, к примеру, существуют множество готовых макетов и бесплатных шаблонов посадочных страниц высокого качества, которые вы можете и настроить под себя:

Вот и все!

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

Начните с нескольких базовых элементов и того, что, по вашему мнению, улучшит навигацию и пользовательский опыт.

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

Независимо от того, что вы решите сделать, не позволяйте своему футеру «провисать». Пора ответить на следующие вопросы:

• Есть ли на вашем сайте или в блоге футер?
• Максимально ли вы его используете?
• Что находится в нижнем колонтитуле прямо сейчас? Как это можно улучшить?

Футер - нижний блок страницы веб-сайта, последний по счету, но не по важности. То, что футер или “подвал” сайта, как его еще называют, расположен на дне страницы, совсем не значит, что он содержит неважную информацию, и к нему мало кто “добирается”. Но в то же время эту часть страницы не стоит перегружать лишними данными. Что же лучше включить в футер и как сделать его максимально функциональным?

Недавно мы прошлись по сайтах 50-ти украинских интернет-магазинах и оценили их футеры по нескольким параметрам, среди которых - количество ссылок, наличие ссылок на аккаунты в соцсетях или подписки на рассылку. Сайты выбирались случайно, но мы старались захватить разнообразные сферы онлайн-продаж, например: электронику и бытовую технику, fashion, косметику и парфюмерию, товары для детей, продукты питания, стройматериалы, маркетплейсы, шопинг-клубы и т.д. В список исследуемых нами интернет-магазинов попали как лидеры своих отраслей, так и новички.

Полезные ссылки

Среднее количество ссылок, содержащихся в просмотренных нами футерах, - 21.

Наименьшее количество активных ссылок мы насчитали у интернет-магазина PARFUMS.UA - 5 ссылок, не считая кнопки “Вверх”.

У сайта компании PARFUMS.UA мы насчитали наименьшее количество ссылок: странички магазина в социальных сетях и контактная информация.

Наибольшее количество ссылок, целых 86, мы насчитали у другого интернет-магазина косметики и парфюмерии MakeUp.com.ua. Здесь, кроме строки подписки на рассылку, есть и ссылки на категории и подкатегории, и на контакты, информацию о доставке, новости, статьи и профили в социальных сетях и прочее.

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

Линк на страницу “О нас” в футер включили 88% сайтов, которые мы исследовали. И еще 88% - линк на страницу с контактами или непосредственно сами контакты. Только у 22% сайтов в футере можно найти ссылки, по которым пользователь мог бы в той или иной степени получить облуживание от компании. Ссылки на информацию о доставке и оплате и/или условиях возврата в футер включили 56% всех просмотренных нами сайтов.

Копирайт. Защита прав

Значок присутствует в футерах 76% проанализированных нами интернет-магазинов.

На сайте интернет-магазина гаджетов и аксессуаров “Цитрус”, как и на многих других сайтах, присутствует знак защиты авторских прав.

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

На сайте интернет-магазина строительных материалов “СтройМАГ” рядом со знаком копирайта использована фраза “Все права защищены”.

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

Социальные сети и прочий маркетинг

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

Целых 92% исследованных футеров содержали ссылки на аккаунты в социальных сетях. Это самый популярный элемент среди футеров проанализированных нами сайтов.

Например, футер сайта цветочного интернет-магазина “Квитер”, как и футеры большинства просмотренных нами сайтов, содержит ссылки на свои аккаунты в популярных социальных сетях.

34% интернет-магазинов включили в свои футеры строку для подписки на e-mail- или sms-рассылку. Некоторые обещают за подписку приятные бонусы вроде купона на определенную сумму.

Например, в интернет-магазине одежды Answear подписку меняют на 300 грн. на покупку.

30% проанализированных футеров включали также ссылки на ту или иную форму маркетингового контента. Чаще всего это были ссылки на блог, статьи, видео-обзоры и т. п.

Вакансии

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

Неожиданные наблюдения

Такой, казалось бы, подходящий для футера элемент, как карта сайта, мы встретили всего у 30% интернет-магазинов.

Знаки доверия, например, значок гарантии безопасной покупки, в футер включили всего 4 интернет-магазина из всех 50-ти.

В футере сайта шопинг-клуба BonPrix можно найти значок, обещающий безопасную покупку.

Иконки методов оплаты в футере использовали также небольшое количество интернет-магазинов - всего 18%.

Ваш футер

Этот скромный анализ 50 футеров случайно выбранных интернет-магазинов, конечно, не научное исследование. И цифры, которые мы получили, вряд ли можно применять к отрасли e-commerce в целом. Если, согласно нашему анализу, 54% интернет-магазинов включили номера телефонов в свои футеры, это не значит, что 54% всех e-commerce-сайтов делают то же самое.

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