Футер что это на сайте: Footer — Словарь— PromoPult.ru

Что такое футер на сайте, для чего он нужен и как его сделать правильно

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

Для чего нужен футер сайта?

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

Что размещать в подвале?

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

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

1. Карта сайта – это список разделов и страниц в соответствии со структурой ресурса. Как вариант можно отзеркалить хедер. В мобильной версии верхнее меню сворачивается в «габмургер» и пользователю не сразу понятно, что есть на сайте. В этом случае ссылки в футере помогают быстрее понять структуру портала, перейти к нужным материалам, продуктам.
2. Контакты. В подвале размещают телефоны организации, электронную почту, адрес офиса. Более подробно расписывают информацию на отдельной странице, но для быстрой связи клиенты могут сразу использовать данные из футера.
3. Обратная связь, лид-форма подписки. Если посетитель дошел до самого низа страницы, значит его, как минимум, заинтересовали предложения компании. Этот интерес нужно постараться перевести в целевое действие: подписка на рассылку, акции и спецпредложения, обратная связь и другое. Для этого в footer помещают различные формы захвата.
4. Карта с меткой офиса, склада или торговой точки компании. Этот навигационный элемент повышает удобство пользователей, которые хотят знать точное местоположение организации или найти ближайший к ним магазин бренда. Интерактивная карта не является обязательным элементом футера, но в одностраничниках и лэндингах он используется часто. Наличие физического офиса косвенно повышает доверие целевой аудитории.
5. Политика конфиденциальности, согласие на обработку персональных данных. По закону, если на сайте есть регистрация, авторизация, посетителей просят указать сведения о себе, контакты, то владельцы ресурсы должны разместить правовые документы. Это пользовательское соглашение, политика конфиденциальности, извещение об использовании Cookies.
6. Иконки-ссылки на соцсети. Если компания продвигается в соцсетях, то в футер сайта рекомендуется поместить прямые ссылки на свои группы, сообщества. Сегодня никто уже не отрицает важность СММ для развития бренда, организации – это инструмент связи с клиентами, работы с лояльностью ЦА.
7. Прочая информация. Если подключена электронная оплата, то не лишним будет указать платежные системы.
8. Счетчики веб-аналитики, статистики. Имеет смысл делать их видимыми при больших объемах трафика на сайт. Это косвенно работает на доверие пользователей.

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

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

• Структурированным элементом – не нужно сваливать всю информацию в подвал. Посетитель должен быстро понимать иерархию сайта и удобно ориентироваться в ней.
• Понятным. Используйте заголовки Н1… Н4, описания, списки, иконки.
• Разграниченным. Блоки должны отделяться друг от друга границами: визуальными элементами или пустым пространством. Используйте колоночную верстку – это хорошо структурирует информацию.
• Единым по типографике и стилю со страницей.
• Простым. Не нужно заниматься украшательствами без практической цели. Хедер и футер сайта должны быть удобными навигационными, сквозными элементами, а не произведением дизайнерского искусства.
• Одинаковым блоком на всех страницах. Если требуется, например, на главной указать больше данных, то лучше использовать субподвал или блок перед основным футером.

Подвал должен четко отделяться от остального контента. Посмотрите footer примеры:

Резюме

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

Что такое футер сайта, что должно быть в подвале сайта

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

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

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

Сведения об авторстве

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

footer1.png

footer1.png

Источник maximilyahov.ru

Информация о партнерах

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

footer2.png

footer2.png

Источник www.lamoda.ru

Дублирование контактов

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

footer3.png

footer3.png

Источник www.bmstu.ru

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

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

footer4.png

footer4.png

Источник www.wildberries.ru

Обратная связь и другие лид-формы

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

footer5.png

footer5.png

Источник ostin.com

Карта

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

footer6.png

footer6.png

Источник modsystem.ru

Политика конфиденциальности и защита персональных данных

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

footer7.png

footer7.png

Источник www.shopolog.ru

Возрастное ограничение

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

footer8.png

footer8.png

Источник — regnum.ru

Другая информация

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

footer9.png

footer9.png

Источник selineclinic.ru

Карта сайта

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

Дополнительное меню

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

footer10.png

footer10.png

Источник www.seonews.ru

Облако тегов

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

footer11.png

footer11.png

Источник promo.ingate.ru

Наверх

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

footer12.png

footer12.png

Источник adme.ru

Счетчики

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

footer13.png

footer13.png

Источник www.gvozdik.ru

Оформление

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

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

footer14.png

footer14.png

Источник www.yodiv.com

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

footer15.png

footer15.png

Источник www.oknadomkom.ru

• Достаточность пустого пространства. Контент в подвале оформляется блоками, ссылки – списками-столбцами. Для простоты восприятия важно, чтобы информация разграничивалась. Отступы используются и по всем краям.

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

что это такое и как правильно оформить подвал сайта

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

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

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

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

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

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

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

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

источник vesti.ru

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

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

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

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

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

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

источник uniland.ru

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

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

источник e1.ru

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

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

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

источник promo-sa.ru

Услуги, связанные с термином:

подвал, низ, нижняя часть сайта

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

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

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

Какую роль играет

