Приёмка адаптивного сайта: сценарии, которые скрывает красивый макет

Мобильный макет показывает один момент работы интерфейса. Готовый сайт должен выдерживать длинные названия, ошибки, пустые результаты, изменение выбора и возврат назад. Мы предлагаем принимать адаптивность по сценариям, а не по сходству одного скриншота с дизайном. Такая проверка помогает найти проблемы, которые становятся заметны только при настоящем использовании.

Проверяйте содержание разной длины

Возьмите короткое и длинное имя, несколько вариантов названия услуги, подробное описание и карточку без необязательного изображения. Эти данные показывают, насколько устойчивы сетка и отступы. Важно не только отсутствие горизонтальной прокрутки: текст должен оставаться читаемым, а действия — доступными.

Устройства различаются шириной, масштабом текста и поведением клавиатуры. Поэтому фиксированный набор «компьютер и телефон» лучше дополнить промежуточными ширинами. Проверьте меню, фильтры и форму при появлении экранной клавиатуры. Декоративные элементы не должны перекрывать поля или подтверждение отправки.

Пример сценариев: Psyfreedom

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

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

Ошибки и пустые состояния — часть дизайна

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

Подписи полей должны оставаться видимыми после ввода. В рекомендациях W3C WAI объясняется роль явных обозначений элементов формы; для приёмки это означает возможность понять поле без догадок по месту в макете. Проверка клавиатурой дополнительно помогает обнаружить недоступные действия.

Составьте короткий протокол

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

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