Мобильная версия сайта: чек-лист

Мобильная версия сайта — это то, что видит большинство ваших клиентов. Проверить её самому можно за 15 минут без программиста: откройте сайт на своём телефоне через мобильный интернет и пройдите путь клиента от первого экрана до заявки. Если вы не можете за 10 секунд понять, что предлагает фирма, нажать на телефон и заполнить форму одним пальцем, клиенты тоже не могут.

Google уже несколько лет оценивает сайты в первую очередь по мобильной версии (так называемое mobile-first индексирование). То есть если на телефоне у вас обрезан текст или скрыт раздел, для поиска его как будто и нет. Ниже — чек-лист из 20 пунктов, который можно пройти самому, и объяснение, что делать с найденными проблемами.

Как проверять: правильные условия

Проверка на компьютере с уменьшенным окном браузера — это не то же самое. Возьмите обычный телефон, лучше не самый новый, и:

• выключите Wi-Fi, оставьте мобильный интернет;
• откройте сайт в режиме инкогнито, чтобы не было кэша;
• найдите сайт через Google, как это сделал бы клиент, а не по закладке;
• проверьте и на Android, и на iPhone, если есть возможность: попросите знакомого или сотрудника.

Возьмите листок и отмечайте всё, что раздражает. Через пять минут у вас будет список, полезнее любого автоматического теста. Ещё лучше — дайте телефон человеку, который ваш сайт никогда не видел, и попросите записаться на услугу, ничего не подсказывая.

Чек-лист: первый экран

1. Понятно ли за 5 секунд, что вы делаете и где? Заголовок с услугой и городом должен быть виден без прокрутки.
2. Есть ли кнопка действия на первом экране? Позвонить, написать, записаться.
3. Не закрывает ли экран баннер cookies на половину высоты или всплывающее окно?
4. Логотип и меню не занимают треть экрана? Шапка на телефоне должна быть компактной.
5. Главное фото не грузится дольше, чем текст? Если сначала долго пустой экран, это проблема скорости. Подробнее в статье про скорость сайта.

Чек-лист: чтение и навигация

6. Текст читается без увеличения. Размер шрифта основного текста на телефоне обычно не меньше 16 пикселей.
7. Нет горизонтальной прокрутки. Страница не «ездит» влево-вправо, таблицы и картинки не вылезают за край.
8. Меню открывается и закрывается одним нажатием, пункты не слишком мелкие.
9. Кнопки и ссылки достаточно крупные для пальца, и между ними есть расстояние. Если вы промахиваетесь, клиенты тоже.
10. Контраст текста достаточный на солнце: светло-серый текст на белом фоне не читается на улице.
11. Страница не прыгает при загрузке, когда вы уже целитесь в кнопку.

Чек-лист: связь и заявки

12. Телефон нажимается и сразу открывает звонок. Номер записан с кодом +48.
13. WhatsApp, Telegram или Messenger открываются по нажатию, если вы их указываете.
14. Форма короткая. На телефоне каждое поле — это лишняя работа. Имя и телефон часто достаточно.
15. Для телефона и email открывается правильная клавиатура: цифры для номера, клавиатура с @ для почты.
16. После отправки формы есть понятное сообщение «Спасибо, отвечу в течение…», а не пустой экран.
17. Адрес открывается в Google Картах одним нажатием, если к вам приходят клиенты.

Больше о том, как сделать формы, которые заполняют, в статье формы заявок.

Чек-лист: всё остальное

18. Всплывающие окна не мешают. Окно подписки, которое закрывает экран и прячет крестик, — верный способ потерять клиента. Google тоже не любит навязчивые всплывающие окна на мобильных.
19. Видео не включается со звуком и не съедает мобильный интернет на первом экране.
20. Вся важная информация есть и на телефоне. Иногда на мобильной версии «для простоты» скрывают цены, часть услуг или отзывы. Для клиента и для Google этого контента нет.

Если у сайта два языка

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

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

Нижняя панель с кнопками

Для сервисного бизнеса на телефоне хорошо работает закреплённая внизу экрана панель с двумя-тремя кнопками: позвонить, написать, записаться. Человек листает страницу услуги, читает цены и отзывы, и в любой момент действие у него под большим пальцем. Главное, чтобы панель была невысокой и не закрывала текст и баннер cookies.

Автоматические проверки, которые стоит запустить

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

• PageSpeed Insights (pagespeed.web.dev): скорость и технические ошибки на мобильных.
• Google Search Console: отчёт «Основные интернет-показатели» показывает, какие страницы медленные именно на телефоне. Подробнее в статье про Google Search Console.
• Режим разработчика в браузере Chrome на компьютере: можно включить эмуляцию телефона и посмотреть, как сайт выглядит на разных экранах. Это полезно, но не заменяет реальный телефон.

Что делать с найденными проблемами

Разделите список на три группы.

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

Нужен разработчик, но это мелочи: кнопки слишком мелкие, телефон не кликабелен, неправильная клавиатура в формах, баннер cookies на пол-экрана. Обычно это часы работы, а не дни.

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

Мобильная версия начинается с плана

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

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

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