Footer в веб-разработке играет несколько ролей.

• Дополнительный источник полезной информации.




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




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

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

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

Что содержит

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

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




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




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




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




• Кнопка для заказа обратного звонка. Еще один способ использования футера сайта для получения конверсий. После ознакомления с услугой и прочтения всей информации о ней пользователю предлагается заказать звонок.




• Кнопка «Вверх». Если человек проскролил страницу до самого конца, он может нажать кнопку «Вверх», чтобы вернуться в ее начало.




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




• Логотип компании. Используется для красоты, стиля и придания уникальности.




• Копирайт и годы работы сайта. Эта информация тоже часто размещается именно в подвале сайта.

Как создать хороший футер

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

Ниже описаны некоторые советы и рекомендации по созданию качественного подвала.

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




2. Информация должна быть структурирована: разбита на колонки, отдельные блоки. Пользователь должен легко в ней ориентироваться.




3. При использовании списков с заголовками последние должны выделяться.




4. Между отдельными элементами должны соблюдаться границы. Они располагаются на достаточном расстоянии друг от друга.




5. Используемые шрифты должны сочетаться с общим дизайном сайта.




6. Между первым элементом и началом блока подвала делается отступ.




7. Свободное пространство. Данных не должно быть слишком много. Не стоит их лепить друг на друга. Лучше сделать сам подвал больше. Чем больше свободного пространства вокруг элемента, тем лучше он запоминается и больше внимания привлекает.




8. Самые главные элементы можно сделать ярче. Остальные приглушить. Это позволит сфокусировать внимание посетителей на чем-то конкретном.

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

Что такое футер (footer) и как его использовать на веб-сайтах — UXPUB

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

Основы футеров

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

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

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

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

Люди пользуются футерами

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

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

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

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

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

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

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

Элементы футера

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

• Полезные ссылки
• Doormat navigation
• Ссылки на второстепенные задачи
• Карта сайта
• Отзывы или награды
• Бренды в организации
• Вовлечение клиентов (рассылки по электронной почте и социальные сети)

Футер на сайте Uscreen.tv включает в себя несколько типов контента, таких как 1) контент второстепенной задачи 2) служебный контент и 3) ссылки на социальные сети

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

Большинство сайтов имеют тенденцию включать в футер компактное меню, указывающее на:

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

Используйте для: всех сайтов

Футер сайта Clarity Money упрощает задачу, включая ссылки на Условия использования и Политику конфиденциальности, а также ссылки на аккаунты в социальных сетяхJ. Crew предоставляет контактную информацию в виде ссылок на свой аккаунт в Twitter для обслуживания клиентов, номер телефона и адрес электронной почты службы поддержки

Doormat Navigation

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

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

United Healthcare использует doormat navigation: основные категории отображаются как в верхней панели навигации (вверху), так и в футере (внизу)

Второстепенные задачи

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

• подачу заявки на работу в компании
• задания для создателей контента
• доступ к информации для инвесторов
• поиск документации или спецификаций продукта, или услуги
• доступ к медиа-комплектам и другой PR-информации
• поиск филиалов компании

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

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

Например, на веб-сайте Dwell Magazine представлены категории, не относящиеся к темам журнала, в том числе About, Dwell Magazine, Professionals и Merchants, которые могут заинтересовать вторичные группы пользователей: профессионалов в области СМИ и дизайна, продавцов, инвесторов и рекламодателей (и потенциальных сотрудников).

Футер сайта Dwell Magazine содержит ссылки на второстепенные задачи

Карта сайта

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

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

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

Используйте для: больших сайтов с несколькими уровнями информации или поддоменов

Футер CNN содержит ссылки на навигацию верхнего уровня и на категории нижнего уровня

Отзывы или награды

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

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

Используется для: стартапов или компаний с меньшей узнаваемостью бренда

Чтобы укрепить свой авторитет, Reykjavik Excursions показывает в своем футере награды и организации, от которых они получили признание

Бренды в организации

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

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

Футер на сайте Walmart перечисляет другие бренды, которыми владеет компания, такие как Hayneedle, Jet и Modcloth

Вовлечение клиентов

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

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

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

На всех страницах сайта TheGoodTrade.com имеется большой многокомпонентный футер, который включает в себя: 1) предложение подписаться на рассылку, 2) виджет с фидом Instagram аккаунта, 3) ссылки на аккаунты в социальных сетях, 4) ссылки на второстепенные задачи и 5) отказ от ответственности с информацией об авторских правах

Варианты футеров

Бесконечный скролл и мини-футер

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

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

Использовать для: страниц с бесконечным скроллом

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

Контекстные футеры

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

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

Используйте для: сайтов с различными пользовательскими ролями (например, «создатель контента» vs «потребителя контента» или «участник» vs «гость»)

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

Характерные ошибки футера (и их решения)

Футеры прошли долгий путь с 1990-х годов, но по сей день еще встречаются следующие распространенные ошибки:

