Футер для сайта: Что такое футер сайта?

Содержание

Как разработать идеальный футер сайта? Руководство с примерами ᐉ Веб-студия Brainlab

Содержание:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В подвале юзер сможет проделать такие манипуляции:

  • Подписаться на рассылку новостей от компании.
  • Если есть форма обратной связи, заполнить ее
  • Пройти процедуру регистрации.
  • Быстро перейти на сообщество в социальных сетях (если они имеются).

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

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

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

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

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

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

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

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

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

Карта сайта

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

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

Актуально применять карту сайта в крупных проектах с многоуровневой структурой.

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

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

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

Актуально размещать контакты на коммерческих сайтах.

Ссылка «Наверх»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще один способ продвигать сайт из ниши электронной коммерции – e-mail-маркетинг. Да, почтовый ящик помогает вернуть пользователя к брошенной корзине, также помогает продвигать товары, информировать об акциях и новинках. Футер – отличное место, где можно расположить форму на рассылку. Говоря о сайтах, где актуально ее использовать: информационные порталы, где важная связь с ЦА, eCommerce ресурсах.

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

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

О компании

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Технический директор, студии BRAINLAB

Разработка футера: советы и примеры дизайна подвала сайта

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

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

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

Вы снова удивитесь, но видимость футеров считается очень высокой.

На основании данных 25 миллионов веб-просмотров эксперты Chartbeat составили диаграмму удаленности пользователя от заголовка веб-страницы. Оказалось, не бывает слишком длинных страниц и слишком удаленных колонтитулов!

Если интересно, как далеко продвигаются посетители на вашем сайте, воспользуйтесь платными программами для определения «глубины прокрутки» страниц. Например, Lucky Orange или ClickTale.


26 советов по разработке подвала сайта

Каким должен быть нижний колонтитул сайта? Найдите парочку интересных идей для своего проекта:

1. Знак авторского права

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

Это слабая защита против плагиата, но внушает определенное доверие.

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

2. Карта сайта

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

Ссылку на карту сайта можно найти внизу домашней страницы у Intel, Apple и других уважаемых компаний.

Рядовые посетители редко ее кликают, но, как и XML sitemap, ссылка может помочь поисковикам.

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

Это второй по популярности элемент футеров. Обычно «Политика конфиденциальности» ссылается на страницы, которая объясняет аспекты сбора информации сайтом, хранения и использования данных пользователя.

4. Пользовательское соглашение

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

5. Контактные данные компании

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

Второй популярный вариант — размещать ссылку «Контакты» в нижнем правом углу (или в центре) футера.

Это должна быть ссылка на страницу с подробными контактными данными, а не просто адрес электронной почты.

Есть множество причин публиковать контактную форму:

• Подача формы соответствующим образом отслеживается в аналитике

• Посетитель может не находиться на компьютере, где его электронная почта недоступна

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

• Формы могут задавать вопросы и направлять заявки конкретным сотрудникам

• Формы отправляют посетителям автоматические ответы, больше СТА и информации

• Формы могут сохранять сообщения в базу данных для дальнейшей обработки

•  Формы могут подключаться к системам автоматизации маркетинга

•  Ссылки на электронную почту — это спам-магниты

Поэтому настоятельно рекомендуем вам убрать ссылку на email из нижнего колонтитула!

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


6. Физический адрес и ссылка на карту

Информация о местонахождении — это то, что посетители ожидают увидеть в подвале сайта.

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

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

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

7. Номер телефона и факса

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

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

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

Время предложить дополнительные опции. В последние годы на Западе распространился юзабилити-тренд под названием «жирный футер» (fat footer). Это подразумевает существенное расширение опций в колонтитуле.

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

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

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

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

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

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

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

Исследования показывают, что 24% из них размещают кнопку подписки по email внизу домашней страницы.

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

Поэтому в футере данный элемент будет срабатывать гораздо лучше, чем в хедере сайта.

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

Одинокий скучный email address box не сулит вам высоких конверсий…

11. Форма авторизации

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

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


12. Кнопка для прессы

Еще один специализированный элемент для страниц крупных сайтов — это кнопка для прессы. На самом деле, менее 1% пользователей являются журналистами или редакторами, поэтому тратить ли место на данный элемент, решать вашему отделу маркетинга и PR. Если вы доросли до кнопки Press, у компании наверняка есть такой отдел.

13. Строка поиска по сайту

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

14. Фотографии

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

Это замечательная возможность сделать имидж компании более «человечным».

15. Галерея фотографий

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


16. Брендинг

Визуальные образы при оформлении футера — еще один шанс укрепить бренд.

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

17. Миссия и ценности компании

