Шапка - верхний фрагмент первого экрана сайта, должна быть оформлена с учетом некоторых (важных!) требований. До сих пор, заказчики сайтов и их разработчики допускают ряд ошибок. Пройдемся по ним. Запомним.
Чрезмерная высота шапки
Какая высота считается нормальной или допустимой?
Для коммерческих сайтов это значение 250px, максимум 300px. Как правило, такой высоты достаточно для размещения логотипа, слогана, адреса и контактных данных:
Верхнее горизонтальное меню не является элементом шапки, это к тому, что высота указана без учета меню.
Почему шапка должна быть минимальной?
Ответ прост, посмотрите на этот пример:
И как должно быть:
Разница очевидна. Не имеет смысла, даже красивое изображение размещать на всю площадь первого экрана. Первый экран должен вмещать ту информацию, тот овет, за которым пришел посетитель. Он пришел за ответом, а не любоваться дорогим и красивым оформлением вашего сайта.
Страница документа должна максимально быстро дать ответ на вопрос посетителя, который вы предоставляете ему.
Если нет возможности, ввиду особенностей cms например, или желания, упрощать шапку на всех страницах сайта, нужно сократить ее на внутренних страницах.
Главная страница с большой шапкой, внутренние с уменьшенной.
Посудите сами, большая шапка на всех страницах заставляет пользователя прокручивать страницы вниз, для отображения контента. А пользователь ленив, он спешит, информация ему нужна быстро. Прямо сейчас!
Современное оформление в виде лендинга допускает иное оформление шапки.
Пример сайта стоматологии у которого шапка - лендинг.
Не кликабельный блок телефона
Если даже ваш сайт не адаптивный, все равно номер телефона должен быть обрамлен в теге tel: , если не тег, то хотя бы просто текстом а не изображением, это позволит мобильным устройствам на андроид набирать номер для совершения звонка с сайта.
Теги H1-H6
Использование тегов h1 - h6, bold, strong, в оформлении элементов шапки не допустимо, так как шапка является сквозным элементом на сайте, что повлияет на переоптимизацию всех страниц сайта. Учтите этот момент.
Резюме
В завершение приведем пример структуры шапки. Идеальной ее назвать сложно, так как идеальность любого элемента на сайте так и самого сайта, вопрос достаточно спорный. Тем не менее, чему стоит придерживаться и на что ориентироваться:
Эскиз оформления шапки сайта, который используется в техничекских заданиях для дизайнеров.
