Как оформить подвал (Footer) сайта: пошаговое руководство

5606 12

Прочитать позже

Анастасия Сотула

Редактор блога Serpstat

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

Содержание

1. Что такое футер сайта или подвал
2. Разработайте дизайн подвала сайта
3. Разместите анимацию в footer для сайта
4. Шрифты, фон и другие тонкости визуала
5. Используйте больше пространства и креатива
6. Разместите призыв к действию
7. Добавьте знак авторского права
8. Разместите контактную информацию
9. Кнопки социальных сетей при оформлении футера
10. Добавьте логотип компании
11. Ссылки на трафиковые страницы в подвале сайта
12. Подписка по электронной почте
13. Карта сайта в подвале
14. Что еще…
15. Хорошие примеры футеров для сайтов

FAQ
Заключение

Что такое футер сайта или подвал

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

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

Разработайте дизайн подвала сайта

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

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

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

Чтобы готовый footer для сайта реально помогал в продвижении, соблюдайте 5 правил:

1. Лаконичность и минимализм, старайтесь использовать меньше текста, но более цепляющие заголовки.
2. Футер в веб-дизайне по цветовой схеме должен отличаться от основного фона и шапки сайта, при этом цвета между собой в нижнем блоке должны гармонично дополнять друг друга.
3. Используйте немного графики или анимации, не отклоняясь при этом от тематических особенностей блога, лендинга или интернет-портала.
4. Соблюдайте иерархию, иначе оформление подвала сайта будет попросту бесполезным: выделяйте крупным и ярким шрифтом важное, а мелким — второстепенное, размещая эту информацию ниже.
5. Дублируйте контакты из шапки сайта, предложите связаться с вами, обязательно используйте другие ненавязчивые призывы к действию.

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

Так что должно быть в футере?

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

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

Источник: Mobios.school

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

Источник: Рецепты Джуренко

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

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

Разместите анимацию в footer для сайта

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

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

Источник: Technolex Translation Studio

Шрифты, фон и другие тонкости визуала

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

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

Используйте больше пространства и креатива

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

Перед вами готовый футер для сайта html с удачным дизайном и призывом к действию, подчеркнутым синим цветом.

Источник: Stfalcon.com

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

Инновационно смотрится дизайн, в котором:

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

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

Вот оригинально оформленный подвал сайта (примеры на фото).

Источник: Thesmilestore

Разместите призыв к действию

Подвал сайта html — идеальная часть ресурса, чтобы сообщить пользователю, что это место — не конец сайта, а возможность:

• купить продукцию;
• зарегистрироваться;
• оформить подписку;
• позвонить в call-центр;
• получить обратный звонок;
• лайкнуть страничку в соцсети и пр.

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

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

Добавьте знак авторского права

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

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

Разместите контактную информацию

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

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

Контакты вполне органично выглядят на сайте шоколада «Миллениум».

Источник: Millennium-trade

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

Кнопки социальных сетей при оформлении футера

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

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

Добавьте логотип компании

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

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

Ссылки на трафиковые страницы в подвале сайта

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

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

Источник: Traveling.by

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

Подписка по электронной почте

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

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

Карта сайта в подвале

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

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

Что еще…

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

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

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

Придумайте необычный дизайн, чтобы сайт точно завоевал сердца своих почитателей. К примеру, на сайте-визитке музыканта будет красиво выглядеть фотография исполнителя. Художественная галерея или сайт художника органично смотрятся с кистью и палитрой в футере. Сочетайте шапку сайта (хедер) в единстве с футером, например вверху обозначьте остров с волнами, а внизу — морское дно.

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

Хорошие примеры футеров для сайтов

Неплохой дизайн продемонстрирует футер на сайте Ив Роше.

Источник: Yves-Rocher

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

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

Источник: Quayaustralia

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

Источник: Bookclub

Хотите узнать, как с помощью Serpstat оптимизировать сайт?
Нажимайте на космонавта и заказывайте бесплатную персональную демонстрацию сервиса! Наши специалисты вам все расскажут! 😉

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

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

Зачем нужен подвал сайта?

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

Как вставить картинку в подвал сайта?

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

Заключение

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

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

