Футер сайта: что положить в подвал страницы и зачем

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

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

Футер, или подвал сайта, — блок внизу каждой страницы, под основным содержимым. Nielsen Norman Group определяет его именно так: область внизу каждой страницы сайта, под основным текстом. Термин пришёл из полиграфии, где колонтитул повторяется на всех страницах документа. На сайте подвал перестал быть украшением: в нём есть ссылки и контакты, по которым действуют.

В HTML для подвала есть элемент <footer>. Справочник MDN пишет, что в нём обычно размещают сведения об авторе, данные об авторских правах или ссылки на связанные документы. Если <footer> стоит на уровне всей страницы, он относится ко всему сайту, а не к отдельной статье.

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

Футер — блок внизу каждой страницы с контактами, документами и картой разделов. Его читают те, кто дошёл до конца страницы.

Зачем посетители прокручивают страницу до подвала?

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

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

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

Факт. По данным Nielsen Norman Group, за контактами и поддержкой посетители часто идут сразу в футер, минуя меню.

Что разместить в футере сайта

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

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

Nielsen Norman Group советует всегда дублировать служебные ссылки — контакты, поддержку, политику, условия — в подвале, даже если они уже есть вверху страницы. Отзывы и награды в футере допустимы, но NN/g предупреждает: слишком много отзывов и наград настораживает покупателей.

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

Что закон требует показать на сайте

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

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

Если сайт собирает персональные данные — через форму заявки, подписку, регистрацию, — закон о персональных данных (152-ФЗ, статья 18.1) обязывает оператора опубликовать политику обработки персональных данных на страницах сайта, через которые идёт сбор. Ссылку на политику ставят в подвал и рядом с каждой формой. Что ещё требует закон от владельца сайта, разобрано в статье что обязан сделать владелец сайта по 152-ФЗ.

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

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

Реквизиты и контакты в подвале: что указать

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

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

На практике в футер выносят такой набор:

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

Дублировать ли меню в подвале сайта?

Навигация в футере экономит посетителю прокрутку наверх. Nielsen Norman Group называет такой приём навигацией-ковриком: основные разделы стоят и вверху, и внизу страницы. По словам NN/g, это особенно полезно на длинных страницах, где до меню в шапке далеко.

Второй вариант — карта сайта в подвале: кроме основных разделов, она показывает подразделы следующего уровня. NN/g советует выносить в подвал полную карту, только если страниц около 25 или меньше. На большом сайте полная карта превращает подвал в стену ссылок; тогда в футер ставят главные разделы и ссылку на отдельную страницу с картой сайта.

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

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

Нужен ли значок копирайта в футере?

Значок © в подвале — по желанию владельца, а не требование закона. Гражданский кодекс (статья 1271) говорит, что правообладатель вправе использовать знак охраны авторского права. Право на тексты и изображения возникает и без значка.

Если значок ставят, кодекс описывает его состав: латинская буква C в окружности, имя или наименование правообладателя и год первого опубликования. Значок без наименования правообладателя мало что сообщает, а знак с прошлогодним годом выглядит как заброшенный сайт.

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

Факт. Гражданский кодекс (статья 1271) разрешает, но не обязывает ставить знак охраны авторского права; право возникает без него.

Вёрстка и доступность подвала

Подвал верстают элементом <footer> на уровне страницы. Так программы экранного доступа узнают в нём подвал сайта и позволяют перейти к нему одной командой.

Текст в подвале не должен быть мелким и бледным. Старые подвалы часто делали серым шрифтом на сером фоне, и прочитать телефон было трудно. Ссылки группируют по смыслу и снабжают заголовками колонок: «Компания», «Услуги», «Документы».

Отдельная проблема — липкие элементы внизу экрана. Пояснения к WCAG прямо называют баннер cookie, закреплённый внизу, нарушением, если он полностью закрывает элемент, на котором стоит фокус клавиатуры. Такой баннер ещё и перекрывает сам подвал, пока посетитель его не закроет. Проверка простая: пройдите страницу клавишей Tab до самого конца и посмотрите, видна ли выделенная ссылка.

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

Как собрать футер для своего сайта

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

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

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

Источники

• Footers 101: Design Patterns and When to Use Each — Nielsen Norman Group
• Федеральный закон № 149-ФЗ «Об информации, информационных технологиях и о защите информации», статья 10 — КонсультантПлюс
• Закон РФ № 2300-1 «О защите прав потребителей», статья 9 — КонсультантПлюс
• Закон РФ № 2300-1 «О защите прав потребителей», статья 26.1 — КонсультантПлюс
• Федеральный закон № 152-ФЗ «О персональных данных», статья 18.1 — КонсультантПлюс
• Гражданский кодекс РФ, часть четвёртая, статья 1271 — КонсультантПлюс
• Understanding SC 2.4.11 Focus Not Obscured (Minimum) — W3C