Подвал Footer

Подвал должен быть лаконичным и содержать минимальный набор ссылок.

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

Низ страницы со списком товаров и подвал: слева «СКБ Контур с 1988 года», справа ссылки «Отзывы», «Обзор сервиса» и «Лицензионный договор», в углу круглая кнопка виджета поддержки со знаком вопроса

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

Ссылка на «Лицензионный договор» всегда должна быть самой правой в списке ссылок.

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

В подвале одна ссылка «Правовые документы», над ней открыто меню: «Лицензионный договор» под курсором, «Регламент площадки», «Политика конфиденциальности»

Расположение

Подвал необходим только на главной странице.

Если на странице есть залипающая плашка, то подвал добавлять не нужно.

Подвал никогда не залипает.

Подвал закреплён внизу экрана: список товаров уходит под него и обрезается на строке «Орехи кешью»

Неправильно

Список товаров во время прокрутки: строки уходят за нижний край экрана, подвала не видно

Правильно

Если есть меню второго уровня, то подвал располагается в контентной области, не пересекаясь с меню:

Страница с меню второго уровня: подвал с «СКБ Контур с 1988 года» и ссылкой «Правовые документы» стоит только под контентом, правее колонки меню

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

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

Дизайн

Отступ от контента — 40 px.

Разметка отступа 40 px между последней строкой списка товаров и подвалом

Высота подвала — 80 px.

Разметка подвала с копирайтом и ссылками: высота 80 px

Ссылки серые #757575, а при наведении становятся чёрными #222222.

Серые ссылки подвала «Отзывы» и «Обзор сервиса», ссылка «Лицензионный договор» под курсором стала чёрной

Ширина подвала такая же, как ширина контента.

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

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

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

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