Как оформлять шапку сайта
24 май 2016

Как оформлять шапку сайта

что бы она была не большая, не маленькая и информативная...

Шапка  - верхний фрагмент первого экрана сайта, должна быть оформлена с учетом некоторых (важных!) требований. До сих пор, заказчики сайтов и их разработчики допускают ряд ошибок. Пройдемся по ним. Запомним.


Чрезмерная высота шапки

Какая высота считается нормальной или допустимой?


Для коммерческих сайтов это значение 250px, максимум 300px. Как правило, такой высоты достаточно для размещения логотипа, слогана, адреса и контактных данных: 
Верхнее горизонтальное меню не является элементом шапки, это к тому, что высота указана без учета меню.

Почему шапка должна быть минимальной?

Ответ прост, посмотрите на этот пример:

И как должно быть:

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


Страница документа должна максимально быстро дать ответ на вопрос посетителя, который вы предоставляете ему.

Если нет возможности, ввиду особенностей cms например, или желания, упрощать шапку на всех страницах сайта, нужно сократить ее на внутренних страницах.



Главная страница с большой шапкой, внутренние с уменьшенной.

шапка главной страницы на весь экран

укороченная шапка для внутренних страниц

Посудите сами, большая шапка на всех страницах заставляет пользователя  прокручивать страницы вниз, для отображения контента. А пользователь ленив, он спешит, информация ему нужна быстро. Прямо сейчас!

Современное оформление в виде лендинга допускает иное оформление шапки.


Пример сайта стоматологии у которого шапка - лендинг.


шапка гибрид лендинга



Не кликабельный блок телефона


Если даже ваш сайт не адаптивный, все равно номер телефона должен быть обрамлен в теге tel: , если не тег, то хотя бы просто текстом а не изображением, это позволит мобильным устройствам на андроид набирать номер для совершения звонка с сайта.

тег tel: в шапке сайта для телефона

Теги H1-H6

Использование тегов h1 - h6, bold, strong, в оформлении элементов шапки не допустимо, так как шапка является сквозным элементом на сайте, что повлияет на переоптимизацию всех страниц сайта. Учтите этот момент.

ошибки в оформлении шапки сайта

Резюме


В завершение приведем пример структуры шапки. Идеальной ее назвать сложно, так как идеальность любого элемента на сайте так и самого сайта, вопрос достаточно спорный. Тем не менее, чему стоит придерживаться и на что ориентироваться:

эскиз оформления шапки сайта

Эскиз оформления шапки сайта, который используется в техничекских заданиях для дизайнеров.

Комментарии

ОтменитьДобавить комментарий