Логотипы — это хорошо, но почему не рассказать посетителям о миссии и ценностях вашего бизнеса? Если в шапке эта информация не всегда уместна, то нижний колонтитул отлично подойдет. Такой подход использует американский сайт BGA (Better Government Association), подробно излагая свою миссию в нижней правой части главной страницы.

18. Ключевые слова для SEO оптимизации

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

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

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


19. Награды, дипломы и сертификаты

Некоторые сферы бизнеса, такие как медицина и финансы, основываются целиком на доверии клиентов.

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

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

Совет маркетологов: комбинируйте все символы доверия в так называемый «блок доверия».

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

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


21. Отзывы счастливых клиентов

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

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

22. Ссылки на свежий контент

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

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

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

Но делайте это только в том случае, если компания ВСЕГДА проводит те или иные мероприятия.

24. Видео контент

Изображения превосходят по силе текст, а видео контент превосходит изображения.

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

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

25. Персональный Jingle Bells

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

Милая техника UX: переделать популярную мелодию для оживления страницы!

26. Финальный призыв к действию

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

Нет, СТА не следует оставлять для оформления подвала сайта! Начинать следует гораздо выше.

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


Свежие идеи для дизайна подвала сайта

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

Цветовая схема футера

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

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

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

Липкий футер

Подобно тому, как элементы навигации могут «прилипать» к верхней части веб-страницы (независимо от прокрутки), нижние колонтитулы могут всегда отображаться внизу экрана. Отличный вариант, если в подвале хранятся важные ссылки. Использование липкого футера оценили такие прогрессивные сайты, как Conversion Sciences (США).

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

На каждом веб-сайте есть нижний колонтитул, не так ли?

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

Резюме

Подытоживая все сказанное, какой должна быть разработка футера?

Ответ прост: ориентированной на пользователя.

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

• Не находят нужных ссылок на странице

• Ищут онлайн-консультанта или какую-то подсказку

• Не могут сориентироваться в разделах сайта и др.

Поместите в подвал то, что ищет пользователь, и позитивный опыт гарантирован.

Оформление нижней части сайта – футера (подвала)

Футер (footer — производная от foot (англ.) – нога) – это самый нижний раздел сайта, противоположный шапке – верхней части. Безусловно, голова сайта – шапка – самый важный элемент, но футер – это как земля под ногами: она должна быть прочной и функциональной. Хоть и не все пользователи пролистывают веб-страницы до конца, оставлять без внимания дынный раздел сайта не стоит.

Что принято размещать в футере?

Стандартными элементами футера являются:

  1. Кнопки социальных сетей и виджеты групп с социальных сетях
  2. Ссылки на основные разделы сайта
  3. Ссылки на сторонние ресурсы
  4. Копирайт
  5. Контактная информация
  6. Поиск

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

Оригинальный футер – место, где можно удивить посетителя

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

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

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

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

Дополнительное меню в футере

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

Например, это может выглядеть так:

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

Вернуться назад

Статьи по теме:

Выпуск №82. Создаем эффективный «футер» сайта — Setup.ru — бесплатный конструктор сайтов, создать сайт бесплатно

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

Что можно разместить?

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

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

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

  • юридическую информацию
  • виджеты социальных сетей
  • счетчики
  • копирайт

Навигация

  • карту сайта
  • ссылку «Наверх»
  • важные пункты основного меню
  • ссылки в виде баннеров на сопутствующие товары
  • баннеры
  • облако тегов

Как выделить информацию?

  • фоном
  • текстурой
  • разделителем
  • изображением, рисунком, иллюстрацией
  • шрифтом

Полезные советы

  • Давайте ссылки на наиболее важные страницы вашего сайта.
  • Если есть возможность, то сделайте выпадающее меню, — это позволит ускорить поиск необходимого раздела.
  • Наличие контактной формы или информации о контактах обеспечит удобство связи посетителя с вами без перехода на страницу контактов.
  • Наличие кнопок социальных сетей поможет узнать посетителю о вас от ваших клиентов, повысит лояльность к вашему бизнесу также упростит продвижение вашего сайта.
  • Установите ленту с последними твиттами, кнопки Мне нравится или Твитнуть.
  • Облако тегов, размещенное в «подвале», будет доступно на всех страницах вашего сайта и не «потеряется» среди других элементов.
  • Структурируйте карту сайта столбцами, каждому из которых дайте понятное название, чтобы посетителю было легче ориентироваться в информации.
  • Используйте пробелы между колонками, между верхней частью футера и его содержанием, между содержанием и нижней частью сайта, — это улучшит читаемость каждого из блоков, сделает четкими их границы.
  • Обычно для футеров используют более темные тона, нежели основной фон сайта, но это не является правилом.
  • Не старайтесь разместить в футере все, что только можно. Избыток информации может только навредить.
  • Не забывайте, что это – часть сайта, поэтому она должна гармонировать с общим дизайном, зависеть от его тематики и задач.

