В данной статье рассмотрим как сделать верхнюю шапку для продающего сайта, чтобы она работала эффективно. Верхняя шапка, выглядит практически неизменно для всех сайтов. Структуру верхней шапки лучше всего не менять, т. к. у большинства сайтов она одинаковая и посетители уже привыкли, что логотип слева, телефон справа и т. п.
Если сделать структуру шапки непохожую на стандартную, то есть вероятность, что не все посетители будут находить элементы в нестандартных местах, а значит и заявок будет меньше. Рассмотрим составляющие типичной верхней шапки продающего сайта.
На момент написания статьи(конец 2019 г.) распределение посещения сайтов в России по устройствам было следующее:
- Телефоны 65%;
- Компьютеры и ноутбуки 30%;
- Планшеты 5%.
Данные выше, приведены на основе статистики сайтов liveinternet. Как видите, большая часть посетителей сейчас заходит с мобильных телефонов. Конечно, многое зависит от тематики, например, на сайты b2b(услуги и товары для бизнеса), как правило, больше заходят с компьютеров и ноутбуков, а на сайты b2c(услуги и товары для частных лиц) большинство посетителей может переходить с мобильных и планшетов. Могут быть и исключения из правил, точную статистику вы можете узнать, установив на своем сайте счетчик посещаемости.
Согласно приведенной выше статистике во многих сферах большую роль влияет то как выглядит ваш сайт на мобильных устройствах. Поэтому пренебрегать созданием отдельной верхней шапки для мобильного сайта не стоит.
Экран планшета и его пропорции похожи на монитор компьютера или дисплей ноутбука. Поэтому вносить серьезные изменения в верхнюю шапку для отображения на планшете не потребуется, можно ограничиться только удалением некоторых элементов, из-за которых не все содержание верхней шапки помещается на экране. Учитывая, что планшетами пользуются всего около 5% посетителей, для этих устройств можно не делать отдельную версию, а оставить вариант шапки для компьютеров или ноутбуков без изменений.
Совсем другое дело с телефонами, потому что используется кардинально другая ориентация экрана — вертикальная, а не горизонтальная, как у планшетов или компьютеров, к тому же сам экран меньше. Размер экрана телефона при обычном вертикальном положении примерно в 3 раза меньше, чем размер планшета в наиболее распространенном горизонтальном положении. Учитывая существенное уменьшение экрана при просмотре на телефоне, необходимо и верхнюю шапку тоже видоизменить, иначе ее станет не видно из-за небольшого размера или будет отображаться лишь небольшая часть.
Также следует учесть, что в мобильном сайте:
1. Уменьшается значимости навигационных ссылок, потому что просматривать мобильный сайт менее удобно чем с компьютера или ноутбука и у посетителя меньше желания искать ссылки и переходить на другие страницы.
2. Повышается значимость номера телефона, по той же причине — сайт менее удобно смотреть по сравнению с компьютером и ноутбуком. Посетителю проще позвонить, чем искать информацию на маленьком экране.
По этим причинам в мобильной версии сайта значимость контактного телефона, как правило, выше, чем у навигационных ссылок. Поэтому в мобильной версии сайта после логотипа обычно сначала размещают телефон, а меню правее или ниже.
Типичная верхняя шапка для мобильного телефона содержит следующие элементы:
- Логотип компании, как и в обычной версии лучше располагать в самом начале — слева, чтобы посетитель понимал на сайте какой компании сейчас находится.
- Телефон. Лучше оставить 1, максимум 2 для экономии пространства, которого очень мало у мобильной версии сайта.
- Значок меню, состоящий из 3 полосок. Меню ссылок обычно занимает больше всего места в верхней области и часто это наименее важная часть для мобильной версии, как было рассмотрено выше, поэтому именно ее и лучше всего сократить. Наиболее предпочтительный вариант сокращения — создание всплывающего меню, когда раскрывается весь перечень навигационных ссылок при клике на значок.
Общепринятый и наиболее понятный значок всплывающего меню — 3 горизонтальных полоски, потому что он встречается чаще всего. Другой вид значка лучше не использовать, иначе посетитель может не понять, что он означает и, возможно, не догадается как перейти по ссылкам в нужный момент.
Значок всплывающего меню лучше расположить в правой части шапки, как наименее значимую часть.
Практически идеальный вид верхней шапки для мобильного сайта: логотип, телефон, значок меню.