Чтобы быть в курсе всех новостей блога Serpstat, подписывайтесь рассылку. А также вступайте в чат любителей Серпстатить и подписывайтесь на наш канал в Telegram.

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами 😉

Оцените статью по 5-бальной шкале

5 из 5 на основе 6 оценок

Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Рекомендуемые статьи

How-to

Анастасия Сотула

Как выбрать лучший сервис email рассылок? Гайд для новичков

How-to

Анастасия Сотула

Как создать favicon

How-to

Анастасия Сотула

Что нужно знать об оптимизации сайта под голосовой поиск

Кейсы, лайфхаки, исследования и полезные статьи

Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе. Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂

Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.

Поделитесь статьей с вашими друзьями

Вы уверены?

Спасибо, мы сохранили ваши новые настройки рассылок.

Сообщить об ошибке

Отменить

Как разработать идеальный футер сайта? Подробное руководство с примерами

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

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

Что такое футер, насколько он важен и почему

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

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

Основные преимущества нижней части сайта

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

Акцент на важном

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

Рост лидогенерации

Футер скажет пользователю, что конец сайта вовсе не конец. Он поможет удержать потребителя, подтолкнуть его к дальнейшему действию: заполнить форму обратной связи, перейти на страницу сообщества в социальных сетях, записать контактные данные или зарегистрироваться. Это все влияет на общую конверсию сайта. Благодаря правильному оформлению подвала посетитель запросто может стать клиентом. Главное, знать, что интересно для ЦА и что разместить в этой части страницы. Каждая ошибка может привести к снижению лидогенерации и, как результат, показателя конверсии. Чтобы избежать этого, посмотрите какие бывают ошибки веб-дизайна.

Максимум полезной и важной информации

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

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

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

Максимальный захват внимания

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

Что должно быть в футере сайта?

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

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

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

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

Награды и сертификаты

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

Карта сайта

Карта сайта в футере — это список страниц вашего сайта, которые помогут поисковому алгоритму проиндексировать страницы. Или карта может выступать в виде URL, которые поисковик ранее не обнаружил при сканировании сайта.

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

Политика конфиденциальности/условия пользования

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

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

Форма обратной связи

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

Форма обратной связи поможет сконвертировать пользователя в клиента. Она помогает посетителям принять окончательное решение о сотрудничестве, если ранее пользователь был не уверен, что готов к нему. При этом форма обратной связи может содержать различные призывы к действию. Например, призыв “Остались вопросы? Задайте их нам” очень неплохо работает. Особенно, когда пользователь не смог найти ответ на интересующий его вопрос. Размещение формы обратной связи в футере — большой и жирный плюс к конверсии сайта.

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

Контакты компании

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

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

Полезные ссылки на сайт

Навигационные ссылки на страницы сайта помогут посетителю найти то, что его интересует, если ранее он еще это не нашел в основном меню. Также подобными ссылками могут служить дубликаты на страницы “Доставка”, “Оплата”, “О компании” и т.д.

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

Иконки социальных сетей

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

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

Ссылка на вход в личный кабинет

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

Форма подписки на рассылку

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

Форма поиска по сайту

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

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

О компании

Не всегда есть смысл посвящать целую страницу с информацией о компании, когда, в первую очередь, необходимо продвинуть свой товар или услугу. Поэтому нередко практикуется размещение краткой информации о компании в футере сайта. Здесь можно сжато предоставить самую основную информацию, ценную для пользователя. При этом объем информации не должен превышать 300-500 символов. Писать тексты на 5000 символов и скрывать кнопкой “читать дальше” бессмысленно, так как футер размещается на всех страницах и будет дублирующийся контент.

Ключевые запросы

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

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

Последние обновления в блоге

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

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

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

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

Давайте сотрудничать! Напишите нам! Оставьте свой номер телефона и мы перезвоним в течение 5 минут! Простой, но броский призыв к действию в совокупности с формой обратной связи или формой для рассылки, размещенные в подвале, поможет повысить конверсию сайта. Не забывайте, что призывы должны быть понятные и четкие, чтобы пользователю не пришлось думать как сделать действие, которое ему предложено.

Карта

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

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

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

Чего не должно быть в футере?

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

Не переусердствуйте с SEO-оптимизацией футера. Не забывайте, что поисковая система на раз увидит черное SEO и накажет за это.

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