• Более двух уровней информационной иерархии
  Нельзя добавлять всю карту сайта в футер. Футер – это ограниченное количество пространства экрана, которое должно быть посвящено только важной информации. Как однажды метко сказала моя мама: «Если все важно, ничего не важно».
   
  • РЕШЕНИЕ: Подумайте о перераспределении контента и отображении только ссылок на категории первого и второго уровня, а не на весь сайт. Если отдельная страница нижнего уровня достаточно важна, отобразите эту конкретную ссылку в футере, но вам не нужно показывать все уровни информационной иерархии, чтобы ее можно было обнаружить.
• Неясные имена ссылок в футере (например, Company Info или Help вместо Contact Us)
  Пресловутая ссылка «Ресурсы»  во многих футерах является одним из прискорбных пережитков прошлого.
   
  • РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких условий. Если команда не уверена, какой термин будет наиболее подходящим, сортировка карточек или тест юзабилити могут помочь определиться с терминологией.
• Неясная структура или информационная иерархия
  Иногда футер может быть «свалкой» для потерянных ссылок, то есть ссылок, которые, по-видимому, не имеют отношения к глобальной навигации или второстепенным задачам. Если у футера отсутствует паттерн организации, пользователям либо придется просматривать все информацию, либо они потратят очень мало времени на его изучение.

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

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

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

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

• РЕШЕНИЕ: используйте разборчивый размер и цвет шрифта (с приличным контрастом) и избегайте использования декоративных шрифтов. Самое главное, не скрывайте футер – люди ожидают его там найти.

Вывод

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

Получите больше советов по  созданию более эффективных веб-страниц в нашем курсе Web Page UX Design.

Ресурсы

Jakob Nielsen & Kara Pernice, 2010, Eyetracking Web Usability, The New Riders

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

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

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

Футер сайта, это сленговое понятие среди русскоговорящих веб-мастеров и разработчиков. Как и многие другие, оно было заимствовано из английского языка. Слово «footer» – переводится как «нога, нижняя сноска или подвал». То есть – это самая нижняя часть сайта.

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

Что обычно пишут внизу сайта

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

Обратите внимание, на моем сайте подвал состоит из трех уровней:

Подвал первого уровня

В самой нижней части подавала обычно располагают:

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

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

Подвал второго уровня

Следующая часть подвала чуть более функциональна… Там могут располагаться технические ссылки.

К таким, я отношу ссылки на:

• партнерскую программу
• карту сайта
• политику конфиденциальности
• соглашение об обработке персональных данных

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

Подвал третьего уровня

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

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

И так…

Навигация

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

Подвал сайта интернет магазина «Буквоед»

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

Меню в подвале дублирует главное меню сайта

Карта

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

Форма обратной связи или форма подписки

Если вы ведете рассылку, то форму подписки можно добавить в подвал.

Футер магазина М-Видео

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

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

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

Дополнения для мобильных

К таким дополнениям можно отнести QR код или ссылки на AppStore и Google Play для установки официального приложения сайта.

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

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

Стрелка вверх ↑

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

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

Поэтому стрелки сейчас не располагают в подвале, а делают их плавающими по странице.

Заключение

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

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

А у меня все.

Нашли ошибку? Выделите фрагмент текста и нажмите CTRL+ENTER

Футер сайта: что это и как его оформить

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

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

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

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

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

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

Почему футер так важен для вашего сайта?

Важность футера для сайта трудно переоценить. Анализ Chartbeat подтверждает этот факт, исследовав 25 миллионов юзеров различных сайтов и отследив их поведение на сайте:

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

Преимущества правильного футера

1. Футер на сайте может содержать любую информацию, которая представляет интерес для посетителя: от контактных данных, до ссылок на страницы с дополнительными услугами компании.
2. Являясь дополнительным источником важной информации для пользователя, хорошо оптимизированный футер облегчает навигацию по сайту и помогает вам приводить пользователей к целевому действию.
3. При помощи футера, вы можете подробно рассказать своему клиенту о компании и направлении бизнеса, предложить подписаться на новостную рассылку или поставить ссылку на страницу о партнерстве. Футер сильно упрощает навигацию для ваших посетителей, если они желают посетить какой-то конкретный раздел на сайте.
4. Футер напомнит посетителю, что контент веб-сайта не ограничивается данной страницей. Это подтолкнет потенциального клиента к дальнейшим действиям: заполнить форму обратной связи, перейти на страницу сообщества в социальных сетях, просмотреть контактную информацию или зарегистрироваться на сайте. Эти действия влияют на общую конверсию сайта. Правильный дизайн футера помогает превращать посетителей вашего сайта в клиентов.

Ошибки в оптимизации футера сайта

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

1. Шрифт

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

2. Недостаток места.

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

3. Недостаточно/отсутствует информация о компании.

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

4. Ключевое слово для seo.

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

5 ошибка. Дублирование главного меню.

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

Футер сайта: примеры

Мы рассмотрим как красивые примеры, так и не очень 🙂 Для того, что бы вы понимали, как нужно делать футер, а как лучше не нужно.

1. Дизайн футера сайта Lorem Ipsum

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

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

Используйте готовые шаблоны Веблиум с красивым футером 🙂

 2. Footer меню: пример №2

Футер часто используется в качестве дополнительной области навигации: здесь стоит разместить ссылки типу «О нас», «Контакты» и даже «Справка».

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

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

3. Пример переполненного футера

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

