Шапку сайта и подвал часто делают в последнюю очередь и по остаточному принципу: «логотип слева, телефон справа, снизу копирайт». А это два самых просматриваемых блока, они есть на каждой странице. Для B2B они решают, доверится закупщик компании или уйдёт к конкуренту. Разберём, как эти блоки называются, какие элементы в них нужны, как выглядят удачные примеры и на чём чаще всего спотыкаются.
Как называется шапка сайта и подвал
Шапка сайта это верхняя часть страницы с логотипом, меню и контактами. Её ещё называют хедером (от английского header) или верхним колонтитулом. Подвал сайта это нижняя часть страницы, по-английски footer, отсюда «футер». Названия пришли из вёрстки газет и книг: там тоже был постоянный верх и низ полосы.
Хедер сайта это не просто строка с логотипом, а сквозной блок: одинаковый на всех страницах и собранный один раз в шаблоне. В HTML для него даже есть свои теги, header и footer. Так что на вопрос «как называется футер сайта» правильных ответов два: футер или подвал, это одно и то же.
| По-русски | По-английски | Где на странице | За что отвечает |
|---|---|---|---|
| Шапка, верхний колонтитул | Header, хедер | Верх, первый экран | Навигация, первый контакт |
| Подвал, нижний колонтитул | Footer, футер | Самый низ страницы | Доверие, полные контакты, карта разделов |
Зачем нужны сквозные блоки
Header и footer повторяются на всех страницах. Куда бы посетитель ни попал: на главную, в каталог или в статью блога, он всегда видит один и тот же верх и низ. Поэтому в них выносят то, что должно быть под рукой везде: как перейти в нужный раздел (шапка) и как связаться и проверить компанию (футер). Это часть общей навигации, о ней подробно в материале Структура сайта: как организовать разделы под продажи и SEO.
Почему хедер важен и нужен
Хедер важен, потому что его видят все посетители без исключения, а большинство дальше первого экрана не уходит. По данным Nielsen Norman Group (2018), 57% времени просмотра страницы приходится на область до первой прокрутки, а 74% на первые два экрана. То, чего нет наверху, многие просто не увидят.
«Пользователи проводят большую часть времени на других сайтах. Поэтому они хотят, чтобы Ваш сайт работал так же, как все остальные сайты, которые они уже знают».
Отсюда главное правило: шапка сайта должна быть привычной. Логотип слева, меню горизонтальной строкой, телефон и кнопка в правом углу. В исследовании NN/g (2016) пользователи на 89% чаще запоминали бренд, если логотип стоял в левом верхнем углу, а при логотипе по центру вернуться на главную было примерно в шесть раз труднее. Оригинальность здесь стоит денег: человек тратит время на поиск меню вместо поиска товара.
Что должно быть в шапке
Шапка это первый экран и первое решение посетителя. Её задача: за секунду показать, куда он попал, и дать быстро связаться. Основные элементы шапки сайта производственной компании:
- Логотип: слева, кликабельный, ведёт на главную.
- Дескриптор: короткая строка, чем занимается компания («Производство композитной арматуры»). Закупщик должен сразу понять, тот ли это поставщик.
- Меню: основные разделы: продукция, услуги, о компании, контакты. Не больше 6–7 пунктов верхнего уровня.
- Телефон и мессенджеры: крупно, в правом углу, номер кликабельный на телефоне. В B2B звонят и пишут, а не только оставляют форму.
- Кнопка целевого действия: «Получить прайс», «Запросить КП», «Рассчитать заказ».
- Поиск по каталогу: если позиций больше пары десятков.
- Регион и график: если работаете по конкретным регионам или важна отгрузка.
У шапки сайта интернет-магазина набор шире: иконки корзины, избранного и входа в личный кабинет, строка поиска на всю ширину, иногда полоса с акцией над меню. Для завода с каталогом тоже бывает нужна корзина или «список для запроса», если клиент собирает заявку из нескольких позиций. Про то, как оформить саму страницу товара, подробно в статье Карточка товара, которая продаёт и продвигается.
Шапка веб-сайта: виды и примеры оформления
Шапка веб-сайта бывает четырёх основных видов, и выбор зависит от объёма меню, а не от вкуса. Вот чем они отличаются и кому подходят:
| Вид шапки сайта | Как выглядит | Кому подходит |
|---|---|---|
| Однострочная, минималистичная | Логотип, 4–6 пунктов меню, телефон, кнопка в одну горизонтальную строку | Небольшой сайт услуги, лендинг |
| Двухэтажная | Верхняя полоса с контактами, регионом и мессенджерами, под ней строка меню | Производство, дилерская сеть, широкий ассортимент |
| С мегаменю | При наведении раскрывается большая панель с разделами каталога | Сотни позиций, много направлений |
| Прозрачная поверх первого экрана | Шапка лежит на фото или видео, при прокрутке становится плотной | Имиджевые сайты, где важна картинка |
Пример шапок сайта для производства: у нас самих шапка двухэтажная. Сверху контакты и мессенджеры, ниже меню с раскрывающимися разделами услуг и отраслей. Одноэтажную версию мы пробовали и отказались: пунктов меню много, а в одну строку они слипаются.
Дизайн шапки сайта строится на тех же правилах, что и весь фирменный стиль: те же шрифты, цвета и иконки, что и на остальных страницах. Визуальный вес распределяют так, чтобы взгляд шёл по привычной букве F: логотип, меню, контакт. Оформление шапки сайта с тремя акцентными цветами и пятью шрифтами выглядит самодельным, одна акцентная кнопка работает лучше. Если шапку и весь сайт нужно собрать заново под Вашу продукцию, это задача для разработки дизайна сайта, а не для правки одного блока.
Шапка страницы сайта: одна на все страницы или разная
Шапка страницы сайта должна быть одинаковой на всех страницах, как и футер страницы сайта. Посетитель привыкает к ней на первой странице и дальше ищет меню и телефон на том же месте. Если на главной одна шапка, в каталоге другая, а в блоге третья, это ломает ориентацию и выглядит небрежно.
Допустимые исключения два. Первое: рекламные посадочные, где меню иногда убирают, чтобы не уводить человека с предложения. Второе: подсветка текущего раздела, когда пункт меню, в котором находится посетитель, выделен цветом. Внутри страницы навигацию дополняют хлебные крошки на сайте: они показывают путь от главной до текущей страницы и не заменяют меню, а дополняют его.
Футер сайта: что это и где он
Футер сайта это нижний блок, который повторяется на каждой странице под основным содержимым. Где футер сайта: в самом конце страницы, после последнего раздела и формы. Футер и подвал сайта это синонимы, разницы между ними нет.
Шапка и футер сайта работают в паре. Шапка встречает и ведёт вглубь, футер ловит тех, кто дочитал до конца, и отвечает на вопрос «а кто вы вообще такие». До нижней части страницы доходят немногие, зато это самые заинтересованные посетители: они уже прочитали всё и решают, писать ли Вам.
Что должно быть в подвале
До футера долистывают те, кто уже заинтересован и хочет проверить компанию или найти контакт. Здесь работает доверие:
- Полные контакты: телефоны, почта, мессенджеры, адрес производства, контактная информация по отделам, если их несколько.
- Реквизиты: ИНН, ОГРН, юрлицо. Для B2B это не формальность, снабженец проверяет контрагента.
- Карта разделов: дубль меню и ссылки на продукты, услуги, кейсы, блог, помогает и людям, и поисковику.
- Документы: политика обработки персональных данных, оферта, сертификаты. Политику сайт, который собирает заявки, обязан опубликовать по ч. 2 ст. 18.1 закона 152-ФЗ.
- Повторный призыв к действию: форма заявки или кнопка. Человек долистал до конца, дайте ему связаться, не заставляя прокручивать обратно.
Чего в футере быть не должно: облака из сотни ключевых слов, дублирующих ссылок на одни и те же страницы и мелкого серого текста, который невозможно прочитать. Такой нижний блок не помогает ни людям, ни поиску.
Ссылки в шапке и футере сайта
Ссылка в шапке сайта и ссылки в футере сайта называются сквозными: они стоят на каждой странице. Поисковик видит их сотни раз и понимает, какие разделы Вы считаете главными. Поэтому в шапку и футер ставят ссылки на ключевые разделы: каталог, услуги, цены, контакты, а не на всё подряд.
- В шапке: главные разделы меню, телефон со ссылкой для звонка, мессенджеры, кнопка заявки.
- В футере: карта разделов, документы, реквизиты, соцсети, ссылка на карту сайта.
- Не ставить: ссылки на чужие сайты «в благодарность», десятки ссылок с одинаковым текстом, ссылки на страницы, закрытые от индексации.
Отдельный случай: ссылки в подвале сайта на разработчика («Сделано в …»). Если без nofollow и на каждой из тысячи страниц, это тысяча одинаковых внешних ссылок. Для Вашего сайта пользы нет, лучше одна строка без ссылки или ссылка только с главной.
Шапка профиля: ссылка на сайт в соцсетях
Шапка профиля это верхний блок страницы компании в соцсети или мессенджере: аватар, название, описание и ссылка. К шапке сайта она отношения не имеет, но ищут их вместе. Ссылка на сайт в шапке профиля это главный мостик между соцсетями и сайтом, поэтому её ставят первой.
Как сделать, чтобы переход работал: ссылка ведёт не на главную, а на страницу, которая продолжает мысль профиля (каталог, прайс, форма расчёта). В ссылку добавляют UTM-метку, чтобы в Метрике было видно, сколько посетителей пришло из профиля. В Telegram-канале ссылку ставят в описание, во ВКонтакте в поле «Сайт» и в закреплённый пост.
Частые ошибки
| Ошибка | Чем плоха |
|---|---|
| Телефон спрятан или мелкий | В B2B звонок это главный способ связи, его теряют |
| Меню из 12+ пунктов | Посетитель не находит нужное, уходит |
| Нет реквизитов внизу страницы | Снабженец не может проверить компанию, не доверяет |
| Шапка не «прилипает» при прокрутке | На длинных страницах теряется навигация и кнопка заявки |
| Разные шапки на разных страницах | Ломает ориентацию, выглядит небрежно |
| Логотип по центру, меню спрятано в бургер на компьютере | Человек тратит время на поиск навигации |
| Шапка на пол-экрана с видео | Съедает первый экран и замедляет загрузку всех страниц |
Мелочи, которые важны
Несколько деталей, которые часто упускают. Липкая шапка остаётся вверху при прокрутке и держит навигацию и телефон под рукой на длинных страницах каталога. В тесте Smashing Magazine (2012) участники находили нужный раздел через закреплённое меню на 22% быстрее.
Мобильная версия: меню сворачивается в бургер, телефон и мессенджер остаются видимыми иконками, размер кнопок не меньше подушечки пальца. Скорость: тяжёлые шапки с видео и анимацией бьют по загрузке всего сайта, ведь грузятся на каждой странице. Единый стиль: header и footer это часть айдентики, а для B2B аккуратная упаковка это сигнал, что компания серьёзная. Как фирменный стиль влияет на доверие, разобрали в статье Фирменный стиль: как он влияет на доверие и продажи.
Чек-лист шапки и подвала сайта
| Проверка | Шапка | Подвал |
|---|---|---|
| Понятно, чем занимается компания | Логотип + дескриптор | Название и краткое описание |
| Можно связаться в один клик | Телефон, мессенджер, кнопка | Все контакты и форма |
| Можно найти нужный раздел | Меню до 7 пунктов, поиск | Карта разделов |
| Можно проверить компанию | Не обязательно | Реквизиты, адрес, документы |
| Одинаково на всех страницах | Да | Да |
| Работает на телефоне | Бургер, кликабельный номер | Колонки в один столбец |
Почему это влияет на заявки
Верх и низ страницы не про красоту, а про то, доведёте ли Вы заинтересованного человека до контакта. Наш замер по своему сайту: за 90 дней в Яндекс Метрике посетители 73 раза перешли в Telegram, 19 раз в MAX, 13 раз нажали на номер 8 800 и 8 раз на WhatsApp. После этого мы поставили Telegram первым в шапке, внизу страниц и в плавающей кнопке. На главной странице за тот же период не было ни одной заполненной формы, зато было 45 переходов в мессенджеры. Люди связываются через то, что видят в шапке.
Спрятанный телефон, запутанное меню, отсутствие реквизитов, и закупщик, который был готов написать, уходит к конкуренту с понятным сайтом. Мы проектируем эти блоки на этапе разработки сайта под логику Вашего клиента, а дизайн шапки и всего сайта делаем под продукцию, а не по шаблону.
Хотите понять, не теряет ли Ваш сайт заявки на навигации и доверии? Проведём бесплатный аудит юзабилити, посмотрим шапку, нижний блок и путь посетителя к заявке.
