Адаптивный дизайн сайта: что должно меняться, кроме ширины блоков

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

Документация web.dev описывает адаптивность как реакцию интерфейса на ширину и возможности устройства. Это больше, чем отдельная мобильная картинка: элементы должны сохранять смысл при промежуточных размерах и изменении ориентации.

Используйте ограниченную ширину текста, гибкие колонки и изображения, которые не выталкивают страницу за край. Проверьте длинные заголовки, таблицы, формы и реальные локализованные подписи. Мета-тег viewport нужен, чтобы мобильный браузер показывал страницу в ожидаемом масштабе.

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

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

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

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

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