Вывод

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

15 ноября 2013

Как настроить подвал сайта, footer.

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

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

Начнём с самого быстрого и простого, как настроить подвал сайта, footer. Разберём его более детально. Как правило, он изменяется во Внешний вид – Виджеты. Заходим.

Sidebar – это наше правое или левое, в зависимости от настроек, меню.

Header – (заголовок) Может что перепутали в названии ?) Пробуем добавить туда обычный текст.

 

Ой!!! Не перепутали с названием, это точно. Зато мы теперь точно знаем, как нам дописать текст в шапку и прикрутить туда свой логотип. Что делать дальше? Наверно правильнее вернуться к ранней статье, где мы удалили к чертям подпись в Future самого разработчика ). Ну да, поспешили, зато удалили ссылку на буржуйский сайт. Но, нет ничего полезнее, чем пройти обратный путь, допустим вы не удаляли этой самой ссылки самостоятельно  и не читали мою статью про удаление вредоносных ссылок. Вы в замешательстве, у вас другой шаблон в отличии от моего. Что же тогда делать? Звать на помощь друзей из леса, Хромоножку, Нотепад++ и Годзиллу. Ещё проще найти ту злосчастную ссылку, что мы удалили в статье Удалить лишние ссылки с сайта WordPress, исправить её на необходимый нам текст и забыть как страшный сон. Для тех, кто хочет научиться это делать самостоятельно, продолжаем.

Открываем Chrome, наводим на  Footer, правой кнопкой меню «просмотреть код».

 

Долго искать не будем, выделяем div id=»footer-text и поиском ищем на нашем скаченном на ПК сайте.

 

Находим  footer.php.  Сравниваем показания Нотепад++ с тем, что показывает нам Хромоножка.

Похоже? Очень даже. Добавляем в разрез наш текст,  как обычный  html.

<p>Вставляем свой заветный текст</p>

<p>Можно даже в две строки</p>

 

Лицезреем наше детище.

Текст на месте, но промежуток между нашими строками огромен. Необходимо чуть подправить это расстояние. За него отвечает:

<div id=»footer-text» class=»site-info»>

Обращаемся к помощникам и ищем этот class=»site-info» . Однозначно, первым делом смотрим style.css  в нашем шаблоне. Открываем, находим сам стиль.

