Правильный footer. Как с помощью CSS прижать footer к низу окна браузера

Если обувь это итоговая составляющая любого наряда, то футер для сайта e-Commerce - завершающий элемент его продающего дизайна. Уделяя внимание самому нижнему элементу «подвалу», современные веб-сайты готовы продемонстрировать свою индивидуальность всеми способами. В конкурентной e-commerce среде достаточно оригинальных идей, креатива и оформительских тенденций. Перед тем как разнообразить футер Е-коммерческого сайта, стоит учесть немаловажные моменты. Что разместить первую очередь и как это лучше сделать? В обзоре вдохновляющих дизайнов футеров есть интересные варианты.

Читайте также: 13 маркетинговых трендов в электронной коммерции 2019 года

Любопытна статистика от компании Chartbeat. Исследование поведения 25 млн. пользователей показало, насколько глубоко они просматривают страницы. Оказывается, пользовательское внимание обращено на пространство ниже линии сгиба. Получая больше практически полезной информации, посетители дольше всего задерживаются в области 1200px от верха страницы (при средних 700px по вертикали экрана в браузере), либо за вторым экраном.

Время просмотра (сек.) / Расстояние от верха страницы (пиксели)

Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.

Доля посетителей (%) / Расстояние от верха страницы (пиксели)

Значительная часть посетителей (более 25%) даже не ждут загрузки контента и начинают скроллить страницу. Значит, только 75% сперва увидят самый верх. Наиболее просматриваемая область страницы, это 550px (сразу над линией сгиба).

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

Идеи как оформить «подвал» (футер), примеры продающих дизайнов

Эти 10 советов подскажут, как красиво оформить футер для сайта – по правилам композиции в веб-дизайне и с разрешением приоритетных задач. Примените наиболее подходящие тактики для улучшения юзабилити, UX (пользовательского опыта) и даже повышения продаж.

1. Необходимая информация

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

• Отметки о копирайте
• Правовые оговорки
• Биллинговая информация
• Уведомление об использовании файлов cookie

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

Пример footer’a: Ив Роше

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

Пример footer’a: Lumity

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

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

Пример footer’a: Saddleback Leather Co

Продающий сайт с красивым ретро-дизайном шапки и футера. 100-летняя гарантия на отсутствие дефектов материала и отделки. Условия возврата сопровождаются интересными историями… не все так грустно с необходимой e-Commerce-информацией бывает, оказывается

2. Негативное пространство – достаточность визуальной дистанции

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

Пример footer’a: QUAY AUSTRALIA

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

Пример footer’a: Incase

О большом количестве микро-негативного пространства (между мелкими элементами) можно сказать так: пока вся необходимая информация присутствует, она разборчива и быстро воспринимаема – все нормально

Пример footer’a: Stumptown Coffee Roasters

Просторный футер кофейного сайта - отличное завершение композиции чистого дизайна, в котором много макро-негативного пространства («воздуха» между разделами/секциями)

3. Завершающий призыв к действию

Читайте также: 30+ примеров и идей оформления кнопок целевого действия

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

Пример footer’a: Greetabl

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

Пример footer’a: Ecwid

Приятное оформление с призывами к действию в нижней части страниц. Структура конструктора продающих сайтов универсальна. Для миллиона своих клиентов он переведен на 35 языков

4. Плавающая корзина – повышение доступности продающего функционала

Доступ к корзине из нижней части сайта – отличный способ улучшить юзабилити и продающие качества сайта.

Пример footer’a: Lemonadela

Продающий сайт кейтеринговой компании приятен на вид и удобен для покупателя

5. Навигация в футере

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

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

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

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

Что разместить в футере

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

• Блок перелинковки

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

источник sima-land.ru

Перелинковкой может служить также облако тегов. Это могут быть популярные рубрики у информационного сайта, важные новости или статьи.

источник vesti.ru

• Авторские права

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

источник vesti-ural.ru

• О партнерах

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

источник ekb.rbc.ru

• Контакты

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

источник uniland.ru

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

источник e1.ru

• Лид-формы

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

источник afisha.yandex.ru

• Карта

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

Здравствуйте, дорогие читатели блога. Сегодня я хочу поговорить с Вами о том каким же должен быть футер в современно веб дизайне. А так же мы посмотрим с Вами несколько примеров и получим несколько отличных советов по применению. :-)

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

Ну а сейчас давайте рассмотрим несколько практичных и красивых примеров:

Очень удобная и полная навигация по сайту.

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

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

SEO. Такая навигация существенно облегчит пользование сайтом поисковым роботам а так же пользователям.

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

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

Что такое футер

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

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

Поэтому для начала предлагаю избавиться от стандартного содержимого футера. Открываем файл index.php стандартного шаблона Protostar и ищем код, который отвечает за вывод футера. За вывод футера отвечает код между строками 205 и 219, который выглядит следующим образом (в зависимости от версии Joomla и внесенных изменений в индексный файл строки кода могут отличаться):

А теперь удалим лишний код с 210 по 217 строку, в результате код для футера будет таким:

По сути, мы удалили все что можно, оставив лишь возможность вывода модулей в футере, за это отвечает строка:

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

Какую информацию отображать в футере сайта

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

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

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

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

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

Теперь давайте отбросим теорию и приступим непосредственно к созданию футера. Способов формирования футера может быть несколько:

• Автоматический - подразумевает использование различных модулей для вывода определенной информации
• Ручной - модули не используются, все изменения вносятся вручную по средствам редактирования файлов шаблона
• Смешанный - в данном случае используются оба вышеперечисленных варианта совместно

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

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

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

Для начала создадим новые позиции для модулей в футере (как это сделать мы говорили на уроке по настройке и редактированию шаблонов) в количестве двух штук. Так как они будут располагаться в левой и правой части футера то и имя у них получилось соответствующее - footer-left и footer-right . Объявляем их в файле templateDetails.xml .

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

baseurl . "templates/". $this->template . "/images/joom4all.png"?>" />

И для наглядности скриншот:

Как выводятся модули понятно, а вот на логотипе хочу остановиться подробнее. За вывод логотипа отвечает код:

baseurl . "templates/". $this->template . "/images/joom4all.png"?>" />

На первый взгляд обычный HTML тег для изображения, но вместо привычного пути расположения файла написан php код. Данный код на первый взгляд может показаться сложным и непонятным, но на самом деле если его разобрать, то становится понятно, что ничего сложного в нем нет:

• - начало php кода
• echo - отвечает за вывод строки
• $this->baseurl - данная строка возвращает имя сайта
• templates/ - тут мы указываем, что изображение хранится в папке templates
• $this->template - возвращает имя текущего шаблона
• /images/joom4all.png - путь до изображения внутри корневой папки шаблона и имя файла с изображением
• ?> - конец php кода

В результате использования данного php кода мы получаем относительный путь до файла с изображением. Другими словами не зависимо от того какое имя будет у сайта и какой используется шаблон изображение будет взято из папки images выбранного шаблона.