Сайт может помещаться на экране телефона и всё же мешать клиенту: меню закрывает нужный раздел, клавиатура перекрывает форму, а условия услуги исчезают в короткой мобильной карточке. Проверять адаптивность стоит по завершённому действию — найти предложение, разобраться в условиях и обратиться в компанию.
Ниже — маршрут самостоятельной проверки работающего сайта. Он поможет владельцу собрать воспроизводимые замечания для команды. Общую понятность предложения и визуальную иерархию отдельно рассматривает материал об оценке дизайна глазами клиента.
Что называют адаптивным сайтом и мобильной версией
Адаптивная вёрстка перестраивает страницу под доступную ширину: колонки становятся одним потоком, навигация меняет расположение, изображения вписываются в блоки. В конфигурации responsive один адрес и одна HTML-разметка обслуживают разные устройства; отображение меняется средствами оформления. Это не уменьшенная копия большого экрана: порядок и способ показа элементов могут отличаться.
Отдельная мобильная версия использует другую разметку и отдельные адреса. Возможен и вариант с одним адресом, когда сервер отдаёт разную разметку разным устройствам. Поэтому одинаковый адрес сам по себе не доказывает, что сайт адаптивный, а надпись «мобильная версия» не описывает его устройство.
Отдельная версия может хорошо решать мобильные задачи. Для владельца важно понять, как её поддерживают: откуда берутся цены и характеристики, где обновляются формы, кто проверяет переходы между версиями. Общая база содержимого может снизить риск расхождений, но отдельные интерфейсы всё равно требуют согласованной проверки. У адаптивного сайта также нужно проверять мобильные состояния после изменений; общий шаблон не гарантирует удобства.
Google рекомендует responsive как наиболее простой в реализации и поддержке вариант и использует мобильное содержимое сайта для индексации и ранжирования. Поэтому сравните важное содержимое: услугу, характеристики, условия, контакты. Оно может быть оформлено иначе, например собрано в раскрывающиеся блоки, но не должно исчезать только ради короткой страницы. Если при смене подхода меняются адреса, это отдельная задача сохранения поисковой структуры.
Подготовьте телефон и конкретный маршрут
Начните с реального телефона в обычном браузере, без режима «Версия для компьютера». Возьмите задачу, которую сайт должен обслуживать: найти определённую услугу, выбрать товар или записаться. Проверка одной главной страницы не охватывает карточки, фильтры и формы.
- Запишите условия. Модель устройства, систему и её версию, браузер и его версию, ориентацию экрана, масштаб и настройки размера текста. Отметьте, проверяете ли вы опубликованный сайт или тестовую сборку.
- Выберите точки входа. Пройдите путь с главной страницы, затем откройте напрямую конкретную услугу или карточку — например, по сохранённой ссылке. Человек не обязательно приходит через начало сайта.
- Подготовьте безопасную отправку. Согласуйте с командой тестовую заявку и способ проверить её получение. Для заказа, оплаты или бронирования используйте предусмотренный тестовый режим. Не отправляйте случайные контактные данные.
- Фиксируйте момент затруднения. Короткая запись экрана показывает последовательность действий лучше, чем снимок уже закрытой формы. Перед передачей скройте личные данные и уведомления.
Если есть сведения об устройствах и браузерах посетителей, используйте их для выбора дополнительных проверок. Если таких сведений нет, начните с доступных телефонов и прямо укажите границы проверки. Второй браузер на том же устройстве и другой телефон дают дополнительные наблюдения, но не заменяют согласованный с командой перечень поддерживаемых условий.
Пройдите путь клиента до результата
Найдите услугу или товар через меню
Откройте меню, раскройте нужный раздел и перейдите в него. Проверьте, можно ли прочитать последний пункт длинного меню и закрыть его предусмотренной кнопкой. После закрытия прокрутка страницы должна снова работать. При переходе меню не должно оставаться поверх содержимого.
В карточке найдите условие, необходимое для решения: состав услуги, ограничения, характеристики или способ получения. Раскройте дополнительные сведения. Вернитесь назад средствами браузера и повторите выбор: сохранённые фильтры и позиция в списке могут быть важны для этого сценария. Ожидаемое поведение стоит заранее согласовать, а потерю выбора — записать как наблюдение.
Теперь откройте ту же карточку напрямую на телефоне. Если используется отдельная мобильная версия, проверьте, что переход приводит к соответствующей карточке, а не просто на её главную страницу. Сравните важные условия с компьютерной версией. Отсутствие цены или ограничения нельзя оправдать тем, что мобильный экран меньше.
Нажмите элементы обычным касанием
Попробуйте пункты меню, переключатели, ссылки, стрелки галереи, кнопку закрытия и элементы формы. Не увеличивайте страницу специально, чтобы попасть в них. Отметьте повторные промахи и случайные нажатия на соседнее действие: размер видимого значка и удобная область касания могут отличаться.
Если сведения на компьютере появляются при наведении указателя, найдите способ получить их касанием. Важная подсказка или переход не должны оставаться недоступными человеку с телефоном. У галереи, которую листают жестом, проверьте предусмотренные кнопки: удобно ли добраться до нужного изображения и вернуться.
Проверьте также закреплённую панель, баннер согласия и кнопку чата. Они не должны закрывать необходимые условия, кнопку отправки или управление открытым окном. Проблема может проявиться только у нижнего края страницы или после открытия клавиатуры.
Касания не проверяют работу клавиатуры. Если к телефону можно подключить внешнюю клавиатуру, пройдите тот же маршрут ею: перемещение по элементам, открытие меню, выбор, закрытие окна, переход к форме. Должно быть видно, где находится фокус — текущий элемент для клавиатурного действия. Дополнительный проход в узком окне на компьютере полезен, но его результат не подтверждает поведение телефона.
Заполните форму с открытой экранной клавиатурой
Переходите по полям, вводите и исправляйте данные. Проверьте, остаётся ли понятным назначение поля после ввода, удобно ли вставить данные из буфера и пользоваться доступным автозаполнением. Если сайт предлагает специальную клавиатуру для телефона или электронной почты, убедитесь, что она помогает заполнить поле и не мешает ввести допустимое значение.
При открытой клавиатуре найдите текущее поле, его пояснение и следующее действие. Прокрутите форму, закройте клавиатуру, вернитесь к вводу. Всплывающая форма не должна требовать закрыть её целиком, чтобы добраться до последнего поля. Поверните телефон во время заполнения: содержимое и введённые данные не должны пропадать без понятной причины.
Затем воспроизведите ошибку: оставьте обязательное поле пустым или введите значение, которое по указанным правилам недопустимо. После попытки отправки найдите сообщение, исправьте значение и продолжите. По WCAG автоматически обнаруженная ошибка должна указывать ошибочное поле и быть описана текстом; одной цветной рамки недостаточно. Понятная подсказка об исправлении и сохранение уже заполненных корректных полей делают продолжение проще.
Успешную тестовую отправку проверьте с обеих сторон: понятное подтверждение в интерфейсе и поступление заявки в согласованное место у компании. Первое не доказывает второе. Если на тестовой среде команда воспроизводит сбой отправки, проверьте, что сайт сообщает о неудаче и позволяет продолжить, не выдавая её за успех. Не считайте все состояния формы проверенными, если видели только пустую форму и подтверждение.
Проверьте чтение, ширину и изображения
Обычная страница не должна требовать движения вбок
Верните обычный масштаб. На странице услуги или карточки прокрутите содержимое сверху донизу и попробуйте сдвинуть его вбок. Повторите проверку с открытым меню и сообщениями ошибок. Длинный заголовок, поле или картинка не должны вытягивать обычные блоки за край экрана. Проверьте и вертикальную, и горизонтальную ориентацию телефона.
Отдельно посмотрите таблицы характеристик и широкие схемы. Если для понимания таблицы нужно сохранить связь строк и столбцов, горизонтальное пролистывание её области может быть разумным решением. Должно быть понятно, что есть продолжение, а названия и значения — доступны для сопоставления. Если таблица раздвигает всю страницу и мешает читать окружающий текст, зафиксируйте это отдельно. Подробный разбор таких дефектов есть в статье об ошибках вёрстки.
Увеличение и перестроение — разные проверки
Увеличьте содержимое доступным в браузере способом и попробуйте прочитать условие, открыть меню, исправить поле и отправить тестовую форму. Отметьте обрезанные подписи, наложения и недоступные кнопки. Если увеличение жестом не работает, это повод для проверки настроек сайта и браузера; само наблюдение ещё не устанавливает причину.
В WCAG 2.2 критерий увеличения текста предусматривает увеличение до 200% без потери содержания и функций, кроме субтитров и изображений текста. Проверяются также доступные промежуточные степени увеличения. Отдельный критерий перестроения требует, чтобы вертикально прокручиваемое содержимое при ширине 320 CSS-пикселей сохраняло информацию и функции без необходимости прокрутки в двух направлениях. Для частей, которым двумерная компоновка необходима по смыслу или для использования, например таблиц данных и карт, предусмотрено исключение.
CSS-пиксели не равны паспортному разрешению экрана. Увеличение двумя пальцами может лишь приблизить уже построенную страницу и не изменить её компоновку. Поэтому проверка жестом и проверка перестроения на заданной ширине не взаимозаменяемы. Точный размер области и условия измерения попросите проверить разработчика; обычный телефонный просмотр помогает заметить барьер, но не заменяет это измерение.
Картинка должна помогать выбору
В карточке рассмотрите сам товар или результат услуги. Проверьте, не обрезана ли значимая часть фотографии, можно ли открыть нужный ракурс, читается ли информация в схеме. Существенные условия не должны оставаться только мелкой надписью внутри изображения.
Повторите открытие страницы через доступную мобильную сеть, если до этого пользовались Wi-Fi. Наблюдайте, можно ли читать и действовать, пока загружаются изображения, не сдвигается ли нужная кнопка в момент касания. Запишите условия сети: единичное ожидание не позволяет назвать универсальное время загрузки.
Маленький размер картинки на экране не означает, что телефон загрузил небольшой файл. Подбор подходящих размеров изображений и их фактическую загрузку проверяет команда. Владельцу полезнее передать конкретный симптом — например, фотография появляется поздно и сдвигает форму, — чем назначать причину по внешнему виду.
Что передать команде и когда повторить проверку
Для каждого замечания сохраните страницу, условия устройства, шаги, ожидаемое и фактическое поведение. Отдельно отметьте последствия: задача заблокирована, потребовалось повторное действие или проблема только визуальная. Не смешивайте наблюдение с предполагаемым исправлением.
Учебный пример записи: «На карточке услуги в вертикальной ориентации открыть заявку, заполнить первое поле и перейти к последнему. При открытой клавиатуре нижняя панель закрывает кнопку отправки; прокрутка формы не помогает. Ожидается возможность завершить заявку. Приложена запись экрана и версии системы и браузера». Такая запись позволяет воспроизвести проблему; фраза «плохо работает на мобильном» оставляет команде поиски.
После исправления повторите именно затронутый маршрут и связанные состояния. Например, изменение высоты формы нужно проверить с клавиатурой, ошибкой, длинным текстом и в обеих ориентациях. Если обновляются общие меню или карточки, команда должна проверить другие места их использования.
Результат самостоятельной проверки — список наблюдений и успешно пройденных сценариев в указанных условиях. Он не подтверждает соответствие WCAG, работу во всех браузерах или доступность для всех способов взаимодействия. W3C прямо разграничивает первичные простые проверки и полную оценку доступности. Работа экранного диктора, корректные названия элементов и другие невидимые свойства требуют отдельной проверки.
Если задача — исправить мобильное поведение уже работающего сайта, следующий шаг — мобильная адаптация сайта с перечнем обнаруженных препятствий. Если нужно реализовать согласованные макеты и состояния, предмет обсуждения — адаптивная вёрстка сайта. В обоих случаях заранее согласуйте маршруты, устройства и результат приёмки: это превращает обещание «будет удобно на телефоне» в проверяемую задачу.