4. Zoyogurt: пример хорошо оформленного футера

Этот футер оформлен в соответствии с его местом на сайте. Создатели проявили креатив и создали подземный мир на месте футера.

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

5. Пример футера сайта Saddlebackleather

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

6. Пример новостного футера Railstips

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

7. Информативный пример футера

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

8. Сайт Кэрол Риверро

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

9. Жизель Jaquenod: пример стильного дизайна футера

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

10. Инновационный футер

Не бойтесь использовать неправильные формы!

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

Советы и рекомендации по дизайну футера

1. Фантазируйте! Фоны футера и основы сайта должны быть разными, но из одной или подходящей цветовой гаммы. Для выделения футера, применяйте выделяющиеся цвета или даже тематические изображения, соответствующие деятельности компании.
2. Используйте основную тему дизайна сайта. Делайте футер в контексте с дизайном всего сайта. Цвета, стили и графика должны отражать общий стиль веб-страницы.
3. Используйте анимацию. Анимированные элементы всегда привлекают внимание. Кроме того, они эмоционально заряжают ваш футер, подсознательно призывая посетителя к действию.
4. Используйте читаемые шрифты. Избегайте мелких шрифтов, даже если в футере слишком много информации. Лучше удалить некоторые ненужные ссылки. И обязательно выбирайте цвета, которые контрастируют с фоном, чтобы буквы хорошо выделялись, обеспечивая удобство для чтения.
5. Используйте столбцы, значки, отступы и т.д. Для лучшего восприятия. Это улучшает фокус на элементах футера.
6. Используйте больше места. Чем больше свободного места в  футере, тем выше концентрация посетителей на размещенной информации. Организованное, правильное и логичное расположение полезных ссылок поможет вам передать важную информацию клиенту. Тематические заголовки и логические блоки помогут вашему посетителю искать нужную информацию.
7. Не забывайте оптимизировать футер, чтобы он отлично смотрелся на любом мобильном устройстве!
8. Помните про иерархию в футере. Иерархия информации имеет решающее значение для футера. Самая важная информация, должна быть в наиболее заметном месте, а типичная информация, например, информация об авторских правах, не должна падать в глаза.
9. Сделайте дизайн вашего футера простым. Скромный дизайн подойдет для работы с большим количеством информации в футере.
10. Используйте столбцы. Этот трюк помогает создать ощущение правильной организации информации на сайте. Сделайте каждый столбец релевантным определенной теме и укажите ссылки на сервисы, социальные сети и наиболее посещаемые страницы.
11. Не используйте слишком большие изображения: они могут легко отвлечь посетителя от того, что действительно важно.
12. Подумайте о дополнительных отделениях футера. Вот очень хорошая идея: используйте область футера, чтобы показать свои награды, или разместите призыв к действию здесь.

Что можно добавлять в футер (советы)

1. Ссылки на разделы сайта с важной информацией, в том числе «О нас» и «Контакты». Иногда вашим посетителям просто нужно посмотреть, кто вы и где находится ваш офис. Люди часто забывают адреса, они могут легко потерять вашу визитку, и они посетят ваш сайт, чтобы получить контактную информацию. Поместите свой адрес электронной почты, номер телефона и местонахождение компании в футер.
2. Уведомление об авторских правах. Эта короткая текстовая строка расскажет вашим посетителям, кто владеет контентом вашего сайта.
3. Призыв к действию. После того, как посетители просмотрели всю страницу и перешли к ее нижней части, дайте им возможность сделать последнее действие! Сделайте кнопку целевого действия: предложите подписаться на рассылку по электронной почте, или заказать звонок.
4. Графические элементы. Поместите логотип или другие интересные графические элементы. Но не перегружайте это пространство огромным количеством различных элементов.
5. Карта сайта. Многие крупные сайты используют этот компонент в футере. Вы можете легко найти эту полезную ссылку в футере на сайтах Intel, Apple и других известных компаний. Обычные посетители редко нажимают на него, но, как и карта сайта XML, эта ссылка может помочь поисковым системам в индексации сайта.
6. Кнопки социальных сетей. Нам всем важно получать трафик из социальных сетей, но мы не любим, когда люди покидают нас, не подписавшись на нас на Facebook, Twitter или YouTube. Футер является идеальным местом для размещения ссылок на соцсети, так как это выглядит ненавязчиво, и, при этом заметно.
7. Форма авторизации. Некоторые посетители сайта захотят подписаться, или авторизироваться на вашем сайте. Дайте им возможность сделать это в футере.
8. Панель поиска по сайту. Если вы не предоставили посетителям панель поиска в заголовке или на боковой панели, сделайте ее при создании футера. Не забудьте выделить инструмент поиска по сайту, чтобы посетители не пропустили его.
9. Отзывы от довольных клиентов. Если у вас есть реальные положительные отзывы от своих клиентов — разместите их у себя в футере. Это будет положительно влиять на вовлеченность новых пользователей.

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

И если вам нужна онлайн-консультация, наши специалисты всегда на связи, 24/7.

Ярослава

Контент-менеджер и SEO-специалист

Другие статьи автора

1.8 5 голоса

Рейтинг статьи

