Проверяйте мобильную версию сайта по действию посетителя: найти нужную страницу, прочитать условия и добраться до заявки или покупки. Одного аккуратного первого экрана недостаточно. Откройте несколько типов страниц на телефоне, пройдите этот путь и запишите конкретные препятствия.
- Какие страницы включить в проверку
- Текст, изображения и горизонтальная прокрутка
- Меню, кнопки и перекрывающие окна
- Как проверить форму с экранной клавиатурой
- Что дополнительно проверить в Яндекс Вебмастере
- Как оформить найденную ошибку
- Видео: инструменты проверки страниц в Яндекс Вебмастере
- Вопросы о мобильной проверке
- Достаточно ли уменьшить окно на компьютере?
- Нужно ли проверять каждую страницу вручную?
- Что делать, если отчёт хороший, а форма не работает?
Какие страницы включить в проверку
Начните с главной, страницы услуги или товара, списка материалов либо каталога и страницы с формой. Если на сайте есть разные шаблоны, возьмите по одному примеру каждого. Исправная главная не доказывает, что длинное название товара или таблица внутри статьи помещаются на экране.
Используйте публичные адреса, доступные посетителям без входа. Запишите URL, модель телефона, браузер и ориентацию экрана. Если проверяете узкое окно на компьютере, отдельно укажите его ширину. Например, 390 пикселей — удобная отправная точка для такой проверки, но не универсальный размер всех телефонов.
Повторите основные действия на настоящем устройстве. Уменьшенное окно помогает заметить проблемы вёрстки, но не показывает во всех подробностях работу экранной клавиатуры, касаний и конкретного мобильного браузера.
Текст, изображения и горизонтальная прокрутка
Прочитайте заголовок, основной текст, подписи и условия рядом с кнопкой. Проверьте, не приходится ли постоянно увеличивать страницу. Длинные слова, адреса и названия не должны обрезаться по краю. Отдельно посмотрите таблицы: если для них предусмотрена прокрутка, читатель должен понимать, что таблицу можно сдвинуть.
Если при движении пальцем в сторону сдвигается вся страница, найдите элемент, который растягивает документ. Прокрутку внутри отдельной таблицы проверяйте отдельно: она не должна сдвигать весь текст страницы. Проверьте ширину картинок, таблиц, длинных строк и встроенных плееров. Для разработчика полезнее запись «на странице услуги таблица выходит за правый край», чем общее «мобильная версия сломана».
Дождитесь загрузки изображений. Посмотрите, не перекрывают ли они подписи и не исчезает ли важная часть товара при обрезке. Если фотография нужна для выбора, её содержимое должно оставаться различимым. Такой же вопрос задайте видео: можно ли увидеть действие и прочитать нужные пояснения в обычном плеере.
Меню, кнопки и перекрывающие окна
Откройте меню, перейдите во вложенный раздел и вернитесь назад. Проверьте, можно ли закрыть меню, не попав по соседней ссылке. Затем попробуйте основные кнопки: их подписи должны объяснять действие, а переходы — приводить на ожидаемую страницу.
Проверьте страницу и до, и после появления баннера, чата или окна с предложением. Закрывающая кнопка должна оставаться доступной. Закреплённая панель не должна постоянно перекрывать текст, цену или отправку формы. Отметьте также, что происходит при повороте телефона.
Если кнопка открывает неверный адрес или лишний раз перенаправляет посетителя, проверьте отдельно цепочку редиректов. Не смешивайте ошибку перехода с недостатком внешнего вида.
Как проверить форму с экранной клавиатурой
Перед тестовой отправкой на своём сайте договоритесь, как отличить её от настоящих заявок. Откройте форму, выберите поле и проверьте, что клавиатура не закрывает активное поле и нужную кнопку. Перейдите к следующему полю, попробуйте исправить введённое значение и прочитайте подсказку.
Проверьте сообщение о незаполненном обязательном поле. Оно должно показывать, что исправить, и находиться там, где его можно заметить. После ошибки уже введённые корректные данные не должны без объяснения пропадать. Не используйте чужие персональные данные для теста.
После тестовой отправки проверьте поступление заявки в согласованном месте: например, в списке заявок сайта или в CRM. Изменение вида кнопки само по себе не подтверждает приём заявки. Если нужно проверить, как отправка отражается в аналитике, пригодится отдельный материал о проверке цели формы в Метрике.
Что дополнительно проверить в Яндекс Вебмастере
Для своего подтверждённого сайта откройте инструмент «Проверка мобильных страниц», укажите нужный URL и запустите проверку. Ориентируйтесь на найденные замечания к конкретной странице. Актуальное расположение инструмента может отличаться от старого видео: ищите его в разделе «Инструменты».
Яндекс рекомендует не допускать выхода содержимого за горизонтальные границы экрана и обеспечивать удобное чтение. Для адаптивных страниц используется настройка области просмотра, а необходимые для отображения CSS и JavaScript должны быть доступны роботу. Если инструмент указывает на такую проблему, передайте разработчику точный адрес и результат проверки.
Успешный технический отчёт не заменяет проверку меню, клавиатуры и формы. Он также не обещает высокие позиции в поиске. Сопоставьте отчёт с тем, что увидели на телефоне: это разные наблюдения, и сохранять полезно оба.
Как оформить найденную ошибку
Для каждой проблемы запишите адрес, устройство и браузер, последовательность действий, ожидаемый и фактический результат. Приложите снимок без личных данных. Например: «На странице услуги открыл меню и выбрал раздел. Панель меню не закрылась и перекрыла форму заявки».
Сначала исправляйте препятствия основному действию: недоступную кнопку, неработающую форму, перекрытое содержимое. Затем разбирайте менее существенные отступы и оформление. После правки повторите исходные шаги на той же странице и проверьте соседнюю страницу с тем же шаблоном. Не закрывайте задачу только по сообщению о сохранении изменений.
Видео: инструменты проверки страниц в Яндекс Вебмастере
В обзоре показана работа с инструментами Вебмастера, включая проверку мобильных страниц. Сравните технические замечания с собственной проверкой на телефоне. Интерфейс сервиса может обновляться; наличие успешного отчёта не подтверждает, что посетитель сможет отправить вашу форму.
Вопросы о мобильной проверке
Достаточно ли уменьшить окно на компьютере?
Так можно найти часть проблем вёрстки. Для проверки касаний, экранной клавиатуры и поведения мобильного браузера повторите основные действия на настоящем телефоне.
Нужно ли проверять каждую страницу вручную?
Начните с разных шаблонов и важных для посетителя действий. Найденную ошибку проверьте на других страницах того же типа. Такой выбор примеров не является доказательством исправности всего сайта.
Что делать, если отчёт хороший, а форма не работает?
Сохраните оба результата и передайте разработчику шаги, на которых форма перестаёт работать. Отчёт о мобильной пригодности и фактическая отправка заявки проверяют разные свойства страницы.
