Header — известный термин в среде веб-разработки. Некоторые люди подразумевают под этим понятием название сайта, другие же считают, что речь идет о верхнем колонтитуле. И те, и другие правы, ведь этот элемент находится в самом верху страницы. Его противоположностью является футер — нижняя часть сайта. Но это лишь приблизительная расшифровка определения «header». Разработчику интернет-площадки важно знать всю информацию про хедер что это такое и какую роль элемент играет в оптимизации веб-ресурса.
Хедер и особенности восприятия страницы пользователем
Большинство посетителей сайтов изучают страницы в следующем порядке:
- Смотрят на левый верхний угол шапки.
- Переводят взгляд в верхний правый угол.
- Прокручивают сайт, просматривая информацию по диагонали справа налево до левого нижнего угла.
- Перемещают взгляд в правый нижний угол.
То есть можно сказать, что они рассматривают страничку по принципу буквы «Z». Если веб-площадка имеет боковые колонки с контентом, зигзаг получается более сложным. Но все равно хедер и футер становятся начальным и конечным пунктами для просмотра интернет-ресурса. При этом header первым привлекает внимание посетителя. Если он не заинтересует пользователя за пару секунд, дальнейшего просмотра не будет. Посетитель сразу уйдет с сайта с неинтересной информацией.
Это значит, что любая коммерческая веб-площадка должна иметь цепляющую шапку, стимулирующую пользователя к звонку или заказу. В противном случае покупатель достанется конкурентам.
Что должно находиться в хедере в обязательном порядке
Для сайта коммерческого назначения надо делать header со следующим содержимым:
- Названием и логотипом фирмы. Эти элементы оформляют в корпоративных цветах.
- Телефонами и электронной почтой.
- Горизонтальным меню. Если пользователя заинтересует шапка сайта, он сразу же сможет воспользоваться меню для перехода по страницам.
Это базовые элементы хедера. При желании к ним можно добавить ссылки на сообщества в социальных сетях, строку поиска, кнопки заказа обратного звонка и подписки на рассылку, время работы компании и другую информацию.
Помещать все перечисленные блоки в шапке сайта не рекомендуется. Лучше сделать header простым, стильным и удобным. Также вы можете сократить количество инструментов в хедере на внутренних страницах интернет-ресурса. Достаточно будет полного их набора на главной.
Основные правила создания хедера
Следующие 5 рекомендаций помогут вам понять, как сделать header удобным и привлекательным для пользователя:
- Контакты и логотипы должны быть четкими и заметными для посетителя. Не размещайте телефоны и название фирмы в виде изображения. Эта информация сканируется поисковыми системами. Если поисковик не проиндексирует данные о вашей компании, он не будет предлагать их пользователям в ответ на запросы.
- Заголовки H1 нельзя дублировать на разных страницах веб-площадки. Это помешает нормальной индексации сайта. Лучше прописать основной заголовок на главной, а для остальных страничек придумать другие названия.
- Размер хедера не должен мешать чтению содержимого сайта. Поэтому вам нужно правильно настроить высоту header. Если у вас информационный или новостной интернет-ресурс, достаточно будет шапки высотой до 200 пикселей. Для лендингов и корпоративных площадок этот показатель можно увеличить до 400-500 пикселей.
- Картинки для шапки не должны быть «тяжелыми». Лучше использовать небольшое количество изображений и полностью отказаться от анимации. В противном случае пользователь может не дождаться загрузки страницы и уйти с сайта. Сделать хедер красивым и функциональным помогают инструменты CSS и HTML. Также вы можете использовать скрипты для внедрения новых функций.
- В меню не рекомендуется вставлять графику и анимацию. Помните, что при обновлении веб-площадки вам придется редактировать и меню. Вы не сможете этого сделать без специальных навыков и будете вынуждены платить веб-программистам и дизайнерам. Поэтому лучше использовать только текстовое меню.
Дизайн для хедера
Стиль оформления шапки сайта должен соответствовать всем другим элементам веб-площадки. В то же время в дизайне должны просматриваться шрифты и цвета компании. Они сделают интернет-ресурс узнаваемым для пользователей. Если фирма новая и еще не успела выработать собственный стиль, можно подобрать цвета и рисунки под направление деятельности предприятия.
Для бизнеса B2B хорошим примером послужит белый или серый header. Подойдут и другие оттенки. Главное, чтобы они были приглушенными, подчеркивающими серьезность намерений компании.
Для сайта, работающего с частными лицами, лучше оформлять шапку в ярких, привлекающих внимание тонах, и дополнять ее картинками. Например, для кафе можно выбрать желтый фон, на котором посетитель увидит улыбающегося официанта с аппетитными блюдами в руках. Такой хедер сразу же скажет пользователю о направлении деятельности фирмы.
При разработке логотипа также учитывайте фирменные цвета. Разместите на символе бренда название компании и ее слоган. Логотип можно дополнить изображением, говорящим о специфике бизнеса. Для мастерской подойдет схематический гаечный ключ, а для автосервиса — автомобиль.
Примеры оформления для сайтов разной тематики
Если вы еще не поняли, как правильно делается шапка сайта примеры помогут вам усвоить эту информацию. Рассмотрим интернет-ресурсы разного назначения и их различия в оформлении:
- На сайте медиаперсоны в хедере акцентируется внимание на фото известной личности и ее имени. Все остальные элементы не привлекают к себе внимания.
- В интернет-магазине важно перенаправить пользователя в каталог и предложить ему интересные товары. Это делается с помощью кнопки в центре хедера с надписью «Перейти к покупкам», «Получить каталог» или другим текстом. В стороне от нее размещают контакты и кнопку заказа обратного звонка.
- На веб-площадке мастерской или другой сервисной фирмы основную позицию тоже занимает кнопка побуждения к действию. Чаще всего она предлагает получить консультацию по поломке.
- На корпоративном сайте header должен говорить о стабильности компании. Его оформляют в фирменных цветах и обязательно размещают в шапке логотип, краткую информацию о деятельности фирмы, контакты и меню.
Теперь вы знаете, как называется верхняя часть сайта, как она влияет на поведение пользователей и какое значение имеет для поисковиков. Правильно оформляйте хедер, и вы быстро добьетесь роста продаж.