шаблонов проектирования и когда использовать каждый

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

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

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

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

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

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

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

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

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

• Полезные ссылки
• Навигационный коврик
• Ссылки на второстепенные задачи
• Карта сайта
• Отзывы или награды
• Бренды внутри организации
• Взаимодействие с клиентами (информационные бюллетени по электронной почте и социальные сети)

U экран.tv включает в себя несколько типов нижнего колонтитула, например (1) контент для вторичных задач (2) служебный контент и (3) ссылки на социальные сети.

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

Большинство сайтов, как минимум, имеют тенденцию включать служебную навигацию в нижний колонтитул, указывая на:

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

Использовать для: всех сайтов

Нижний колонтитул Clarity Money упрощает работу, включая ссылки на Условия использования и Политику конфиденциальности , а также ссылки на учетные записи социальных сетей (дополнительную информацию см. Ниже). J. Crew предоставляет контактную информацию в виде ссылок на специальную учетную запись службы поддержки клиентов в Twitter, номер телефона и адрес электронной почты службы поддержки.

Навигация по коврику

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

Используйте для: сайтов с длинными страницами, особенно если глобальная навигация недоступна, а внизу страницы

United Healthcare использует навигацию по коврику: основные категории отображаются как на верхней панели навигации (вверху), так и в нижнем колонтитуле (внизу).

Вторичные задачи

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

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

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

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

Например, на веб-сайте журнала Dwell Magazine представлены категории, не относящиеся к темам журнала, в том числе About, Dwell Magazine, Professionals, и Merchants , которые могут заинтересовать вторичные группы пользователей: профессионалов в области СМИ и дизайна, продавцов, инвесторов и рекламодателей (и перспективные сотрудники).

Нижний колонтитул журнала Dwell Magazine содержит ссылки на второстепенные задачи (кроме чтения статей).

Карта сайта

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

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

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

Используется для: больших сайтов с несколькими уровнями информации или поддоменов

Нижний колонтитул CNN содержит ссылки на навигацию верхнего уровня и на категории нижнего уровня.

Отзывы или награды

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

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

Используйте для: стартапов или компаний с меньшей узнаваемостью бренда

В нижнем колонтитуле Reykjavik Excursions успешно включены награды и советы, от которых он получил признание, чтобы укрепить доверие и авторитет.

Бренды внутри организации

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

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

Нижний колонтитул Walmart обращается к другим брендам, принадлежащим компании, таким как Hayneedle, Jet и Modcloth.

Взаимодействие с клиентами

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

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

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

Все страницы TheGoodTrade.com имеют большой многокомпонентный нижний колонтитул, который включает: (1) приглашение для подписки на список рассылки, (2) виджет с его лентой Instagram, (3) ссылки на учетные записи социальных сетей, (4) ссылки второстепенным задачам и (5) отказ от ответственности с информацией об авторских правах.

Бесконечная прокрутка и мини-нижний колонтитул

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

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

Используется для: страниц с бесконечной прокруткой

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

Контекстные нижние колонтитулы

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

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

Используется для: сайтов с разными ролями пользователей (например, «создатель контента» против «потребителя контента» или «участник» против «не член»)

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

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

• Более двух уровней иерархии информации
  Специально для больших сайтов, включение всей карты сайта не является ответом на ваш нижний колонтитул.Нижний колонтитул — это выделенный объем недвижимости, который должен быть посвящен только важной информации, которая должна быть обнаружена. Как однажды метко сказала моя мама: «Если все важно, ничего не важно».
  • РЕШЕНИЕ: Рассмотрите возможность изменения приоритетов контента и отображения ссылок только на категории первого и второго уровня в вашем IA, а не на весь сайт. Если одна страница нижнего уровня достаточно важна, разместите эту конкретную ссылку в нижнем колонтитуле, но вам не нужно отображать все уровни информационной иерархии, чтобы ее можно было найти.
• Нечеткие названия ссылок в нижнем колонтитуле (например, Информация о компании или Справка по сравнению с Свяжитесь с нами )
  Пресловутая ссылка Resources на многих нижних колонтитулах является одним из прискорбных остатков прошлых нижних колонтитулов.
  • РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких условий. Если команда не уверена, какой термин будет более подходящим, сортировка карточек или проверка удобства использования могут помочь пролить свет на термины, которые могут запутать пользователей.
• Нечеткая структура или информационная иерархия
  Нижний колонтитул иногда может быть «свалкой» для бесхозных ссылок, то есть ссылок, которые, кажется, не имеют никакого отношения к глобальной навигации или второстепенным задачам. Если нижний колонтитул не имеет схемы организации, пользователи либо проведут исчерпывающий обзор, либо потратят очень мало времени на просмотр нижнего колонтитула.
  Нижний колонтитул GM не имеет четкой структуры из-за отсутствия информационной иерархии. Такая настройка затрудняет сканирование или поиск содержимого.
  • РЕШЕНИЕ: Ясно передайте информационную иерархию элементов в нижнем колонтитуле с помощью группировки или других шаблонов визуального дизайна, которые указывают визуальную иерархию (например, выделенные жирным шрифтом ссылки на страницы верхнего уровня и ссылки на страницы нижнего уровня с нормальным весом).
