Сайты и дизайн

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

Мария Орещенкова
Мария Орещенкова

Веб-дизайнер и маркетолог · 3 мин чтения

Мария держит большой телефон на ладони, миниатюрный клиент тянется к кнопке; надпись «Проверь в ладони».

Коротко

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

С чего начать

Проверьте содержание

Заголовки должны сохранять смысл, таблицы — оставаться читаемыми, изображения — показывать важную часть объекта. Убедитесь, что горизонтальная прокрутка страницы не мешает чтению. Длинные названия услуг заслуживают отдельной проверки.

Пройдите взаимодействия

Откройте меню, FAQ и форму. Проверьте кнопки закрытия, выбор вариантов и возврат назад. При появлении клавиатуры нужное поле и сообщение ошибки должны быть доступны. Фиксированная панель должна оставлять место для текста и действий.

Испытайте обычные условия

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

Сценарий проверки на телефоне

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

Проверьте форму в двух состояниях: с закрытой и открытой клавиатурой. Введите данные, перейдите к следующему полю, исправьте ошибку и убедитесь, что сообщение объясняет, что нужно сделать. Затем закройте клавиатуру и проверьте доступность отправки. Если используется фиксированная панель, она не должна перекрывать поле или сообщение.

Таблицу можно прокрутить по горизонтали →

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

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

Практический шаг

Что сделать дальше

  1. Откройте все основные страницы на телефоне.
  2. Отправьте тестовую заявку с разрешённым тестовым контактом.
  3. Проверьте меню, ошибки и возврат к странице.

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

Достаточно ли уменьшить окно компьютера?

Это полезная предварительная проверка; реальный телефон добавляет клавиатуру и сенсорное управление.

Какие страницы проверять в первую очередь?

Посадочные страницы рекламы, карточки услуг и формы с основными обращениями.

Мария Орещенкова
Мария ОрещенковаВеб-дизайнер и маркетолог

Я создаю сайты и веду Яндекс.Директ. В блоге разбираю, как связать содержание страницы, рекламу и работу с обращениями.

Об авторе ↗

Применить к вашему бизнесу

Покажу, что изменить на вашем сайте

Разберу предложение, структуру и путь до обращения. Для нового сайта подготовлю концепцию, для действующего — аудит.

  • Понятное предложение
  • Структура страницы
  • Следующий шаг клиента
Мария Орещенкова
Мария ОрещенковаВеб-дизайнер и маркетолог

Начнём с вашей задачи. Разберу её лично и предложу следующий шаг.

Рассчитать проект

Первичный разбор — бесплатно.

Бесплатный разбор вашей задачи

Рассчитаю стоимость
и сроки

Оставьте контакт — уточню задачу и назову цену. Если сайт уже есть, добавьте ссылку.

Как вам удобнее общаться?

Настройки cookie

Выбор сохраняется в браузере. Необязательные счётчики включаются только с вашего согласия.