Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Что такое хедер (шапка) сайта на примере нашей жизни? Например, на голове у строителя мы видим каску, а повара – белый колпак. Голову невесты украшает фата, а мусульманку покрывает хеджаб. У короля на голове мы можем увидеть корону. Говорят, что головной убор влияет на поведение, и именно по нему мы можем часто безошибочно определить, что за человек стоит перед нами.
Шапка сайта есть на каждой его странице, причем, она может быть одинаковой на каждой странице, или разной. Если вы применяете разные хедеры на страницах, то помните, что дизайн шапки на внутренней странице должен быть сокращенным вариантом шапки главной страницы. Это правило хорошего тона в дизайне сайтов.
Что следует писать в шапке сайта
Как и для посетителей, также и для поисковика ваш сайт начинается с хедера. Поэтому в шапке располагаются:
- логотип;
- название компании (или сайта);
- контакты;
- прочие важные элементы: слоган, время работы, краткое описание деятельности и т.п.;
- верхнее горизонтальное меню - именно оно должно завершать хедер.
Отметим, что элементы хедера, которые обязательно должны присутствовать на каждом сайте, это название и контакты.
Не стоит забыть о презентационной роли хедера, поэтому его дизайн должен привлекать внимание, но не должен отвлекать посетителя от поиска нужной информации. Плохой хедер может оттолкнуть посетителей, и они уйдут на другой сайт, у которого контент может быть хуже вашего.
Почему важно размещать контакты в хедере
Поисковая система присваивает каждому сайту определенный регион, один из которых является главным. Прежде всего, она ориентируется на контакты, указанные в шапке сайта. После этого ищет страницу “Контакты”, на которой вы сможете указать дополнительные регионы.
Шапка сайта и правила HTML
Для успешного продвижения сайта необходимо применять несколько правил при разработке хедера.
- Название и контакты никогда не отображать в виде картинки. Только текст, который может воспринять поисковик.
- Наличие заголовка H1, одинакового на всех страницах вашего сайта, будет мешать при продвижении ресурса.
- Не используйте тяжелые изображения, флеш и много графики. Это затрудняет загрузку сайта и раздражает многих пользователей.
- Не встраивайте горизонтальное меню во флеш, не отображайте меню в виде картинок. Используйте только текст. Иначе при необходимости внесения изменений в пункты меню вы можете столкнуться с определенными трудностями.
- Создавайте HTML-шапки. Долой хедеры, состоящие полностью из картинки или флэш-анимации! Зачем усложнять себе работу? Если вы хотите выделиться - можно ненавязчиво использовать динамические элементы в дизайне, работающие на скриптах.
- Шапка должна быть такой высоты, которая не помешает восприятию контента. Для информационных ресурсов логично делать невысокую шапку (100-200 пикселей). Для лэндингов и презентационных сайтов-визиток размер хедера может быть несколько выше.
Как создать правильный хедер
Если у вас есть готовый брендбук, то все страницы сайта, в том числе хедер, следует оформить в соответствии с ним. Важная задача веб-дизайнера – добиться единого стиля между Хедером, контентным полем и подвалом сайта.
Отдавайте предпочтение позитивным изображениям: люди с улыбками на лице, красивая девушка, природа. Для создания серьезной атмосферы используйте безликие изображения в приглушенной цветовой гамме, обязательно с логотипом.
Предположим, что нам нужен хедер для сайта прачечной. Подберите фото стиральной машинки (нужно сразу показать посетителю, на какой сайт он попал, и что ему могут здесь предложить). Как вариант, можно использовать фото привлекательной девушки, стирающей белье, а также элементы дизайна, вызывающие ощущение чистоты и свежести. Каждое фото должно быть уникальным, или хотя бы уникализированным при помощи графического редактора. Можно создать логотип, к примеру, схематичный стиральный барабан и волну внутри него. Рядом с логотипом указываем название.
Сайт встречают по его шапке, это уникальная визитная карточка. Поэтому при разработке сайта уделите хедеру максимум внимания!
