Зачем нужно создание мобильной версии сайта, ошибки

По статистике более 50% переходов(на конец 2019 г.) происходит с мобильных телефонов и со временем эта доля только увеличивается, поэтому внешний вид сайта на смартфоне в большинстве тематик становится даже более важным, чем при просмотре с ноутбука или компьютера.

Конечно, бывают исключения и в некоторых тематиках доля мобильных посетителей меньше, чем с компьютеров и ноутбуков, но таких ниш немного. Точные данные можно узнать, посмотрев вашу статистику(например, в Яндекс метрике «Отчеты»->«Стандартные отчеты»->«Технологии»->«Устройства») за последний месяц или год.

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

Отсутствие мобильной версии

Даже если сайт открывается на мобильном телефоне, это еще не значит, что у него есть мобильная версия. Если сайт выглядит одинаково как на компьютере, так и на телефоне, значит нет версии для мобильного(или для компьютера), а на экране телефона он просто пропорционально сжимается или растягивается на компьютере.

Когда нет мобильной версии сайта, то его ширина сжимается в несколько раз, чтобы он уместился на маленьком экране телефона. При таком сжатии сайт сильно уменьшается и в большинстве случаев прочитать его содержание без приближения вручную невозможно. Это значит, что посетителю приходится вручную приближать ту область экрана, где он хочет посмотреть содержание, а это действие требует дополнительных усилий и времени.

Чем больше времени и затраченных усилий посетителю требуется, чтобы получить нужную информацию, тем меньше шансов, что он совершит заказ, а не закроет его через несколько секунд, посчитав неудобным. Если у сайта есть хорошая отдельная мобильная версия, то она автоматически подстраивается под размер экрана смартфона и посетитель может читать текст без постоянного увеличения экрана вручную. Когда есть хорошая мобильная версия, то посетителю нужно всего лишь листать вверх/вниз, что значительно удобнее и быстрее позволяет получить информацию.

Хорошая мобильная версия повышает количество заказов с сайта т. к. более удобна и посетителю значительно легче и быстрее найти нужную информацию.

У сайта нет мобильной версии, поэтому он просто сжимается под размер экрана и текст нельзя прочитать без увеличения вручную.


Некорректное отображение мобильной версии

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


Сайт некорректно отображается. Подобные страницы закрывают в первые секунды.


Нормальное отображение мобильной версии

Сайт нормально отображается на смартфоне. Содержание страницы автоматически подстраивается под размер экрана и для просмотра не нужно делать лишних движений по увеличению размера необходимой области. Просмотр остальной части содержания доступен с помощью самых простых действий — прокрутка вниз(вверх) и для этого достаточно одного пальца руки.


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

Как проверить мобильную версию сайта

Ниже приведены основные способы, как проверить мобильную версию сайта:

1. Самый простой способ — открыть сайт на мобильном телефоне, а лучше нескольких.

2. Более продвинутый способ — проверить, как отображается сайт с помощью специальных сервисов: adaptivator.ru, responsinator.com и т.п. Но у подобных сервисов, как правило, доступны не все разрешения, вследствие этого они позволяют проверять, как выглядит сайт только у 30-35% пользователей.

3. Самый лучший способ — открыть обычный браузер -> Включить «Инструменты разработчика» (зажав Ctrl+Shift+I) -> Включить «Режим адаптивного дизайна(toggle device toolbar)» (удерживая Ctrl+Shift+M) -> Сверху появится возможность указать ширину экрана, куда пишем все наиболее популярные разрешения мобильных устройств. На начало 2020 г. 95% посетителей мобильных устройств заходили с таких разрешений экрана по горизонтали: 320px, 360px, 375px, 393px, 412px, 414px, 1024px, 1280px. Если описанные выше шаги не получится выполнить, то можно поставить специальный браузер blisk и прощелкать в меню все устройства с наиболее популярными разрешениями экранов.

Подробнее: 6 способов, как проверить мобильную версию сайта на компьютере.