Проверка мобильной версии сайта: чек-лист на 10 пунктов

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

Мобильность пересекается с удобством интерфейса, которое шире разобрано в обзоре аудита юзабилити и скорости. Скорость на телефоне — отдельный чек-лист про Core Web Vitals.

Подготовка

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

Чек-лист на 10 пунктов

1. Метатег viewport. В коде страницы должен быть тег, без которого телефон покажет уменьшенную копию десктопа:

   <meta name="viewport" content="width=device-width, initial-scale=1">
   

2. Нет горизонтальной прокрутки. Проведите пальцем влево-вправо на каждом шаблоне. Если страница сдвигается, какой-то блок шире экрана: таблица, картинка, длинный адрес, встроенное видео.

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

4. Кнопки и ссылки удобно нажимать. Пальцем, а не стилусом: элементы достаточно крупные и не стоят вплотную друг к другу. Особенно проверьте меню, фильтры, пагинацию и ссылки в подвале.

5. Меню открывается и закрывается. Все пункты доступны, вложенные разделы раскрываются, меню не перекрывает содержимое намертво.

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

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

8. Телефон и адрес кликабельны. Номер открывает звонок, адрес — карту. Для локального бизнеса это часто главный сценарий, подробнее — в локальном аудите.

9. Содержимое совпадает с десктопом. Тексты, характеристики, цены, отзывы и внутренние ссылки не вырезаны в мобильной версии. Свёрнутые блоки допустимы, удалённые — нет.

10. Таблицы и изображения адаптированы. Широкие таблицы прокручиваются внутри своего блока, а не ломают всю страницу; картинки уменьшаются по ширине экрана.

Поведение мобильных посетителей

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

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

Таблица проверки

Пример на условном сайте

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

Итог проверки

• В коде есть корректный viewport, горизонтальной прокрутки нет ни на одном шаблоне.
• Текст читается без увеличения, кнопки и ссылки нажимаются с первого раза.
• Формы работают на телефоне, тестовая заявка доходит.
• Содержимое мобильной версии совпадает с десктопной.
• Поведение мобильных посетителей в Метрике сопоставлено с найденными проблемами.

Вопросы и ответы

Достаточно ли проверить сайт в эмуляторе браузера?

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

Можно ли скрывать часть текста на мобильной версии?

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

Нужна ли отдельная мобильная версия на поддомене?

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

Как понять, что мобильная версия мешает продажам?

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