Что такое футер? Советы по дизайну и SEO для нижних колонтитулов веб-сайтов

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

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

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

С помощью @media-запросов в каскадных таблицах стилей (CSS) информация на сайте может быть скорректирована для максимального удобства пользователей на экранах мобильных устройств.

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

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

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

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

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

Веб-магазин может использовать нижний колонтитул, например, для отображения категорий товаров или разделов сайта:

Коллекция

• Беговая обувь
• Обувь для ходьбы
• Обувь для здоровья
• Стельки
• Средства по уходу за обувью

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

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

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

Но будьте осторожны! При встраивании онлайн-карт необходимо соблюдать правила защиты данных. Для передачи пользовательских данных на серверы обычно требуется согласие пользователя. Вы можете встроить карту-символ, фотографию и текст, чтобы детализировать любую передачу данных. Обратите внимание, что некоторые поставщики картографических услуг прямо запрещают использовать размытые изображения своих карт (например, Google Maps).

Аналогичная ситуация и с платформами социальных сетей. Лучше всего включить иконку со ссылкой на Facebook, Google, Twitter и Co. Прямая интеграция их сервисов может привести к несанкционированной передаче данных и стать нарушением правил защиты данных. К счастью, когда речь идет о социальных сетях, сегодня существует множество веб-инструментов, помогающих осуществить встраивание в соответствии с требованиями законодательства.

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

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

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

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

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

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

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

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

Back Market — это онлайн-маркет, который продает переработанные электронные товары, такие как смартфоны и эпиляторы. В нижний колонтитул встроено несколько дополнительных функций, например, ссылка на страницу отзывов о компании на Trustpilot. Интеграция отзывов клиентов излучает уверенность и укрепляет доверие. В зависимости от отрасли, встраивание ссылки на профиль Glassdoor позволяет пользователям получить доступ к дополнительной информации о вашей компании, такой как данные о зарплате, отзывы действующих и бывших сотрудников, фотографии офиса и многое другое. Посетители могут быстро узнать больше о компании, перейдя по ссылке «Кто мы» из раздела «О компании» в нижнем колонтитуле. Широкий выбор языков придает сайту международный колорит. Только ссылка в Википедии на «Deep Fried Mars Bars» кажется немного странной, но она показывает, что у Back Market есть чувство юмора.

Нижний колонтитул немецкого производителя промышленной арматуры ARTES Valve & Service понятен и включает все важные детали, чтобы клиенты могли быстро и легко связаться с компанией и поинтересоваться ее услугами. Контактные данные компании можно посмотреть на Google Maps. Нижний колонтитул сайта оптически отделен от контента с помощью тонкого контраста и синей линии.