• Скрытые или неразборчивые нижние колонтитулы
  Иногда компании предпочитают использовать крошечный размер шрифта для нижних колонтитулов, чтобы разместить все ссылки или сделать ссылки менее отвлекающими. Хуже того, некоторые сайты могут использовать функцию анимации или аккордеона, чтобы полностью скрыть нижний колонтитул в эстетических целях.Хотя нижний колонтитул не является основной навигацией, люди по-прежнему используют его и полагаются на него, поэтому не пытайтесь его скрыть.
  В более ранней версии нижнего колонтитула Reserved.com использовалась функция аккордеона, которая по умолчанию была свернута, что затрудняло поиск ее содержимого. В более ранней версии нижнего колонтитула Reserved.com использовалась функция аккордеона, которая была свернута по умолчанию, что затрудняло поиск ее содержимого.
  • РЕШЕНИЕ: Используйте четкий размер шрифта и цвет шрифта (с приличной контрастностью) и избегайте использования декоративных шрифтов.Самое главное, не скрывайте и не сворачивайте нижний колонтитул — люди ожидают, что он будет там.

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

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

ресурсов

Якоб Нильсен и Кара Пернис, 2010 г., отслеживание веб-приложений, Новые райдеры

Лучшие методы проектирования и примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта сайта

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

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

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

Логотип

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

Например,

Envoy добавляет товарный знак прямо под своим логотипом в нижнем колонтитуле. Он гласит: «Мы создаем возможности для объединенного мира.Быть смелым.» Таким образом, читатель будет иметь представление о том, чем занимается компания, даже если он не читал страницу «О компании».

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

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

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

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

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

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

Электронная форма для регистрации

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

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

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

Примеры нижнего колонтитула веб-сайта

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

1. Лорелей Лондрес

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

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

2. Сверхтекучая

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

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

3. Группа сплайнов

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

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

4. Art4web

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

5. ГОООдерс

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

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

6. Аджиб

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

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

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

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

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

Все, что вы должны знать о нижнем колонтитуле веб-сайта

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

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

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

Анатомия веб-сайта

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

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

Нижние колонтитулы обеспечивают единообразие

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

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

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

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

Что включать в нижний колонтитул

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

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

• Призыв к действию (CTA): Призывы к действию побуждают посетителей предпринять определенные действия после перехода на ваш сайт. В зависимости от характера вашего сайта вы захотите разместить призыв к действию на каждой странице. Это может быть кнопка, чтобы запланировать звонок с вами, или ссылку для подписки на ваши услуги.
• Контактная форма: Контактные формы могут размещаться на любой странице вашего веб-сайта, что делает нижний колонтитул доступным и единообразным местом для его размещения. Никогда не бывает плохой идеей предоставить посетителям более одного места, где они могут связаться с вами.
• Адреса или карты: Если у вас есть физическое местоположение магазина, куда вы хотите направлять посетителей, адрес или карта должны быть включены в ваш нижний колонтитул. Виджет контактной информации предоставляет инструменты, необходимые для предоставления этой информации посетителям вашего сайта.
• Изображений: Изображения могут выделить ваш нижний колонтитул, добавив привлекательный штрих и всплеск цвета. Такой инструмент, как мозаичные галереи Jetpack, позволяет демонстрировать сразу несколько изображений. Вы можете отображать названные изображения различных товаров, которые вы продаете на своем сайте.
• Ссылки на ваши учетные записи в социальных сетях: Социальные сети — это важный инструмент для блоггеров, владельцев веб-сайтов и маркетологов. Иконки социальных сетей предоставляют вам единый интерфейс для размещения ссылок на ваши социальные каналы, поощряя взаимодействие на платформах, отличных от вашего веб-сайта.
• Подписка на информационный бюллетень: Этот призыв к действию служит для вовлечения вашей аудитории сейчас и в будущем. Подписки предупреждают подписчиков всякий раз, когда вы публикуете новые сообщения. В качестве альтернативы вы можете использовать всплывающий виджет для подписчика MailChimp, чтобы пользователи могли подписаться на вашу рассылку.
• Популярные сообщения или статьи: После того, как посетитель сайта прочитает сообщение, вы должны предоставить ему возможность найти похожие. Виджет «Показать сообщения WordPress» отображает ваши самые последние сообщения, а виджет «Лучшие сообщения и страницы» дает вам возможность отображать самые популярные из них.

Не упустите возможность, представленную нижним колонтитулом

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

Что входит в нижний колонтитул вашего сайта? Делитесь советами и приемами с другими пользователями сайта в разделе комментариев ниже.

Узнайте о преимуществах Jetpack

Узнайте, как Jetpack может помочь вам защитить, ускорить и расширить ваш сайт WordPress.

Сравнить планы

Нравится:

Нравится Загрузка …

Связанные

Что такое нижний колонтитул веб-страницы? | Small Business

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

Кодирование нижнего колонтитула

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

Содержимое нижнего колонтитула

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

Дизайн нижнего колонтитула

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

Важность нижнего колонтитула

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

Ссылки

Биография писателя

