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

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

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

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

Хороший пример: футер сайта kokoc.com

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

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

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

Что размещать в футере сайта: базовая информация

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

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






Контактная информация из всех блоков и со всех страниц дублируется в футере

2. Правовая информация. Если речь идет об электронном средстве массовой информации, то это номер, дата выдачи и наименование органа регистрации электронного СМИ. Для сайтов образовательных и медицинских компаний это сведения о выданной лицензии. Также к правовой информации относится запрет на копирование материалов без ссылки на сайт или без согласования с владельцем сайта. Договор оферты (или информация о том, что содержание сайта не является договором оферты) и политика конфиденциальности — тоже правовая информация, которую каждый владелец ресурса обязан размещать в соответствии с Федеральным законом № 152 «О персональных данных».






Пример правовой информации в футере сайта электронного СМИ

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

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

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

Выглядит страница карты сайта лаконично

Читайте также:

Как создать карту сайта (sitemap.xml)

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

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

Счетчиков может быть несколько

Комплексная веб-аналитика

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

Что дополнительно разместить в футере сайта

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

1. Информация о партнерах. Партнерство с «Яндексом» и Google, более локальное партнерство, указание компаний, которые поддерживают проект финансово или информационно — все это можно разместить в футере в виде логотипов или ссылок. Работает такая информация как социальное доказательство и помогает сформировать доверие к компании-владельцу ресурса.



Пример футера сайта с указанием партнеров проекта — СМИ «Известия»

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



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

3. Форма обратной связи, заказа обратного звонка или другие дополнительные формы. Они помогают собирать базу подписчиков, получать лиды, собирать людей в рассылку. Для пользователей удобна форма «Задать вопрос», особенно если она не предусмотрена в других блоках/страницах сайта.

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

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

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

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

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

Пример оформления условий доступа к сайту: ссылка на страницу размещена в футере

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

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

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

Вот как сделали владельцы этого сайта

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

Читайте также:

SEO: что это такое и зачем нужна поисковая оптимизация

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

Так выглядит просьба в футере сайта

При совершении действия, о котором написано в футере html-сайта, появляется форма «Сообщить об опечатке», которую можно отправить владельцам.

Эту форму можно отправить, и владелец ресурса исправит ошибку / опечатку

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

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

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

Отзывы, рейтинги, партнерство с Google — все важное и имиджевое в одной строке

Читайте также:

Внешняя оптимизация сайта: как продвигать сайт с помощью сторонних ресурсов

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

О Skolkovo знают все: нет причины не напомнить об этом в подвале сайта

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

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

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

У этого сайта есть мобильное приложение и открытые вакансии

Делаем выводы

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

Создание сайтов

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

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 ресурс от отказа.

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

Разметка страниц

Справка и обучение Word

Разметка страниц

Разметка страниц

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

• Изменить поля
  

  Статья

• Создавайте колонки новостей
  

  Статья

• Изменить ориентацию страницы на альбомную или портретную
  

  Статья

• Добавить границу на страницу
  

  Статья

• Вставьте верхний или нижний колонтитул
  

  Статья

• Вставьте номера страниц
  

  Статья

• Вставить разрыв страницы
  

  Статья

• Вставить оглавление
  

  Статья

Следующий:

Вставка таблиц, изображений и водяных знаков

Word для Microsoft 365 Word для Microsoft 365 для Mac Word для Интернета Word 2021 Word 2021 для Mac Word 2019 Word 2019 для Mac Word 2016 Word 2016 для Mac Word 2013 Word 2010 Word 2007 Word для Mac 2011 Word Starter 2010 Дополнительно. .. Меньше

1. Перейти к Вставка > Заголовок или Нижний колонтитул .

2. Выберите стиль заголовка, который хотите использовать.

   Совет:  Некоторые встроенные верхние и нижние колонтитулы включают номера страниц.

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

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

5. Выберите Закрыть верхний и нижний колонтитулы или нажмите Esc для выхода.

Для удаления выберите Вставить > Верхний колонтитул (или Нижний колонтитул ) > Удалить верхний колонтитул (или Удалить нижний колонтитул ).

Добавить стандартный или индивидуальный верхний или нижний колонтитул

1. org/ListItem»>

   Перейти к Вставить > Верхний колонтитул или Нижний колонтитул .

2. Выберите из списка стандартных верхних или нижних колонтитулов, перейдите к списку вариантов  Верхний или Нижний колонтитул и выберите нужный верхний или нижний колонтитул.

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

3. Когда вы закончите, выберите Закрыть верхний и нижний колонтитулы или нажмите Esc.

Важно:
Office для Mac 2011 больше не поддерживается . Перейдите на Microsoft 365, чтобы работать где угодно с любого устройства и продолжать получать поддержку.

Обновить сейчас

1. На вкладке Макет в разделе Вид щелкните Макет страницы .

2. На вкладке Макет в разделе Параметры страницы щелкните Верхний и нижний колонтитулы .

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

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

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

1. Перейти к Вставить > Верхний и нижний колонтитулы .

2. Добавить текст верхнего или нижнего колонтитула.

3. Используйте меню Options для дополнительной настройки.

4. Чтобы выйти, выберите Закрыть верхний и нижний колонтитулы или нажмите Esc .

5. Чтобы удалить, выберите Вставить > Заголовок (или Нижний колонтитул ) > Удалить верхний колонтитул (или Удалить нижний колонтитул ).

Дополнительные сведения о верхних и нижних колонтитулах см. в разделе Верхние и нижние колонтитулы в Word.

Тег нижнего колонтитула HTML

❮ Назад
Полный справочник HTML
Далее ❯

Пример

Нижний колонтитул в документе:

Попробуйте сами »

Еще «Попробуйте сами» примеры ниже.

Определение и использование

Тег