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


делаем эффектный «подвал». Читайте на Cossa.ru

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

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

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

Найдите блогера для эффективной рекламы

Cossa рекомендует: Лучший сервис для работы с инфлюенсерами в Instagram trendHERO:

Проверить сервис бесплатно

Зарегистрируйтесь сейчас, чтобы проверить поиск и 3 блогеров бесплатно

Реклама

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

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

Карта сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги

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

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

Стилизация футера

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

Определяем иерархию

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

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

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

Моделирование хорошего списка

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

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

Пустое пространство (пробел) является ключевым

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

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

Отличие футера от общего контента

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

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

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

Блестящая векторная графика и цветовая палитра, посетитель чувствует умиротворение, смотря на этот футер.

Matt Mullenweg

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

Ресторан Nuevo Aurich

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

Blog.SpoonGraphics

Немного векторной графики, несколько текстур, немного информации – вот три ингредиента, которые могут хорошо работать футере.

Carol Rivello

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

Vimeo

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

Gisele Jaquenod

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

flicka.cz

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

TNT Pixel

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

CooperLive

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

Белый дом

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

SprintBio

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

Готовые проекты

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

Josh Mackey

Ценностью этого подвала является использование иконок. Тут размещаются ссылки на некоторые из основных веб-ресурсов.

David Hellman

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

Iseeq

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

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

Автор: Краснова Анастасия — директор помаркетингу компании Iseeq.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта сайта

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

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

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

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

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

Стандарты

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

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

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

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

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

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

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

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

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

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

Форма входа

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

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

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

Пресс

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

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

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

О нас

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Попробуйте бесплатные инструменты для разработчиков от команды Icons8

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


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

.

Как сохранить нижний колонтитул на своем месте?

Этот пост также доступен на корейском языке .

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

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

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

Это показывает поведение, которого мы не хотим и не хотим:

Давайте посмотрим, как этого добиться.

index.html :

        

main.css :

  # page-container { положение: относительное; мин-высота: 100vh; } # content-wrap { обивка-дно: 2.5рем; / * Высота нижнего колонтитула * / } #footer { позиция: абсолютная; внизу: 0; ширина: 10  
.

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

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

Проблема дизайна

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

The Design Solution

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

Автор / правообладатель: Nielsen Norman Group. Условия авторского права и лицензия: Добросовестное использование.

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

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

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

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

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

Автор / правообладатель: Nike.Условия авторского права и лицензия: Добросовестное использование.

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

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

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

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

  1. Начните с , решив, какие функции вы хотите предложить пользователям . Как видно из приведенного выше примера Nike, нижние колонтитулы файлов Sitemap могут включать в себя широкий спектр различных функций. Их можно использовать для отображения основных категорий сайта, таких как нижний колонтитул BBC ниже, более конкретных категорий, которых нет в других шаблонах навигации, контактной информации, справки и поддержки, а также информации «О нас».Ваша задача как дизайнера - решить, какие функции, по вашему мнению, улучшают свободу передвижения по вашему сайту и объединяют этих различных функций в одну область внизу каждой страницы - не жертвуя пространством, доступным для содержимого каждой страницы. этих страниц. Но имейте в виду: вы должны быть максимально безжалостными при выборе этих элементов дизайна, поскольку нижний колонтитул карты сайта не должен быть слишком большим, и пользователь должен иметь возможность быстро определять интересные или важные ссылки.
  2. Создайте нижний колонтитул на всю страницу и убедитесь, что он присутствует на каждой странице веб-сайта. Убедитесь, что нижний колонтитул не занимает слишком много места на каждой странице.
  3. Сгруппируйте все ссылки функций , такие как «Свяжитесь с нами» и «Наши партнеры», в четко обозначенные категории.
  4. Расположите ссылки так, чтобы не было путаницы, к какой категории они относятся. Используйте, например, пробелы или линии для обозначения групп ярлыков, которые принадлежат друг другу.В этом вам помогут широко известные Принципы Гештальта.
  5. Разместите всю необходимую информацию об авторских правах и веб-сайте , например «год основания», в самом низу карты сайта.

Автор / Правообладатель: BBC. Условия авторского права и лицензия: Добросовестное использование.

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

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

Получите бесплатный шаблон для «Нижних колонтитулов карты сайта»

Sitemap Footers Sitemap Footers

Возможные проблемы с нижними колонтитулами карты сайта

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

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

The Take Away

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

Ссылки и где узнать больше

Изображение героя: Автор / Правообладатель: Эндрю Нолан. Условия авторских прав и лицензия: CC0.

Дженифер Тидвелл, Проектирование интерфейсов: шаблоны для эффективного дизайна взаимодействия , 2010

Мартин ван Велие, Библиотека шаблонов, 2008: www.welie.com/patterns

.

php - переключение нижнего колонтитула для разных языков на сайте Wordpress с помощью плагина Polylang

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также