Мэг Норт профессионально пишет с 2008 года в качестве онлайн-копирайтера для семинара Sturbridge Yankee Workshop.Она также опубликовала рассказ в журнале «Ученый из штата Мэн». Норт имеет степень бакалавра искусств в области журналистики в Университете Южного Мэна.

Рекомендации по дизайну нижнего колонтитула: 27 вещей, которые нужно поставить внизу

Вот интернет-история, которая происходит миллион раз в день.

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

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

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

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

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

Насколько важны на самом деле нижние колонтитулы?

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

Если вам интересно, как далеко вниз пользователи прокручивают ваш сайт, есть платные инструменты, которые покажут вам «глубину прокрутки» на вашем сайте. Lucky Orange, Crazy Egg и ClickTale — вот несколько примеров.

27 вещей, которые можно поместить в нижние колонтитулы

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

1. Авторское право

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

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

2.

Карта сайта

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

3. Политика конфиденциальности

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

Нужна политика конфиденциальности? Мы использовали TermsFeed для создания нашего или этого удобного бесплатного генератора политик конфиденциальности.

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

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

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

5.

Контакт

Посетители ожидают найти контактную информацию в правом верхнем углу заголовка. Это стандарт веб-дизайна. Также стандартно найти ссылку «контакт» в правом нижнем (или в центре) нижнего колонтитула.

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

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

Формы

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

Формы

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

В формах

7. можно задавать конкретные вопросы и направлять представления конкретным людям в зависимости от ответов.
8. Ссылки электронной почты являются магнитом для спама.

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

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

6. Адрес и ссылка на карту / направления

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

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

7.

Телефоны и факсы

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

8.

Навигация

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

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

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

Вот несколько источников идей для навигации по нижнему колонтитулу:

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

9.

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

Мы любим посетителей из социальных сетей.Но нам не нравится, когда наши посетители уходят на Facebook, Twitter или YouTube. Если они это сделают … они больше не вернутся. Вот почему наши дизайнеры почти никогда не помещают значки социальных сетей в заголовки веб-сайтов.

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

Вот хороший пример от Рафаля Томаля.

10.Виджеты социальных сетей

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

Это имеет смысл только в том случае, если вы активны в этой сети и имеете твердые редакционные стандарты в отношении того, чем вы делитесь.

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

11. Регистрация по электронной почте

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

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

Поля подписки

в нижнем колонтитуле должны по-прежнему соответствовать лучшим методам подписки по электронной почте, предлагая социальное подтверждение (сколько подписчиков ранее?) И устанавливая ожидания (что получает подписчик? Как часто?).

Одинокий маленький ящик с адресом электронной почты с кнопкой отправки, скорее всего, не очень хорошо конвертируется, как этот парень…

12. Авторизация

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

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

13. Нажмите

Другой тип неперспективов — это пресса. На самом деле только часть 1% ваших посетителей — журналисты и редакторы. Так что не тратьте драгоценное место в основной навигации на ссылку для прессы.

Если кто-то из СМИ все же зайдет к вам, они прокрутят вниз и найдут его.

14. Инструмент поиска по сайту

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

Инструменты поиска

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

На веб-сайте Smalley Steel Ring есть инструмент быстрого поиска продуктов, помогающий посетителям сразу перейти в каталог с любой страницы.

15.Изображения

Если вы действительно хотите украсить нижний колонтитул, добавьте к нему изображение. Это шанс добавить сайту индивидуальности.

В нижнем колонтитуле Mason-Dixon Knitting есть изображение Кей и Энн, двух основателей.

16. Мини-галерея

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

В нижнем колонтитуле

Experimental Sound Studio есть галерея фотографий. Щелчок по фотографии вызывает изображение в лайтбоксе.

17. Брендинг

Изображения — еще один шанс укрепить бренд. Это хорошее место для использования альтернативной версии вашего знака или использования вашего логотипа по-другому.

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

18. Ваша миссия. Ваши ценности

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

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

The Better Government Association не только повторяет их миссию, но и показывает, какое влияние они оказали, используя цифры справа. Невозможно упустить из виду, почему и как они делают то, что делают.

19. Ключевые слова для поисковой оптимизации

Текст в нижнем колонтитуле — это текст на каждой странице. Так что это отличное место, чтобы показать, что вы относитесь к Google. Если вы все же включаете свою миссию, свое ценностное заявление или рекламное объявление «о нас», используйте это как возможность включить свою основную ключевую фразу.

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

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

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

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

ProTip: объедините все свои награды, сертификаты и логотипы членства в «ящик доверия».

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

Сертификаты

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

• Сертификаты безопасности для интернет-магазинов
• Сертификат BBB для бизнеса с местной аудиторией
• сертификатов Adwords для компаний цифрового маркетинга.
• сертификатов GSA для компаний, работающих с государством
• Сертификация MWBE для предприятий, принадлежащих меньшинствам и женщинам
• Сертификат B-Corp для социально и экологически сознательного бизнеса

21.Членство в ассоциациях

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

Связи

Cookies By Design отображаются в правом нижнем углу нижнего колонтитула.

22. Отзывы

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

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

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

23. Последние статьи