Как грамотно разработать дизайн подвала сайта? 5 ценных рекомендаций

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

Используйте креативные решения

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

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

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

Разместите анимацию

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

Выбирайте читабельные шрифты

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

Используйте больше пространства

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

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

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

Разместите призыв к действию

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

Чем отличается футер интернет-магазина от подвала других видов сайтов?

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

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

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

• Вакансиях компании;
• Контакты менеджеров-консультантов относительно специфического оборудования, которое продает интернет-магазин;
• Информация о скидках для постоянных клиентов, программе лояльности;
• Сведения о вариантах оплаты для юридических и физических лиц;
• Адреса сервисных центров;
• Информация о сотрудничестве для партнеров и поставщиков;
• Ссылка на FAQ;
• Информация о покупке подарочных сертификатах;
• Сведения о компании, режиме работы оффлайн- и онлайн-магазина и многое другое.

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

Потрясающие примеры оформления подвала сайта

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

Пример подвала сайта № 1

Пример футера, который показывает насколько минимализм в этом блоке помогает сконцентрировать внимание на основном: логотипе (бренде) компании и иконках социальных сетей. Нет ничего лишнего, смотрится стильно и красиво. Сочетание черного и белого цвета — классика. А классика никогда не выйдет из тренда.

Пример № 2

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

Пример № 3

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

Пример № 4

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

Пример № 5

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

Пример № 6

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

Пример № 7

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

А вы уже знаете каким будет ваш футер сайта?

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

Понравилась статья? Жмите палец вверх и подписывайтесь на наш блог!

Автор — Игорь Кобылянский

Основатель студии

Антиспам поле. Его необходимо скрыть через css

Ваша оценка:

15 советов по созданию отличного нижнего колонтитула сайта

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

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

Более 2 миллионов цифровых ресурсов с неограниченным количеством загрузок

Получите неограниченную загрузку более 2 миллионов дизайнерских ресурсов, тем, шаблонов, фотографий, графики и многого другого. Envato Elements начинается с 16 долларов в месяц и является лучшей творческой подпиской, которую мы когда-либо видели.

Шаблоны CMS

Shopify, Tumblr и многое другое

Графические шаблоны

Логотипы, печать и макеты

Веб-шаблоны

Целевые страницы и электронная почта

Исследуйте элементы Envato

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

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

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

Heckford содержит множество ссылок на компанию, социальные сети и информацию об их работе.

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

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

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

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

5. Включите уведомление об авторских правах

Эта крошечная строчка текста может спасти жизнь. Не забывайте об этом. Хотя на большинстве сайтов он отображается одной строкой в ​​нижней части экрана, вы можете спроектировать его так, чтобы он был более интегрирован в остальную часть нижнего колонтитула. Уведомление об авторских правах может быть написано или содержать маленький круглый символ «c». Текст часто включает год публикации и имя владельца авторских прав. Несколько уведомлений об авторских правах могут относиться к содержанию и дизайну (для сайтов, которые частично созданы третьей стороной).

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

6. Включите призыв к действию

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

Collabogive выделила значительную часть нижнего колонтитула для «Присоединяйтесь к нашей рассылке новостей». Этот призыв к действию легко увидеть, он соответствует дизайну и дает пользователям возможность взаимодействовать, не обязательно присоединяясь к кампании.

7. Используйте графические элементы

Слишком часто нижние колонтитулы представляют собой просто блок текста. Добавьте логотипы или графические элементы для дополнительного визуального интереса. Только будьте осторожны, чтобы не перегрузить это маленькое пространство слишком большим количеством элементов. Подумайте об этом так: вместо того, чтобы писать «Подпишитесь на меня в Facebook/Twitter/что угодно», добавьте значки для этих выходов. Вы также можете использовать небольшие пиктограммы для ссылок, таких как карты или номера телефонов (но вам, вероятно, следует включить состояние наведения, в котором информация также «прописана»).

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

8. Помните о контрасте и удобочитаемости

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

P53 использует одну из классических (и наиболее удобочитаемых) комбинаций текста и фона для информации нижнего колонтитула — белое на черном.

9. Поддерживайте свою тему дизайна

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

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

