Почему подвал сайта — это не «просто низ страницы»

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

По данным Яндекс.Метрики на нескольких проектах: от 15 до 35% пользователей доскролливают до подвала. Причём это не случайные люди — это те, кто действительно ищет что-то конкретное. Номер телефона. Адрес. Ссылку на соцсети. Реквизиты компании. И если они не находят это за пару секунд, они уходят.

Подвал — это последний шанс удержать человека на сайте. Или наоборот — подтолкнуть к целевому действию.

Что я обязательно размещаю в футере бизнес-сайта

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

Контактная информация — на первом месте

Звучит очевидно, но я до сих пор встречаю сайты, где в подвале нет ни телефона, ни email. Для бизнес-сайта это критично. Я всегда ставлю:

  • Телефон с кликабельной ссылкой `tel:` — чтобы с мобильного можно было позвонить в одно касание.
  • Email — тоже через `mailto:`, но тут важно не ставить личную почту на Gmail. Почта на домене компании повышает доверие.
  • Физический адрес. Если компания работает офлайн, адрес обязателен. Для поисковиков это тоже сигнал: реальный бизнес с реальным местоположением.
  • График работы — особенно для услуг и розницы.

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

Навигация — но не дублирование шапки

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

В шапке у вас «Услуги» одной ссылкой. А в подвале можно развернуть: «Разработка сайтов», «SEO-продвижение», «Контекстная реклама», «Дизайн интерфейсов». Это и для пользователя удобнее, и для внутренней перелинковки полезно.

Я обычно разбиваю навигацию в подвале на 3–4 колонки:

  • Компания — о нас, команда, вакансии, блог
  • Услуги или Продукты — развёрнутый список
  • Поддержка — FAQ, документация, контакты
  • Юридическое — политика конфиденциальности, оферта, реквизиты

Соцсети — но без фанатизма

Иконки соцсетей в футере — это стандарт. Но я видел сайты, где в подвале стоит 8–10 иконок: ВКонтакте, Telegram, YouTube, Дзен, TikTok, Pinterest, Одноклассники, RuTube и ещё парочка.

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

В 2026 году для российского рынка актуальный минимум — Telegram и ВКонтакте. Если есть YouTube или Дзен с регулярным контентом — добавляйте. Остальное — по ситуации.

Юридическая информация

Это не просто «для красоты». Для коммерческих сайтов в России обязательно указывать:

  • Полное наименование юрлица или ИП
  • ИНН и ОГРН (или ОГРНИП)
  • Ссылку на политику обработки персональных данных (152-ФЗ требует)

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

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

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

Минималистичное поле email + кнопка «Подписаться» — этого достаточно. Не надо просить имя, телефон и дату рождения. Чем проще форма, тем выше конверсия.

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

Теперь про визуальную часть. Тут я опираюсь на конкретные принципы, которые проверял на своих проектах.

Контраст с основным контентом

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

Главное — чтобы при скролле было понятно: «Ок, это уже конец страницы, тут я найду служебную информацию».

Типографика: читаемость важнее стиля

В подвале я использую размер шрифта 14–16px для основного текста. Меньше 14px — уже тяжело читать, особенно на мобильных. Заголовки колонок — 16–18px, полужирным.

Цвет текста — не чисто белый на тёмном фоне. Это слишком контрастно и утомляет глаза. Я беру что-то вроде `#B0B0B0` или `#CCCCCC` для обычного текста и `#FFFFFF` только для заголовков или акцентов.

Сетка: колонки на десктопе, стек на мобильном

На десктопе подвал у меня обычно выстроен в 3–4 колонки. На планшетах — 2 колонки. На мобильных — всё в одну стопку, но с аккордеонами (раскрывающимися блоками), чтобы пользователь не скроллил бесконечный список ссылок.

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

Два уровня подвала

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

Верхний блок — основной контент: навигация, контакты, подписка, соцсети. Тут вся полезная информация.

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

Такое разделение помогает не смешивать «полезное» с «обязательным» и делает подвал визуально чище.

Ошибки, которые я исправляю чаще всего

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