Если вы занимаетесь контент-маркетингом, вы можете дать своему сайту «пульс», но разместив последний контент прямо в нижнем колонтитуле.

Институт солнечного топлива

делает это на своем веб-сайте вместе с социальным виджетом.

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

24. Предстоящие события

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

25. Видео: Ваше приветственное сообщение

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

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

26. Аудио: Your Jingle

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

Сайт Food For Life встраивает в футер небольшой аудиоплеер с их джинглом. Очаровательный!

27. Один… последний… Призыв к действию

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

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

Другие идеи дизайна нижнего колонтитула

Вот еще немного идей для создания нижнего колонтитула вашего следующего веб-сайта.

Цветовые схемы нижнего колонтитула

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

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

Прикрепленный нижний колонтитул

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

Наши друзья из Conversion Sciences используют липкий нижний колонтитул, который всегда виден на каждой странице.

Хотите собственный липкий нижний колонтитул? Используете WordPress? Вот плагин для создания липких нижних колонтитулов.

Бесконечная страница… Без нижнего колонтитула!

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

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

Что нужно включить в дизайн нижнего колонтитула? Наши рекомендации о том, что включать в нижний колонтитул

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

Задайте себе вопрос: есть ли у посетителей важный вопрос, на который нет ответа в заголовке? Если да, добавьте его в нижний колонтитул.

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

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

29+ примеров нижних колонтитулов веб-сайтов и почему они так хорошо работают

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

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

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

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

Уведомление об авторских правах обычно включает символ © (символ авторского права), год публикации и имя правообладателя.

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

.

Условия использования могут быть принудительно исполнены с помощью методов обзора и переноса по клику. Метод browsewrap означает включение Условий обслуживания по ссылке в нижнем колонтитуле веб-сайта.Однако метод clickwrap относится к размещению условий обслуживания в формах, то есть когда пользователи пытаются создать учетную запись. Когда они нажимают «Отправить», они также должны согласиться с условиями обслуживания этого сайта.

• Контакт, адрес и время работы

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

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

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

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

Нижний колонтитул темы «Загипнотизированный»

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

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

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

Ниже приведен пример нижнего колонтитула с включенными виджетами:

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

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

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

Нижний колонтитул, созданный с помощью темы «Загипнотизация»

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

Что вдохновляет нижний колонтитул вашего сайта?

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

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

Источник: https://www.awwwards.com/

• Продолжить навигацию по сайту

Иногда нижний колонтитул может быть настолько интригующим, что не отпускает пользователя. Он предлагает ему / ей продолжить навигацию по сайту и найти ответ на ключевой вопрос: нравится ли мне этот сайт? Что вы думаете об этом:

Источник: https://www.awwwards.com/

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

В центральной колонке кратко спрашивается: «Мы можем помочь?» и дает список возможностей действовать в ситуации, которая лучше всего описывает конкретного пользователя.

• Чувство принадлежности к сообществу

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

Источник: https://www.awwwards.com/

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

Нижний колонтитул, созданный с помощью темы «Загипнотизация»

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

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

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

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

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

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

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

Demicreative.com имеет простой призыв к действию, когда приглашает пользователей «Скажите нам крик». За приглашением следует адрес электронной почты и номер телефона, что позволяет людям «рассказать о своем бренде». Синий фон обнадеживает и профессионален, сглаживая то, как эти люди могут начать сотрудничество с Demicreative.

Bluestag.co.uk также имеет четкий призыв к действию «Наймите нас», за которым следуют контактные данные. Номер телефона и адрес электронной почты кликабельны и упрощают процесс связи для всех, кто склонен «нанимать» Bluestag.co.uk.

Socialtriggers.com имеет более очевидный призыв к действию. Традиционная кнопка CTA выделяется — в нижнем колонтитуле веб-сайта своим расположением и ярким цветом.

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

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

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

Карта сайта и ссылки в центре нижнего колонтитула

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

Нижний колонтитул, созданный с помощью темы «Загипнотизация»

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

На сайте

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

Нижний колонтитул, ориентированный на авторские права и использование

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

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

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

На сайте

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

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

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

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

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

Хорошим примером этого является Mashable.com:

Чтобы собрать все вместе

Нижний колонтитул веб-сайта нельзя игнорировать. Согласно исследованиям и различным исследованиям, это благоприятное место для увеличения конверсии. В зависимости от типа веб-сайта и целей каждой страницы нижний колонтитул может включать различные элементы, используемые посетителями. Единственное, что вам нужно сделать, это выбрать ПРАВИЛЬНЫЕ элементы для размещения в нижнем колонтитуле веб-сайта и организовать их в соответствии с четкой структурой, удобной для просмотра и извлечения выгоды.

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

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

Так что же такое нижний колонтитул сайта?

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

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

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

Почему нижний колонтитул важен?

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

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

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

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

Что должно быть в нижнем колонтитуле?

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

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

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

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

Примеры

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

Этот сайт

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

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

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

Министерство типа

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

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

Мамочка и попкорн

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

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

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

Site Inspire

Наконец, мы подошли к Site Inspire, который сочетает в себе идею минимализма и трехколоночный нижний колонтитул (как веб-дизайнер по моему собственному сердцу). И делает это практически безупречно.

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