Адаптивное поведение и контрольные ширины

Адаптив — это одна страница с понятным смыслом на разных ширинах, а не набор несвязанных картинок для компьютера и телефона.

Читайте сверху вниз: ряд становится колонкой, имена и смысловой родитель сохраняются. Для такого перестроения не нужна структурная трансформация. Смену родителя или другую структуру объявляют отдельно. Открыть в полном размере.

Визуальный экскурс показывает, зачем эти решения нужны команде.

Начните с подготовленных корней

Для каждого корня сохраняйте страницу и состояние, меняя только контекстную ширину:

home [page=home] [bp=1440] [view=default]
home [page=home] [bp=375] [view=default]

Выбирайте ширины, которые команда действительно будет реализовывать. Ширина скриншота не становится продуктовой контрольной шириной автоматически.

Что может меняться

При изменении доступного места могут меняться:

• размер и отступы;
• число колонок;
• порядок внутри одного понятного родителя;
• видимость необязательного контента;
• объявленная форма представления, например таблица превращается в список раскрытий.

Смысл страницы, идентичность контента, действия и порядок чтения должны оставаться понятными.

Не меняйте данные ради сетки

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

Проверяйте промежуточные ширины

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

Объявляйте настоящее преобразование

Если структура меняется, укажите источник, результат и то, что сохраняется:

• записи и контент;
• действия и связи полей;
• выбор и открытое состояние;
• порядок чтения и фокуса.

Запишите сопоставление в responsive.transformations[], как описано в контракте переноса. Имя вроде table-mobile не объясняет, что меняется и что сохраняется.

Направление и доступность

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

Когда можно продолжать

Адаптив готов, когда команда понимает, что сохраняется, что меняется, при каком условии и какие данные или действия остаются теми же. Структурный справочник см. в разделе осей вариативности.