Слишком много текста. Футер — это навигационный элемент, а не место для SEO-портянки. Я видел подвалы с абзацами описания компании, миссией и историей основания. Всё это замечательно — но на странице «О нас», а не в подвале.

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

Нет адаптивности. Футер, который хорошо выглядит на десктопе, на мобильном может превратиться в кашу: текст налезает друг на друга, кнопки слишком мелкие, карта вылезает за экран. Я всегда проверяю адаптивность подвала на экранах 320px, 375px и 414px — это три самых популярных мобильных ширины.

Карта без смысла. Встроенная Яндекс.Карта или Google Maps в подвале — решение спорное. Если у бизнеса один офис и к нему реально приезжают клиенты — карта полезна. Но для онлайн-бизнеса или федеральной компании это просто лишний вес страницы. Iframe карты может добавить 200–500 КБ и замедлить загрузку.

Год копирайта из прошлого. Звучит как мелочь, но «© 2021» в подвале сайта в 2026 году — это красный флаг для посетителя. Значит, сайт не обновляется. Я всегда ставлю динамический год через JavaScript: `new Date().getFullYear()`. Решается одной строкой и навсегда.

Технические моменты, на которые я обращаю внимание

Микроразметка Schema.org

Для бизнес-сайта я добавляю в футер структурированные данные. Как минимум — `Organization` с полями `name`, `url`, `logo`, `contactPoint`, `address`. Это помогает поисковикам правильно понимать, что за компания стоит за сайтом.

Если есть несколько филиалов — использую `LocalBusiness` для каждого. Разметку делаю через JSON-LD — это самый чистый способ, который не мешает вёрстке.

Ленивая загрузка тяжёлых элементов

Если в подвале есть карта, виджет чата или сторонний скрипт — подгружаю их только когда пользователь доскроллил до футера. Intersection Observer API отлично для этого подходит. На реальных проектах это давало ускорение первичной загрузки на 0.5–1.5 секунды.

Доступность (a11y)

Футер оборачиваю в `<footer>` — это семантически правильный тег, и скринридеры его понимают. Все ссылки делаю с понятным текстом (не «нажмите сюда», а «Политика конфиденциальности»). Иконки соцсетей — обязательно с `aria-label`.

Контраст текста проверяю через DevTools или сервисы вроде WebAIM Contrast Checker. Для обычного текста в подвале — минимум 4.5:1, для крупного — 3:1. На тёмном фоне это особенно актуально.

Примеры удачных паттернов

«Минимальный бизнес». Три колонки: навигация, контакты, форма подписки. Sub-footer с копирайтом и ссылкой на политику. Всё. Чисто, понятно, грузится мгновенно. Идеально для малого и среднего бизнеса.

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

«Продуктовый SaaS». Колонки «Продукт», «Решения», «Ресурсы», «Компания». Переключатель языка. Статус системы (ссылка на status page). Сертификаты безопасности (SOC 2, ISO). Такой футер транслирует надёжность и зрелость продукта.

Рабочий процесс: от макета к коду

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

Шаг 2. Делаю wireframe — просто прямоугольники и текст, без дизайна. На этом этапе важна структура: что в какой колонке, какой порядок, что попадёт в sub-footer.

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

Шаг 4. Вёрстка. Начинаю с мобильной версии (mobile first), потом расширяю до планшета и десктопа. Использую CSS Grid для колонок — он даёт больше контроля, чем Flexbox, когда нужно точно распределить пространство.

Шаг 5. Проверка. Тестирую на реальных устройствах, прогоняю через Lighthouse и PageSpeed Insights. Смотрю, не замедляет ли подвал загрузку.

Краткий чек-лист напоследок

Если вы сейчас работаете над своим сайтом или планируете обновление — пройдитесь по этим пунктам:

  • Контакты на видном месте? Телефон, email, адрес?
  • Навигация расширенная, а не копия меню?
  • Соцсети — только живые?
  • Юридическая информация и политика конфиденциальности?
  • Год копирайта — динамический?
  • Адаптивность проверена на разных экранах?
  • Микроразметка добавлена?
  • Тяжёлые элементы грузятся лениво?
  • Контраст текста достаточный?

Если хотя бы два пункта вызвали сомнение — значит, есть над чем поработать.