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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример footer’a: Amuse Society

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

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

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

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

В былое время SEO-эффекта добывались сбором сквозных бэклинков из футера сайтов (так выглядело http://www.andyrutledge.com/dog-and-pony-show-design.php ). Но сегодня, любая футерная ссылка хороша лишь с главной страницы. Гугл иногда сбивает с толку, напоминая о своем отношении к ссылкам в принципе. Официально признано, что в хедере и футере ссылки менее значимы, чем размещенные по тексту. Также, предлагается использовать для внешних (исходящих) ссылок тег «nofollow».

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

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

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

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

Актуальные варианты визуального оформления «подвала» сайта:

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

Пример footer’a: Thepixel.com

Пример footer’a: Worldseasonings.com

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

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

Пример footer’a: Jenier World of Teas

Логотип и анимированная графика верхнего края футера оживляют продающий дизайн

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

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

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

P.S.

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

Футер сайта — что это такое и для чего нужен

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

В чем важность футера для сайта

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

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

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

Какая информация должна содержаться в футере

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

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

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

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

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

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

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

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

Оформление футера

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

• Наличие структурированных элементов. Не нужно сваливать в подвал абсолютно все данные. Человеку важно понять иерархию сайта и быстро сориентироваться в ней.
• Используйте заголовки h2-h5, описания, иконки и списки для создания понятной и логичной структуры.
• Разграниченная структура. Блоки должны отличаться друг от друга границами. Оформите это с помощью визуальных элементов или пустого пространства. Еще один вариант – колоночная верстка.
• Футер должен быть единым по графике и стилю с основной страницей и хедером.
• Футер не должен быть сложным. Не занимайтесь лишним украшательством без практической цели.
• Одинаковые блоки на всех страницах. Если нужно указать больше данных на главной странице, то лучше используйте субподвал или блок перед основным футером.

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

Примеры успешного футера

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

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

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

Четвертый пример – идеальное соблюдение стилистики футера и основной части сайта. При этом сам футер максимально обособленный.

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

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

Последний пример: футер со всей необходимой информацией и субподвал с картой сайта. Все понятно и просто:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ресурсов

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

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

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

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

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

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

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

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

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

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

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

Ссылки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры

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

Этот сайт

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

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

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

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

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

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

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

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

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

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

Site Inspire

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

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

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

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

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

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

1. Сохраняйте простой дизайн

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

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

2. Ссылка на вашу информацию

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

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

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

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

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

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

5. Добавьте уведомление об авторских правах

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

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

6. Добавьте призыв к действию

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

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

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

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

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

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

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

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

9. Сохраните свой дизайн темы

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

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

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

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

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

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

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

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

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

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

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

13. Создайте чувство иерархии

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

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

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

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

15. Не подчеркивайте все эти ссылки

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

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

Заключение

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

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

Разработка верхнего, основного и нижнего колонтитула вашего веб-сайта

В этой статье мы рассмотрим три компонента, из которых состоит ваш веб-сайт: заголовок, тело и нижний колонтитул. Мы также рассмотрим, как вы можете настроить области верхнего, основного и нижнего колонтитулов своего веб-сайта с помощью редактора Website.com.

Верхний колонтитул, тело и нижний колонтитул вашей страницы

Веб-страницы могут отличаться друг от друга, но все они имеют одинаковые стандартные компоненты:

Заголовок

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

Тело

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

Нижний колонтитул

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

Планирование простого веб-сайта

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

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

Элементы, которые являются общими для большинства страниц, можно разместить в верхнем или нижнем колонтитуле страницы. Тело — это то место, куда должна идти вся уникальная информация.

Разработка верхнего колонтитула страницы

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

Шаблоны Website.com полностью настраиваются, а платформа Website.com использует «абсолютное позиционирование» — это означает, что вы можете свободно настраивать высоту заголовка, фон и добавлять элементы в заголовок.

Когда вы откроете свой шаблон в редакторе, вы увидите индикаторы краев сайта:

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

Если вы хотите добавить изображение к фону заголовка, вы можете использовать свое собственное изображение (и загрузить его в редактор через встроенный загрузчик изображений) или вы также можете выбрать изображение из библиотеки изображений Stock или из фона Библиотека изображений.

Вы также можете настроить параметры масштаба, повтора и положения.

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

Разработка тела страницы

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

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

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

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

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

Создание нижнего колонтитула страницы

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

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

3 элемента, которые должны включать все веб-сайты, плюс как

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

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

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

Почему нижний колонтитул WordPress является неотъемлемой частью вашего веб-сайта

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

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

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

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

Три совета по созданию нижнего колонтитула вашего веб-сайта

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

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

1. Укажите контактную информацию

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

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

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

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

Кроме того, вы можете также рассмотреть возможность встраивания контактной формы в нижний колонтитул WordPress:

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

2. Создайте раздел «Ключевые ссылки»

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

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

Для этого вам нужно:

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

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

3. Добавьте призыв к действию (CTA)

CTA вашего сайта — это элемент, который точно сообщает посетителям, какое действие вы хотите, чтобы они предприняли, и предоставляет простые средства для этого. Это может быть кнопка «Купить сейчас» , подписка на список рассылки или даже форма подписки на членство.

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

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

Вот несколько советов по созданию эффективного нижнего колонтитула CTA:

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

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

Заключение

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

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

1. Включите контактную информацию и, возможно, контактную форму.
2. Создайте раздел «ключевые ссылки» для дополнительной навигации.
3. Добавьте четкий призыв к действию.

У вас есть вопросы о том, как создать нижний колонтитул вашего сайта? Спросите нас о чем угодно в разделе комментариев ниже!

Бесплатный гид

5 основных советов по ускорению

Сократите время загрузки даже на 50-80%

Создаете нижний колонтитул веб-сайта? 11 лучших практик и 15+ недооцененных примеров

Нижний колонтитул веб-сайта часто упускается из виду, но не вами! 😉

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

К сожалению, это не всегда верно.

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

Погодите … Неужели нижние колонтитулы действительно важны?

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

Короткий ответ? Есть .

Было доказано, что нижние колонтитулы веб-сайтов увеличивают конверсию более чем на 23% и доход на посетителя на 16%, если они хорошо оптимизированы (что я сейчас объясню).

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

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

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

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

Вот 11 элементов, которые можно использовать для создания отличного нижнего колонтитула:

1. Информация о вашем бизнесе

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

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

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

В нижней части нижнего колонтитула их веб-сайта дается краткое описание двух местоположений их агентств.

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

2.Ссылки на целевые страницы

У вас есть целевые страницы, ориентированные на конверсии, которые вы пытаетесь ранжировать в Google?

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

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

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

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

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

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

3. Базовая навигация

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

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

Дизайн нижнего колонтитула веб-сайта на Aldi показывает, что это не должно быть сложно:

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

4. Юридическая информация и авторские права

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

Они варьируются в зависимости от страны, но обычно включают:

• Информация об авторских правах
• Заявления о конфиденциальности
• Отказ от ответственности
• Положения и условия

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

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

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

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

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

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

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

Веб-сайт Denver Public Art, например, имеет дизайн нижнего колонтитула веб-сайта, который содержит интерактивные кнопки для их ссылок на социальные сети внизу, а также канал их фирменного хэштега:

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

Призыв к действию (CTA) — это кнопка, которая сообщает посетителям вашего сайта, что им делать.

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

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

Это делает нижний колонтитул веб-сайта идеальным местом для CTA.

Вот как это выглядит на практике для веб-сайта Glossier:

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

7. Панель поиска

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

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

Лучшая часть? Сделать это на сайте WordPress очень просто.

Просто перейдите в раздел «Внешний вид> Виджеты» на панели инструментов и перетащите виджет «Поиск» в нижний колонтитул, и у вас будет что-то похожее на то, что сделал здесь Do You Even Blog:

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

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

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

• Адрес электронной почты
• Номер телефона
• Физический адрес
• Контактная форма
• Кнопка живого чата

Single Grain — отличный пример нижнего колонтитула веб-сайта, который показывает это в действии:

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

10. Популярные сообщения

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

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

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

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

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

11. Социальное доказательство

Знаете ли вы, что 92% людей доверяют рекомендации друзей и семьи по сравнению с любым другим видом рекламы? Он на милю превосходит Google Ads, Facebook Ads и SEO.

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

(Вероятно, вы на собственном опыте испытали эффект социального доказательства. Вы приходите в ресторан в 19:00, а столовая пуста. Там никого нет, поэтому вы сомневаетесь, хорошее ли это место.)

Социальное доказательство в Интернете может принимать различные формы, в том числе:

• Логотипы ваших известных клиентов или клиентов
• Отзывы счастливых клиентов
• Звездные рейтинги на сторонних сайтах

Взгляните на нижний колонтитул этого сайта мы разработан для Mile High Golf Trail:

Единственное, что кажется более впечатляющим, чем наш дизайн (AM I RITE?), — это логотипы их клиентов!

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

Заключительные мысли

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

Платные социальные сети — бич общества? Хороший.