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