Adapt

/impeccable adapt

Good fit

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

Когда использовать

/impeccable adapt — для адаптации дизайна, созданного для одного контекста, к другому. Мобильный с десктопа, планшетный с мобильного, печать с веба, встраиваемый с автономного, email с дашборда. Обращайтесь к нему, когда исходный дизайн крепкий, но разваливается на других контрольных точках, на тач-устройствах или в другом контейнере.

Не для создания адаптивного дизайна с нуля. Для этого начните с /impeccable и создавайте макет mobile-first. Adapt — для случая «мы никогда не думали о мобильных».

Как это работает

Навык проходит через четыре измерения контекстной адаптации:

1. Контрольные точки и плавный макет: коллапс мультиколонки в одноколоночный, корректировка clamp-диапазонов, введение новых контрольных точек там, где дизайн реально ломается.
2. Зоны касания: минимум 44px области нажатия, достаточные интервалы между смежными целями, увеличенные зоны касания по сравнению с визуальными границами, где нужно.
3. Паттерны навигации: десктопные боковые панели становятся мобильной нижней навигацией или выезжающими панелями, плотные тулбары сворачиваются в меню, hover-состояния получают touch-аналоги.
4. Приоритет контента: определение, что должно быть видимым, что может свернуться в раскрывающиеся блоки, что может быть удалено для данного контекста.

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

Попробуйте

/impeccable adapt the settings page for mobile

Ожидаемые изменения:

• Трёхколоночная сетка становится одноколоночной с заголовками секций как sticky-разделителями
• Навигация боковой панели перемещается в горизонтальный скроллер над контентом
• Тогглы получают 8px вертикального padding, чтобы соответствовать 44px зонам касания
• Встроенный вспомогательный текст перемещается в tap-to-reveal вместо hover
• Секция «Опасная зона» полностью раскрывается на мобильных вместо сворачивания, потому что содержит необратимые действия, и мы хотим, чтобы пользователи видели их чётко

Подводные камни

• Ампутация функций. Если мобильная версия скрывает то, что десктопная может делать — это регресс, а не адаптация. Боритесь за функцию.
• Восприятие мобильных как «уменьшенного десктопа». Мобильные — это другой контекст: пальцы, прерывания, короткие сессии. Адаптируйтесь к контексту, а не к ширине viewport.
• Пропуск /impeccable harden после. Адаптивные макеты обнажают крайние случаи. Запустите hardening после adapt, чтобы поймать те, которые проявляются только на 320px.

Related commands

• Layout
• Clarify
• Harden