10. Думайте мало (но не слишком мало)

Нижние колонтитулы по своей природе содержат множество мелких элементов. Только будьте осторожны, чтобы не стать слишком маленьким. Текст может быть на несколько пунктов меньше размера, используемого для основной части веб-сайта. Иконки или изображения должны быть читаемыми в выбранном вами размере. (Если вы не можете определить, что это за значок, возможно, он слишком мал.) Элементы должны быть достаточно большими, чтобы их можно было легко щелкнуть или коснуться. Если пользователи не могут получить доступ к ссылкам из-за того, что они слишком малы или расположены слишком близко друг к другу, они не будут работать должным образом.

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

11. Используйте много места

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

Sailing Collective использует много места по вертикали и горизонтали между элементами. Они сгруппированы по типу и кликабельны.

12. Остерегайтесь слишком большого количества объектов

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

Чем меньше, тем лучше, как видно из нижнего колонтитула Master & Dynamic. Простых значков и текста достаточно, чтобы с легкостью просмотреть содержимое нижнего колонтитула.

13. Создайте ощущение иерархии

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

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

Нужен ли вашему нижнему колонтитулу нижний колонтитул? Рассмотрите возможность использования нижнего колонтитула для дополнительных слоев. (Это очень популярная практика.) Нижний колонтитул может быть отличным местом для создания дополнительной иерархии, добавления измерения в пространство нижнего колонтитула, если оно слишком плотное, или просто предоставления места для забавного контента. Используйте эту область, чтобы выделить похвалы или вставить призыв к действию.

Блог Smart Passive Income отлично справляется с многоуровневым нижним колонтитулом. Есть призыв к действию, затем ссылки на сайты, затем поднижний колонтитул с упоминаниями в СМИ блеклым цветом, за которыми следуют заявления об отказе от ответственности и политики сайта. Уровни навигации обеспечивают глубину нижнего колонтитула и упрощают просмотр и просмотр.

Самая большая ошибка в нижнем колонтитуле? Разрешить ссылки иметь подчеркивание. По-прежнему существует большое количество веб-сайтов с подчеркнутыми ссылками в футере. Этот устаревший метод не подходит для современного дизайна сайта.

Baxter of California имеет чистый нижний колонтитул и содержит множество ссылок. Он не выглядит загроможденным благодаря простой перелинковке без всех этих надоедливых подчеркиваний.

Заключение

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

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

Передовой опыт и примеры проектирования

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

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

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

Что такое нижний колонтитул веб-сайта?

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

Возможно, вы думаете, что нет смысла тратить много времени и усилий на нижний колонтитул страницы, потому что люди не обращают внимания на содержимое в нижней части страницы. Этот тип мышления подтверждается большинством исследований поведения при прокрутке, в том числе последним крупным исследованием, проведенным Neilsen Norman Group в 2018 году. Они обнаружили, что 57% времени просмотра страницы было потрачено на верхнюю часть сгиба.

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

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

Источник изображения

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

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

Что размещать в нижнем колонтитуле веб-сайта

1. Уведомление об авторских правах
2. Ссылка на политику конфиденциальности
3. Карта сайта
4. Логотип
5. Контактная информация
6. Иконки социальных сетей
7. Форма регистрации по электронной почте

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

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

Уведомление об авторских правах

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

Все, что вам нужно, это символ авторского права © (или слова «Авторское право» или «Copr.»), год публикации веб-сайта или последнего существенного обновления и имя владельца авторских прав. Уведомление об авторских правах должно только появляется один раз на главной странице вашего веб-сайта, но может отображаться на любом количестве страниц. Его можно разместить в любом месте главной страницы, но чаще всего он находится в нижнем колонтитуле.

Вот пример с главной страницы блога HubSpot.

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

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

Лучше всего разместить ссылку на Политику конфиденциальности в нижнем колонтитуле веб-сайта. Это не только удовлетворит юридические требования, но и удовлетворит ожидания большинства потребителей, поскольку они ожидают найти эту информацию в нижнем колонтитуле. Некоторые компании, такие как Conde Nast, могут включить выдержку из своей Политики конфиденциальности в дополнение к ссылке. Вот пример из Житель Нью-Йорка .

Карта сайта

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

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

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

