Сначала остаются смысл, главное действие и критические данные.
Мобильный экран требует решений
Сужение меняет не только ширину. Колонки складываются, вторичное уходит ниже, а важное действие должно остаться доступным.
Колонки складываются, панели сокращаются, таблицы получают локальную прокрутку.
Кнопки не превращаются в микроскопические цели и не прижимаются друг к другу.
Быстрая проверка: Адаптивность - это сохранение задачи при другой геометрии, а не пропорциональное уменьшение всей страницы.
WCAG Reflow требует сохранять информацию и функцию без горизонтальной прокрутки при ширине 320 CSS px для обычного контента. GOV.UK начинает мобильную компоновку с одной колонки.источники
Сравните телефон
Первая версия уменьшает десктоп. Вторая пересобирает приоритеты под один вертикальный маршрут.
Вариант А: десктоп стал мелким
Большой заголовок
Мелкий текст
Фото
Отзывы
Купить
Сбой: Две колонки, маленький текст и крошечная кнопка сохраняют геометрию, но теряют удобство.
Вариант Б: приоритеты пересобраны
Результат курса
Короткое пояснение для мобильного экрана.
Записаться
Программа
Отзывы
Система: Одна колонка, ранний CTA, читаемый текст и сохраненный порядок решения.
Что перенести первым?
На десктопе справа от формы стоит большая карточка с дополнительной статистикой. На телефоне она отодвигает кнопку ниже первого экрана.
Мини-лаборатория
Сохраняйте главное действие, а не исходную симметрию.
Исправьте мобильный первый экран
На ширине 360 px заголовок занимает 9 строк, изображение идет первым, а CTA появляется после двух экранов прокрутки.
Симптомы на 360 px
Изображениепервое
Заголовок9 строк
CTAпосле 2 экранов
Прокруткагоризонтальная
Какая команда лучше?
Дайте задачу агенту
Используйте шаблон как рамку разговора. Сначала наблюдение и критерии, затем изменение.
Проведи аудит только мобильной версии на ширинах 320, 360 и 390 px.
1. Проверь порядок внимания и положение главного действия.
2. Найди горизонтальную прокрутку, обрезанный текст и элементы шире экрана.
3. Проверь читаемость текста и размер целей касания.
4. Для каждой десктопной колонки реши: сложить, перенести ниже, сократить или оставить в локальной прокрутке.
5. Не удаляй информацию и функции без объяснения.
6. Критерий: задача страницы решается одной вертикальной прокруткой без увеличения масштаба.Урок освоен, если вы можете
Ваш преподаватель - агент
Попросите агента сделать отдельный аудит на 320, 360 и 390 px и перечислить только различия в приоритетах, а не косметические расхождения.