Статья
Шапка сайта: что в ней должно быть
Шапка — верхняя полоса сайта с логотипом, меню и кнопкой связи. Её видят на каждой странице, поэтому она работает как постоянный указатель: кто вы, куда можно пойти и как с вами связаться. Разбираем, что в ней должно быть, как она меняется на телефоне и какие ошибки встречаются чаще всего.
Что это такое
Шапка, или хедер (от английского header), — верхний блок, общий для всех страниц сайта. Её пара — подвал, или футер: нижний общий блок с контактами, реквизитами и документами. Вместе с меню они и делают набор страниц сайтом: на любой странице человек понимает, где он и куда можно перейти. Подробнее об этом — в статье «Чем веб-страница отличается от сайта».
Что в ней должно быть
- Логотип — он же ссылка на главную. О версиях и размерах логотипа статья «Логотип для сайта».
- Меню — четыре-семь главных разделов. Всё остальное — в подвал.
- Главная кнопка — одно действие, ради которого сайт существует: «Обсудить проект», «Записаться», «Корзина». Как её подписать, разобрано в статье «Кнопка призыва к действию».
- Контакт — телефон или мессенджер, если клиентам привычнее позвонить.
- По ситуации: поиск и корзина — для магазина, город и режим работы — для местного бизнеса.
Всё сразу не нужно. Выберите то, что клиенты ищут первым делом.
Размер и поведение
- Компактно. Шапка — указатель, а не баннер: обычно она занимает в высоту 60–100 пикселей на компьютере и меньше на телефоне.
- Закреплённая шапка остаётся сверху при прокрутке: на длинных страницах кнопка связи всегда под рукой. На телефоне её делают ниже или прячут, пока человек листает вниз, и показывают при прокрутке вверх.
На телефоне
- Меню сворачивается в кнопку, а главная кнопка и контакт остаются на виду.
- Всё, что нажимают пальцем, — не меньше 44 пикселей в высоту.
- Шапка не должна занимать пол-экрана: на телефоне каждый сантиметр — это контент.
Частые ошибки
- Перегруз: два телефона, адрес, соцсети, слоган и десять пунктов меню.
- Логотип не ведёт на главную — люди привыкли, что ведёт.
- Три разные кнопки с похожими действиями, и непонятно, какая главная.
- Разные шапки на разных страницах.
- Белый логотип на белой шапке после прокрутки — проверьте все состояния.
Как устроено у нас
В шапке нашего сайта — логотип, кнопка «Обсудить проект» и меню. Логотип ведёт на главную, а для экранных дикторов у него есть скрытая подпись «AETHER — на главную». Шапка закреплена сверху, поэтому кнопка связи всегда под рукой.
В корпоративном сайте шапка и подвал — часть шаблонов, общих для всех страниц, а форма заявки доступна с каждой страницы.