.site-footer .site-info {
float: left;
padding: 2.5em 0;

float: понятно- прижать текст влево.

padding: (набивка, прокладка) странное название. Предлагаю поставить 0 и проверить, что изменится.

Это просто толщина отступов. Какая печаль.

Предлагаю вернуть всё на месте, то есть 0 вернуть на 2.5. А в самом файле footer.php заменить class. Что нам это даст?

Во-первых, мы не меняем class, который может использоваться ещё в каком-то другом месте.
Во-вторых, у нас отступ такой огромный по всему сайту, то есть при наборе текста, нажимая Enter, один большой отступ по всему тексту. Скорее всего, ноги растут именно оттуда. Чтобы не менять основной стиль сайта, который, скорее всего, наложен на весь контент, создадим новый стиль и в нём сделаем маленький отступ, и прикрутим его в месть class=»site-info» . Что отвечает за это расстояние? Предположу, что это высота – height (высота), ищем его в теле файлов, открываем первый попавшийся файл и видим — line-height: 50%; почти похоже (высота линии) 😉

Добавляем свой стиль в файл стилей style.css . Назовём его .footer-indent , добавим только line-height: 5%;

.footer-indent {
line-height: 5%;
}

Зафутболиваем style.css на хостинг. И меняем в footer.php класс class=»site-info» на class=» footer-indent «

Заливаем footer.php на хостинг. Проверяем наше творение.

 

Отличная работа мистер ФИКС!

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

Удачи в ваших трудах. Теперь вы точно знаете как настроить подвал сайта.

Да прибудет с вами сила воли!

10 дизайнов нижних колонтитулов веб-сайтов, которые вы захотите скопировать

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

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

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

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

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

Почему вы должны уделять время своему нижнему колонтитулу

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

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

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

Для большинства веб-сайтов желаемый эффект нижнего колонтитула:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следите за движениями глаз ваших пользователей

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поисковая оптимизация

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

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

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

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

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

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

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

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

Также удобно контактный номер телефона, а еще лучше с кнопкой CTA, чтобы сразу набрать номер!

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

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

Наконец, мы хотели бы сказать, что кнопки необходимы на тот случай, если кто-то из СМИ захочет связаться с вашей компанией.

Однако, по данным Orbit Media Studios, менее 1% трафика веб-сайта приходится на прессу, которая хочет с ней связаться, поэтому не стоит тратить основное пространство сайта на кнопку для этого.Угадайте, где отличное место — дизайн нижнего колонтитула вашего сайта!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание отличного дизайна нижнего колонтитула веб-сайта включает анализ следующих аспектов вашего веб-сайта:

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

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

дизайнов нижнего колонтитула | 17 Hall of Fame Examples & Tactics [2022]

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

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

Удивительные примеры нижних колонтитулов веб-сайтов

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

Минималистичный черно-белый нижний колонтитул

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

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

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

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

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

Минимальный белый нижний колонтитул

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

Дизайн нижнего колонтитула для финансовых услуг

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

Нижний колонтитул для креативного агентства

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

Розово-белый дизайн нижнего колонтитула

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

Очень простой черно-белый дизайн нижнего колонтитула

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

Nerdery — удивительно простой нижний колонтитул агентства веб-разработки

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

Замечательное агентство Миннеаполиса нижний колонтитул – Нина Хейл.

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

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

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

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

Известный бренд Chobani демонстрирует силу простоты в дизайне нижнего колонтитула.

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

Минималистский дизайн нижнего колонтитула «Оставайтесь на связи».

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

Spinx – Лос-анджелесские агентства цифрового маркетинга, функциональный нижний колонтитул

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

Наш старый дизайн нижнего колонтитула — не делайте вид, что вы не впечатлены 😉

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

Последний нижний колонтитул, который мы разработали для поддержки Cornerstone.

Небольшая заметка об идеальном дизайне нижнего колонтитула:

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

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

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

Курс «Социальные сети для подрядчиков» + ежедневные подсказки

Мы потратили 3 месяца на его подготовку только для подрядчиков — и это совершенно бесплатно!

🔥 5 дней подготовки с ключевыми вещами перед тем, как вы начнете постить.

🎥 10 оригинальных видео

📝 6 недель ежедневных подсказок в социальных сетях

Есть ли вы или кто-то из вашей команды, кто хотел бы взять это? Введите их информацию (или вашу) ниже!

Лучшие практики, советы и множество примеров

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

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

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

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

 

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

Нижний колонтитул веб-сайта Anderson Bros Design and Supply

 

1. Обратите особое внимание на свои ссылки

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

 

2. Оптимизируйте нижний колонтитул для мобильных устройств

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

 

3. Используйте короткие и точные заголовки

Заголовок каждой ссылки должен сразу показывать, о чем идет речь на соответствующей странице, еще до того, как пользователь ее щелкнет. Для этого используйте очень короткие описательные и недвусмысленные фразы, такие как «Условия использования», «Контакты», «Часто задаваемые вопросы», «О нас», «Карта сайта», «Конфиденциальность», «Справочный центр», «Миссия», «Ценности», «Вклад», «Присоединяйтесь к делу» и т. д.

 

4. Приведите его в соответствие со страницей

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

 

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

 

5. Выделите ключевые ссылки

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

 

6. Не недооценивайте возможности SEO

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

 

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

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

 

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

 

8. Добавьте свою юридическую информацию

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

 

9. Не уклоняйтесь от включения элементов социального доказательства и доверия

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

 

30 реальных примеров эффективных футеров сайта

 

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

 

1. Дикие души с дикими заявлениями

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

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

 

2. Сверхтекучий брутализм

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

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

 

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

Очистить нижний колонтитул веб-сайта Plus

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

 

4. Интерактивные формы и минимализм

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

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

 

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

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

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

 

6. Высокая контрастность в черно-белом режиме

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

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

 

7. Структура с цветами

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

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

 

8. Бруталистские ящики и легкий доступ

Нижний колонтитул сайта Castor & Pollux Group

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

 

9. Веселый призыв к действию и много пробелов

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

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

 

10. Коротко и по делу

Инфракрасный нижний колонтитул веб-сайта

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

 

11. Один выделенный элемент

Ева Хаберманн Нижний колонтитул сайта

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

 

12. Мало информации в углу

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

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

 

13. Стиль титров постера фильма

Descubre Cevitxef Bilbao Нижний колонтитул сайта

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

 

14. Борьба с плохими парнями с помощью хорошего дизайна нижнего колонтитула сайта

Нижний колонтитул официального сайта Bad Boys

После крутого ретро-образа главного героя официальный сайт Bad Boys Movie заканчивается двумя основными разделами. Тот, что слева, имеет CTA, который посетитель легко увидит благодаря привлекающему внимание гигантскому анимированному логотипу.Справа он удовлетворительно разместил 9 страниц в 3 столбца одинаковой ширины и доказательство подлинности ниже.

 

15. Не полностью на дне

Мотоциклетные шлемы Simpson Нижний колонтитул европейского веб-сайта

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

 

16. Стильный, чистый и идеально структурированный

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

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

 

17. Именование категорий

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

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

 

18. Привлекательный корпоративный дизайн и основы

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

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

 

19. Часть последнего раздела с умным типографским дизайном

Нижний колонтитул сайта Roca

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

 

20. Маленький текст, занимающий весь экран

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

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

 

21.Нижний колонтитул — это раздел контактов

Дарья Волкова Нижний колонтитул сайта

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

 

22. Выделение нижнего колонтитула со скрытым взаимодействием

Нижний колонтитул домашнего сайта Nama

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

 

23. Передай привет!

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

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

 

24. Прямо к делу

Сплайн Нижний колонтитул сайта

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

 

25. Эксцентричная роскошь для согласованности дизайна

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

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

 

26. Выравнивание по левому краю и много места

Нижний колонтитул веб-сайта Патрика Махоумса

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

 

27. Кредиты

Эволюция нижнего колонтитула веб-сайта стоковой фотографии

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

 

28. Текстовая иерархия до предела

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

Веб-сайт

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

 

29. Чем меньше, тем лучше, но анимация при наведении лучше

Удалить нижний колонтитул веб-сайта Maison

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

 

30. Отличная игра по написанию контента до самого конца

Нижний колонтитул сайта Что-то хорошее

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

 

Почетные упоминания

 

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

 

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

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

 

Лорелей Сорренто Нижний колонтитул сайта

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

 

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

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

 

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

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

 

Сжатие нижнего колонтитула веб-сайта Io изображения

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

В заключение

Это были 30 (+5 бонусных) примеров нижнего колонтитула веб-сайта для вдохновения. После того, как вы насладились этими эффективными дизайнами, вот несколько советов и идей, которые мы можем извлечь из них.

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

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

А пока почему бы не взглянуть на еще несколько вдохновляющих и познавательных статей на тему UI/UX-дизайна:

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

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

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

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

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

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

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

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

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

Например, A/B-тест веб-сайта, посвященного роскошным сумкам, проведенный Smart Insights, показал увеличение конверсии продаж на 27 процентов и увеличение дохода на одного посетителя на 16 процентов благодаря простому изменению дизайна нижнего колонтитула веб-сайта. Кроме того, исследование, проведенное ChartBeat, показало, что 66 % взаимодействия пользователей на самом деле происходило «ниже страницы».

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

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

В этой статье мы рассмотрим:

  • Как решить, следует ли оптимизировать нижний колонтитул
  • Восемь характеристик хорошего нижнего колонтитула веб-сайта (с примерами)

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

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

Вопрос: как вы должны различать эти две области?

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

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

Коллектор

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

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

Так сколько же это слишком?

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

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

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

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

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

.

Нравится эта статья?

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

  1. logo
  2. Навигация
  3. Контактная информация
  4. Контактная информация
  5. Contacit
  6. Авторское право, Условия использования, Политика конфиденциальности
  7. Информация о конфиденциальности
  8. Информация о компании (I.E. Карьера)
  9. Иконки социальных медиа
  10. Call-Action

Необязательная функция: Безопасность и логотипы сертификации

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

1. Логотип и изображение бренда

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

2. Четкая и эффективная навигация по сайту

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

3. Хорошо видимая контактная информация

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

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

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

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

5. Часто игнорируемое уведомление об авторских правах, политика конфиденциальности и условия обслуживания

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

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

6. Выделите важную информацию о компании

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

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

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

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

8. Призыв к действию, повышающий ценность

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

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

9. Логотипы безопасности и сертификации, устанавливающие доверие (необязательно)

Еще один способ завоевать доверие клиентов — добавить любые сертификаты или логотипы безопасности, которые могут иметь отношение к вашему бизнесу.Пример этого можно найти на веб-сайте Sparx IT Solutions, где четко видны символы соответствия DMCA (Закон об авторском праве в цифровую эпоху) и GDPR (Общее положение о защите данных). Это особенно актуально для компаний, хранящих конфиденциальную информацию о клиентах, где требуется дополнительная безопасность.

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

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

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

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

Хотите бесплатно удалить целевую страницу?

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

Об авторе

Риш Жан-Барт

Риш Жан-Барт — специалист по UX и CRO в The Good. Она не только имеет степень магистра в области прикладных психологических исследований, но и отлично разбирается в анализе тепловых карт, что дает ключевую информацию для большей части процессов тестирования и оптимизации The Good.

лучших советов по дизайну нижнего колонтитула для вашего сайта

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

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

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

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

1. Минимализм

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

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

2. Наглядно

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

Например, вместо того, чтобы писать «Подпишитесь на нас в Facebook», вы можете выдать значок FB, который ведет на вашу страницу в Facebook. Это выглядит привлекательно, а также решает задачу, а это именно то, что нам нужно для отличного футера. How to Geek использует множество графических элементов в нижнем колонтитуле, которые хорошо видны, очень привлекательны и понятны.

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

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

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

4. Авторское право, Политика конфиденциальности и Условия использования

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

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

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

Подумайте, какой призыв к действию (CTA) является критически важным этапом в процессе конверсии продаж. Какие действия вы могли бы попросить своих пользователей предпринять, что могло бы оказать непосредственное влияние на ваш доход? Один из наиболее распространенных шагов, который может помочь увеличить продажи, — это побудить людей подписаться на вашу рассылку по электронной почте. «Приглашаем к сотрудничеству.», «Напишите нам!» «Оставьте свой контактный номер, и мы свяжемся с вами». Броский, но простой призыв к действию в нижнем колонтитуле, а также информационный бюллетень или контактная форма могут помочь вам повысить коэффициент конверсии.Убедитесь, что он яркий и всеобъемлющий. Помните, что посетители не хотят утруждать себя обучением тому или иному действию. Чтобы побудить людей отправлять свой идентификатор электронной почты, вы можете включить в информационный бюллетень поле для отправки новостной рассылки.

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

6.Контактные данные, номер телефона и адрес.

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

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

7.Не добавляйте слишком много объектов.

Хотя использование графики в нижнем колонтитуле — отличная идея, всегда есть тонкая грань между приемлемым и раздражающим. Используйте графику очень ответственно и осознанно. При разработке нижнего колонтитула всегда помните: «Меньше значит больше»!

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

8.Поддерживайте иерархию.

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

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

ЗАКЛЮЧЕНИЕ

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

Люди также читают:

Функции для включения в нижний колонтитул веб-сайта

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

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

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

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

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

Информация для добавления в нижний колонтитул веб-сайта

  1. Контактная информация. Это самая важная часть информации в нижнем колонтитуле вашего сайта.Большинство пользователей, которые прокручивают веб-сайт вниз, ищут номер телефона, адрес электронной почты или физический адрес, чтобы связаться с вашей компанией или посетить ее. Убедитесь, что эта информация отображается четко, с использованием легко читаемого шрифта и цветов, которые не конфликтуют друг с другом. С помощью простого кода и учетной записи Google Analytics вы также можете отслеживать, сколько людей нажимают на номер телефона или адрес электронной почты в нижнем колонтитуле сайта.
  2. Иконки социальных сетей. Если ваш бизнес представлен в социальных сетях и вы хотите, чтобы другие знали об этом, то добавление значков социальных сетей в нижний колонтитул — отличный способ повысить узнаваемость вашего бренда в Интернете.Создайте бизнес-страницу Facebook, страницу Twitter или страницу Instagram (если применимо) и свяжите значки, чтобы пользователи могли следить за вашим бизнесом в Интернете. Совет для профессионалов: убедитесь, что когда пользователи нажимают на значки, открывается новое окно, чтобы не отвлекать трафик с вашего сайта. В зависимости от того, какой тип системы управления контентом вы используете, вы также можете добавить ленту публикаций в социальных сетях в режиме реального времени.
  3. Отзывы. Согласно отчету, проведенному The ROBO Economy, 45% потребителей читают отзывы о товарах и услугах перед совершением покупки.Таким образом, помимо обеспечения того, чтобы ваш бизнес был на сторонних сайтах отзывов, таких как Yelp или YellowPages, не забудьте включить положительный отзыв в нижний колонтитул вашего сайта. Идея состоит в том, чтобы завоевать доверие пользователей, которые проводят исследования, включив реальный отзыв, оставленный прошлым клиентом для вашего бизнеса. Не стесняйтесь связать обзор в нижнем колонтитуле вашего веб-сайта с внутренней страницей отзывов или отзывов.
  4. Интерактивная карта. Карта — это всегда полезная информация, которая должна быть доступна вашим мобильным пользователям.Чтобы добавить карту маршрутов на свой веб-сайт, введите свой служебный адрес в Google, щелкните значок «Маршруты», и Google откроет Карты Google. Оказавшись на этом экране, щелкните значок сэндвича и выберите параметр «Поделиться или встроить карту». Выберите «Вставить карту», ​​когда появится всплывающее окно. Скопируйте код iframe и вставьте его в область простого текста/HTML вашего текстового редактора. В интерфейсе вашего веб-сайта пользователи смогут добавить свое текущее местоположение или домашний адрес в качестве отправной точки, что в конечном итоге сэкономит им время, необходимое для самостоятельного ввода вашего рабочего адреса.
  5. Запрос на вход. Вы создаете сайт электронной коммерции или веб-сайт, на котором пользователям необходимо создать учетную запись для использования ваших продуктов или услуг? Если это так, добавление приглашения для входа в нижний колонтитул — отличный способ позволить вашим постоянным посетителям быстро войти в систему для доступа к сохраненным продуктам, услугам или информации. Мы также рекомендуем добавить аналогичную ссылку для входа или приглашение в шапку вашего сайта. Наличие одинаковой функции входа в систему как вверху, так и внизу вашего веб-сайта гарантирует, что ни один пользователь не пропустит этот важный онлайн-опыт.Пользователи могут быстро разочароваться и покинуть сайт, если не могут найти то, что ищут, поэтому иногда необходимо повторять одну и ту же информацию.
  6. Подписка на рассылку новостей. Электронная почта и подписка на рассылку новостей — обычное дело в нижних колонтитулах веб-сайтов — и на то есть веские причины. Любой, кто хочет создать свой список адресов электронной почты для успешной маркетинговой кампании по электронной почте, должен добавить поля для подписки на рассылку новостей в нижней части своего веб-сайта. Идея этого варианта нижнего колонтитула заключается в том, что если содержание вашего веб-сайта хорошее (например, блоги, целевые страницы, домашняя страница и т.), ваши пользователи с большей вероятностью захотят узнать больше о вашей компании. Не забудьте использовать броский призыв к действию, например «Дай мне больше новостей!» или «Будь первым, кто получит обновления», чтобы опыт был более персонализированным.
  7. Панель поиска по сайту. Если на вашем веб-сайте более 100 страниц (мы смотрим на вас, владельцев электронной коммерции или онлайн-изданий новостей), то панель поиска по сайту является обязательной функцией нижнего колонтитула. На многих сайтах, созданных с использованием надежных систем управления контентом, есть приложения или плагины, которые вы можете загрузить и настроить для вас все функции панели поиска.Панель поиска по сайту не только уменьшит разочарование пользователей, но и уменьшит вероятность того, что ваши пользователи покинут ваш сайт. Позвольте клиентам быстро найти то, что они ищут, чтобы они могли быстро совершить покупку (беспроигрышная ситуация для всех).
  8. Логотип компании. Многие из приведенных выше идей неприменимы к дизайну вашего веб-сайта или бизнесу? Не волнуйтесь! Одна функция, которую вы можете добавить в нижний колонтитул вашего сайта, — это логотип вашей компании. Если вы разработали логотип компании, который разборчив и отлично смотрится на фоне выбранных вами цветов фона вашего сайта, добавление логотипа компании не должно быть проблемой.Если вы создаете логотип с помощью онлайн-конструктора логотипов, у вас должно быть под рукой множество различных файлов изображений. Наши специалисты по дизайну логотипов рекомендуют добавить PNG-версию логотипа вашей компании на ваш веб-сайт, поскольку PNG имеет прозрачный фон, который лучше всего работает на веб-сайтах.
  9. Авторское право, политика конфиденциальности и условия использования. В наше время очень важно защищать свою интеллектуальную собственность. Если ваши уникальные продукты, услуги, советы и информация о компании отображаются на вашем сайте для всеобщего обозрения, важно защитить каждый его аспект.Обязательно проконсультируйтесь с юристом вашей компании, чтобы составить раздел политики конфиденциальности и условий использования. Знак копирайта с текущим годом можно легко добавить в нижний колонтитул вашего сайта.
  10. Награды и сертификаты. Независимо от того, являетесь ли вы подрядчиком, небольшим местным предприятием, национальным розничным продавцом или корпорацией, вы всегда можете получить отраслевую награду. Вы усердно работали, чтобы предоставить своим клиентам лучший опыт и лучшие продукты на рынке, поэтому, если у вас есть награды, демонстрирующие эту тяжелую работу и самоотверженность, покажите их в нижнем колонтитуле вашего веб-сайта.Награды и сертификаты, такие как Angie’s List Super Service Award, BBB Accredited, Google Trusted Stores или сертификат OSHA, не только укрепляют доверие пользователей к вашей компании, но и выделяют вас среди конкурентов в отрасли.
  11. Миссия. Что отличает ваш бизнес? Что ты собирался делать? Ваша цель — производить более экологически чистые продукты? Возможно, ваша цель — повысить осведомленность о каком-то деле? Какими бы ни были ваши причины для открытия своего бизнеса, убедитесь, что пользователи знают об этом.Лучшее место для формулировки миссии — нижний колонтитул. Просто имейте в виду, что ваше заявление о миссии должно быть кратким (короткий абзац), чтобы нижний колонтитул не растягивался вниз по странице. Если ваше заявление о миссии состоит более чем из пары предложений, мы рекомендуем разместить полную версию на странице «О нас», а сокращенную версию — в нижней части вашего сайта.
  12. Последние записи в блоге. Вы потратили много времени и сил на написание отраслевых сообщений в блогах для вашего бизнеса, так почему бы не убедиться, что они будут видны на вашем веб-сайте? Многие пользователи могут не нажимать на ссылку «Блог» в главном меню навигации сайта в шапке, поэтому было бы неплохо отобразить последние 3-5 постов блога в нижнем колонтитуле, чтобы привлечь внимание пользователя.Ведение блогов с броскими, кликабельными заголовками — еще один отличный способ привлечь пользователей на ваш сайт и узнать больше о вашем продукте или отрасли. Совет для профессионалов: добавьте раздел подписки на рассылку чуть ниже или рядом с разделом недавних сообщений в нижнем колонтитуле, чтобы пользователи могли быстро подписаться на новые статьи.
  13. Призыв к действию. На вашей главной странице или в шапке может быть много призывов к действию, но есть ли у вас что-нибудь, что будет привлекать потенциальных клиентов в нижней части страницы? Наличие яркого и заметного призыва к действию в нижнем колонтитуле обязательно даст вам те дополнительные ежемесячные показатели конверсии, которые вы ищете.Для благотворительных или некоммерческих организаций попробуйте добавить кнопку «Пожертвовать сейчас», которая направляет пользователей на вашу страницу пожертвований. Если вы подрядчик, добавьте кнопку «Запросить услугу», которая ведет на страницу «Свяжитесь с нами». Проявите творческий подход со своими призывами к действию и выбором цвета кнопок, чтобы увидеть, какие из них приносят наибольшую прибыль. Совет для профессионалов: откажитесь от кнопки и просто добавьте короткую контактную форму, которая включает имя, адрес электронной почты и сообщение в качестве полей ввода для пользователя.
  14. Меню навигации. Для больших веб-сайтов может быть довольно просто иметь сложное верхнее меню навигации.Многие сайты электронной коммерции будут иметь главные меню, подменю и подменю в подменю и так далее. Добавление навигационного меню нижнего колонтитула, которое включает только самые важные целевые страницы на вашем сайте, может помочь пользователям лучше ориентироваться в контенте или продуктах, которые они хотят видеть. Это меню нижнего колонтитула особенно полезно, если у вас нет панели поиска по сайту. Ваше меню нижнего колонтитула также может включать страницы, которые по-прежнему важны, но менее важны для вашего продукта или услуги, например, часто задаваемые вопросы, блог, политика конфиденциальности, о нас, пресса или ссылки для выбора языка.
  15. HTML-карта сайта. У вас еще есть место для нижнего колонтитула? Добавление простой карты сайта в формате HTML — отличный способ улучшить взаимодействие с пользователем. Если посетители вашего веб-сайта не могут найти то, что они ищут, с помощью панели поиска или меню навигации нижнего колонтитула, они обязательно найдут это в вашей карте сайта в формате HTML. В отличие от карты сайта XML (которая создается для поисковых систем, чтобы определить, какие страницы веб-сайта сканировать), карта сайта HTML предназначена исключительно для того, чтобы пользователи могли видеть все опубликованные и общедоступные страницы вашего сайта.Создание карты сайта в формате HTML не требует особых усилий, если вы найдете отличный онлайн-инструмент, такой как XML-Sitemaps.com.

 

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

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

10 некоммерческих организаций с отличными нижними колонтитулами веб-сайтов

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

Основы дизайна нижнего колонтитула

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

Примеры отличных футеров сайта

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

Фундамент для корпуса

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

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

Девочки, которые кодируют

В то время как в большинстве случаев нижние колонтитулы отличных веб-сайтов имеют относительно минималистичный дизайн, Girls Who Code доказывает, что украшение нижнего колонтитула изображениями и забавными цветами может обеспечить чистый и ясный футер. Во-первых, для посетителей, дошедших до нижней части страницы, предоставляется меню ссылок с некоторыми приоритетными страницами. Призывы к действию в сочетании со значками социальных сетей следуют за ссылками на страницы, чтобы побудить посетителей к еще большему взаимодействию.Наконец, в самом низу нижнего колонтитула они добавили информацию об авторских правах, ссылку на свою политику конфиденциальности и легкодоступное заявление о том, что у них есть статус 501 (c) 3, что может повысить доверие.

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

Борьба с колоректальным раком

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

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

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

HeForShe

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

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

Форум Кеннеди

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

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

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

Фонд Малалы

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

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

Совет по защите природных ресурсов

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

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

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

Одна капля

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

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

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

(КРАСНЫЙ)

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

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

Вайман Центр

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

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

Leave a Reply