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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И так…

Навигация

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

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

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

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

Карта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

А у меня все.

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

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

бизнес сайт

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

В этой статье мы подробно расскажем что это такое — футер сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

О компании

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

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

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

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

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

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

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

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

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

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

Карта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример № 2

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

Пример № 3

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

Пример № 4

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

Пример № 5

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

Пример № 6

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

Пример № 7

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

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

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

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

Следующий проект:ТОП 5 примеров лучших медицинских сайтовПредыдущий проект:SEO аудит сайта при создании или делаем техническое задание на разработку сайта правильно

11 идей оформления футера для сайта eCommerce

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

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

Время просмотра (сек.) / Расстояние от верха страницы (пиксели)

Большой разрыв по продолжительности просмотра первого и второго экранов. Самый ТОП – 4 сек, длительность достигает максимума (16 сек.) на 1200 пикселях от верха и при дальнейшей прокрутке, медленно снижается.

Доля посетителей (%) / Расстояние от верха страницы (пиксели)

---

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

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

Идеи как оформить «подвал» (футер), примеры продающих дизайнов

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

1. Необходимая информация

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

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

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

---

Пример footer’a: Ив Роше

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

---

Пример footer’a: Lumity

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

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

---

Пример footer’a: Saddleback Leather Co

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

---

2. Негативное пространство – достаточность визуальной дистанции

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

---

Пример footer’a: QUAY AUSTRALIA

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

---

Пример footer’a: Incase

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

---

Пример footer’a: Stumptown Coffee Roasters

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

---

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

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

---

Пример footer’a: Greetabl

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

---

Пример footer’a: Ecwid

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

---

4. Плавающая корзина – повышение доступности продающего функционала

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

---

Пример footer’a: Lemonadela

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

---

5. Навигация в футере

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

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

---

Пример footer’a: Мini + Мe

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

---

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

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

---

6. Иконки соцсетей

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

---

Пример footer’a: Vissla

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

---

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

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

---

7. SEO-ссылки только из футера главной страницы

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

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

Пример фиксированного футера: Mandco.com 

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

8. Создайте визуальную иерархию

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

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

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

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

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

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

Пример футера: Julia Janus

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

9. Красивые эффекты, графика и занимательная анимация

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

 

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

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

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

10. Идеальный футер – просторный и функциональный 

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

Пример footer’a: Hypergrand

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

P.S.

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

почему он важен + 10 крутых идей оформления (совет)

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

Содержание статьи:

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

Футер сайта: почему он так важен для каждого веб-ресурса

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

1. Акцентирует внимание

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

2. Предоставляет полезную информацию

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

3. Захватывает внимание

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

4. Приводит лидов

Как это сделать? Очень просто! Разместите в подвале:

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

5. Помогает в навигации

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

Футер подвал сайта и как его оформлять: 10 крутых вариантов

Читайте также: Как сделать шапку сайта: простой способ

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

Совет! Только прошу – не смешивайте все 10 идей в одном подвале! 

1. Без футера вообще

«Как же так? Ты же сам писал – что футер очень важно!», — возмущенно воскликнете вы. И будете правы.

Но не совсем.

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

Удалите футер с главной страницы, но оставьте его на всех остальных. Это будет круто и оригинально.

2. Минималистическое оформление

Рассмотрите вариант всего с 2-3 основными элементами на футере. Например, это могут быть:

• логотип компании/сайта;
• иконка социальной сети, в которой размещено официальное представительство;
• иконка копирайта.

3. Футер сайта: уникальность

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

• фото команды проекта;
• анимация;
• видео.

4. Карта сайта

 

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

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

5. Обычная карта

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

6. Контактная форма

… или рассылка новостей.

И первый, и второй вариант – хорошее решение.

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

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

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

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

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

8. Футер сайта: навигация

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

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

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

Легкое, обычное, простое обращение к пользователям поможет вам. Например, может быть:

• Приглашаем к сотрудничеству!
• Оставьте свой номер телефона и мы перезвоним вам в течение 30 минут!
• Напишите нам!

Если рядом будет еще и контактная форма или форма подписки на новости – идеальный вариант.

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

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

Как сделать футер сайта: 3 совета

Читайте также: Как оформить главную страницу сайта: 11 обязательных составляющих

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

1. Футер сайта: главные элементы

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

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

Еще один хороший вариант – для каждой страницы сделать свой подвал. Расположите там нужные элементы.

2. Футер сайта: сделайте проект

Формируя проект футера, предусмотрите следующие моменты:

• размер;
• количество столбиков;
• число разделов.

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

Обратите внимание! Еще один вариант – привязать подвал. То есть, сделать его положение фиксированным. Чтобы он оставался на месте и в зоне видимости при скроллинге страницы.

3. Футер сайта: наличие уникальных элементов

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

• иконки социальных сетей;
• различные виджеты;
• кнопку подписки на социальные сети;
• карты – например, тот же Google Maps.

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

Футер сайта: личный совет

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

• особенности целевой аудитории;
• особенности вашей деятельности;
• дизайн сайта.

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

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

Футер сайта (footer): что это такое, как правильно называется низ (подвал) ресурса и примеры оформления

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

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

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

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

Итак, основные функции:

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

Как сделать подвал сайта

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

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

Что должно быть в подвале сайта

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

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

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

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

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

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

Контакты

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

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

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

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

Лид формы

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

Карта

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

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

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

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

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

