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

Начните с содержания и первого экрана

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

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

Проверьте меню, кнопки и закреплённую шапку

Все разделы должны открываться без необходимости навести курсор: на телефоне основной способ взаимодействия — касание. Раскрывающееся меню должно закрываться понятным действием и не блокировать прокрутку после перехода. Проверьте вложенные пункты и возврат назад.

Кнопки и соседние ссылки не должны располагаться настолько тесно, что человек случайно выбирает другое действие. Закреплённая шапка полезна, пока не закрывает заголовки, поля и сообщения об ошибках. Пройдите внутренние якоря: нужный раздел должен появляться ниже шапки, а не прятаться под ней.

Пройдите форму с открытой клавиатурой

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

• Телефон и email вводятся без борьбы с маской.
• Ошибка объясняет, что именно нужно исправить.
• Незаполненные данные не теряются после исправления одного поля.
• Подтверждение появляется после успешной отправки.
• Менеджер получает заявку с корректным источником.

Надпись «Спасибо» сама по себе не доказывает доставку. Проверяйте обе стороны процесса: интерфейс посетителя и получение обращения.

Уберите горизонтальную прокрутку и визуальные скачки

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

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

Оцените загрузку и отклик

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

Для технической проверки используют показатели Core Web Vitals: LCP описывает загрузку основного содержимого, INP — отзывчивость взаимодействий, CLS — стабильность расположения элементов. Хорошие ориентиры: LCP до 2,5 секунды, INP до 200 миллисекунд и CLS не выше 0,1. Это показатели опыта пользователей, а не гарантия продаж или высоких позиций. Один лабораторный замер не заменяет наблюдения за реальными посещениями.

Как организовать проверку без хаоса

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

Записывайте ошибку вместе с адресом страницы, устройством и шагами воспроизведения. «На телефоне всё плохо» трудно исправить; «после открытия меню на странице услуги нельзя прокрутить список» — конкретная задача. Если проблемы затрагивают много сценариев, пригодится доработка дизайна; отдельные ошибки можно устранить в рамках технических правок.