Логотип

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

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

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

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

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

Значки социальных сетей

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

Вот посмотрите на отображение анимированных значков социальных сетей в приложении Rewind от Flatstudio.

Форма регистрации по электронной почте

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

Например, Chobani включает в нижний колонтитул простую форму подписки по электронной почте. Слоган выше — «Получите самые свежие новости Чобани» — помогает определить ожидания подписчиков в отношении того, на что именно они подписываются.

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

Лучшие примеры нижнего колонтитула веб-сайта

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

1. Lorelei Londres

Lorelei Londres — это роскошный отель в Италии, который стремится обеспечить гостеприимство и очарование. Его нижний колонтитул преуспевает в обоих аспектах.

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

2. Superfluid

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

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

3. Spline Group

Spline Group — это машиностроительная и электротехническая фирма, которая ценит эффективную коммуникацию и простоту.

Это понятно из нижнего колонтитула. Минималистский дизайн, нижний колонтитул имеет черный текст на белом фоне. Там есть адрес и ссылки на его страницу в Instagram, LinkedIn и Careers. Под ним гораздо более крупный текст. Но в отличие от Superfluid, это не логотип или торговая марка Spline. Вместо этого это контактная ссылка с простым, но привлекательным призывом к действию: «Давай поговорим».

4. Art4web

Art4web — творческая цифровая и брендинговая студия, занимающаяся созданием уникальных веб-сайтов, мобильных приложений и фирменного дизайна. Его собственный нижний колонтитул является примером уникального дизайна. Вместо того, чтобы предлагать потенциальным клиентам одну точку взаимодействия, такую ​​как Spline Group, Art4web предлагает три. Потенциальные клиенты могут отправить им электронное письмо, заполнить форму, чтобы получить предложение по своему проекту, или позвонить им. Или они могут подключиться к любой из платформ социальных сетей, представленных значками ниже.

5. GOOOders

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

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

6. Аджиб

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

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

7. Hideout Space

Hideout Space — это уникальное место для небольших стартапов и команд, где они собираются для работы и изучения окрестностей Гармиш-Партенкирхена посредством походов, плавания и других занятий. Его веб-сайт предназначен для погружения посетителей, чтобы они чувствовали себя готовыми забронировать поездку, особенно к тому времени, когда они прокручивают до нижнего колонтитула.

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

8. HUGE

HUGE — это цифровое агентство с полным спектром услуг, которое работало с некоторыми из самых инновационных компаний мира для создания новаторских брендов и опыта.

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

9. Tenzo

Стремясь предоставить чистый кофеиновый напиток, альтернативный кофе, Tenzo продает чай маття доступным и доступным способом.

На главной странице есть несколько CTA, которые можно попробовать сегодня с гарантией возврата денег, чтобы потенциальные клиенты были более уверены в своей покупке. Его нижний колонтитул предлагает еще один стимул: скидку 10%, если они введут свой адрес электронной почты. Посетители, которые хотят оставаться на связи, но не предоставляют свою электронную почту, могут подписаться на Tenzo в Pinterest, Facebook, Instagram или Twitter. Нижний колонтитул также содержит важные ссылки для посетителей, которые ищут различные способы приобретения продукции Tenzo или хотят узнать больше о матче или компании. Благодаря всем этим элементам нижний колонтитул веб-сайта эффективно нацелен на клиентов из верхней и средней части воронки.

10. Envoy

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

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

11. Aisle

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

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

12. Will Ventures

Will Ventures — это фирма венчурного капитала на ранней стадии, которая в основном работает с потребителями, здравоохранением и медиа-стартапами.

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

13. Tāmras Gin

Tāmras Gin призван вызывать в памяти пышные рисовые поля, заводи и деревенское очарование деревни Колвейл в Гоа. Нижний колонтитул веб-сайта также призван вызывать эти изображения.

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

14. Callista

Callista — это новый комплекс роскошных апартаментов в Rose Bay. Его веб-сайт предназначен для виртуального тура по этим квартирам.

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

15. Lemkus

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

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

Дизайн нижнего колонтитула вашего веб-сайта

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

Примечание редактора: этот пост был первоначально опубликован в сентябре 2020 года и обновлен для полноты информации.

This entry was posted in Популярное