Иные сведения

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

Карта ресурса

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

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

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

Облако тегов

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

Кнопка быстрого перехода наверх

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

Счетчики

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

Варианты использования футера

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

Дочитка

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

Быстрый скролл

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

Оформление

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

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

Варианты отображения

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

Бесконечный скролл

 

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

Контекстный

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

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

Наиболее распространенные проблемы

Чаще всего сложности кроются в следующем:

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

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

Что разместить в подвале сайта? — MyEmarketing

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

А зря.

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

1) Простой информационный подвал

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

• Копирайты
• Повторная основная навигация
• Логотип
• Кнопки социальных сетей

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

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

2) Подвал с акцентом на поиске

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

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

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

3) Представление рубрик каталога

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

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

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

4) Призыв к действию плавно переходит в «легкий» футер

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

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

5) Модель «следуй за мной»

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

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

• Подписка на рассылку
• Анонс twitter-аккаунта
• Facebook страница

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

6) Направляем посетителя в начало страницы

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

7) Помогаем увидеть призыв к действию

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

Подводим итог

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

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

На этом все! Увидимся в среду.

Верхние и нижние колонтитулы: Написание бизнес-документов

Примеры верхних и нижних колонтитулов

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

Заголовки включают:

• Название документа
• Подзаголовок или раздел или раздел
• Логотип компании

Нижние колонтитулы включают:

• Имя автора (очень важно)
• Дата публикации
• Имя файла (необязательно)
• Номер версии (необязательно)
• Номер страницы

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

Необходимость для верхних и нижних колонтитулов

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

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

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

Добавление в документ верхних и нижних колонтитулов — дело профессионализма.

Документы Excel

Ниже приведены примеры верхних и нижних колонтитулов в документе Microsoft Excel. Пользователи Microsoft Excel должны знать, что верхние и нижние колонтитулы в Excel так же важны, как и в документах Word.

Размер и положение верхних и нижних колонтитулов

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

В Microsoft Excel по умолчанию верхний и нижний колонтитулы находятся на расстоянии 1,25 см от края страницы. Это удовлетворительно для верхнего колонтитула, но для нижних колонтитулов рекомендуется меньшее расстояние 0,9 см от нижней части страницы. Вы можете настроить эти параметры в разделе «Параметры страницы», который находится на ленте «Макет страницы».

Лучшие практики и примеры дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта сайта

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

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

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

Логотип

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

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

Например,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Art4web

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

5. gOOOders

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

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

6. Аджиб

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У

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

Заключение

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

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

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

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

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

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

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

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

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

.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На сайте

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

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

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

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

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

У

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

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

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

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

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

Хороший тому пример — Mashable.com:

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

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

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

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

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

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

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

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

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

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

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

Smart Insights зафиксировал увеличение дохода на одного клиента на 16%, когда они протестировали нижний колонтитул с более удобной навигацией.

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

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

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

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

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

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

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

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

Карта сайта

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

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

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

• Что собрано
• Как хранится
• Как это можно использовать

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

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

Стандарты

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

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

• Ссылки электронной почты — это магниты для спама
• Подача формы легко отслеживается как достижение цели в Google Analytics
• Forms можно интегрировать со сторонним программным обеспечением, таким как CRM
• Формы позволяют отправлять определенные вопросы определенным людям

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

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

• • Адрес или схема проезда к предприятию

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

Ссылки для навигации по сайту

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

Социальные иконки или виджеты

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

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

Форма входа

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

Информационный бюллетень или подписка по электронной почте

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

Пресс

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

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

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

О нас

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

Мультимедиа: мини-галерея, видео или аудио

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

Ключевые слова SEO

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

Награды, сертификаты и членство в ассоциациях

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

Популярные или недавние статьи

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

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

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

Повесть без нижнего колонтитула

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

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

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

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

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

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

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

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

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

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

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

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

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

Какие элементы дизайна нижнего колонтитула веб-сайта наиболее важны для вашей компании? Напишите твит на @ icons_8, и мы поделимся лучшими идеями!

---

Об авторе
Мэдди Осман любит WordPress и писать. Когда она не занята организацией WordCamp Denver, она делится своими лучшими советами по контент-маркетингу и поисковой оптимизации в своем блоге Blogsmith.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поможет. Я обещаю. 😃

12 примеров плюс советы по созданию собственного

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

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

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

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

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

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

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

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

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

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

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

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

Включите самое необходимое

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

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

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

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

Обеспечьте четкую навигацию

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

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

Выразите свою индивидуальность

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

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

Сделайте его эстетичным

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

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

12 выдающихся примеров нижних колонтитулов веб-сайтов

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

01. Номер дома 3

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

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

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

02. Lola Pate

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

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

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

03. Willowbrook Farm

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

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

04. Letsone

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

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

05. Jérome Studio

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

Jérome Studio создала организованный макет с четкой иерархией. Нижний колонтитул дополняет остальной дизайн, идеально сливаясь с остальной четкой эстетикой и создавая элегантный вид.

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

06. Бесполезные сокровища

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

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

07. Seven Grams Caffe

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

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

08. Avec Clyde

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

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

Микрокопия с надписью «Давай дружить» особенно привлекательна, помогая подчеркнуть их легкий подход.

09. Harasat

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

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

10. Becca Slack

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

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

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

11. Triptyc London

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

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

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

12. Holly Oddly

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

No related posts.