Adapt

Коли використовувати

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

Не для створення адаптивного дизайну з нуля. Для цього почніть з /impeccable і формуйте макет з пріоритетом адаптивності. Adapt — для заповнення прогалини “ми ніколи не думали про мобільний”.

Як це працює

Навичка працює через чотири виміри контекстної відповідності:

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

Непорушне правило: адаптуйте, не ампутуйте. Критична функціональність не може зникнути на мобільному лише тому, що це незручно. Знайдіть спосіб вписати її, переробіть взаємодію або перегляньте, чи вона дійсно була критичною на десктопі.

Спробуйте

/impeccable adapt the settings page for mobile

Очікувані зміни:

• Триколонкова сітка стає однокolonною із заголовками секцій як липкими роздільниками
• Бічна навігація переміщується в горизонтальний скролер над контентом
• Перемикачі отримують 8px вертикального padding, щоб відповідати 44px сенсорним цілям
• Вбудований допоміжний текст переміщується в режим “торкніться для відображення”, а не hover
• Секція “Danger zone” повністю розгортається на мобільному замість згортання, оскільки вона містить незворотні дії, і ми хочемо, щоб користувачі чітко їх бачили

Підводні камені

• Ампутація функцій. Якщо мобільна версія приховує те, що десктопна версія може робити, це регрес, а не адаптація. Боріться за функцію.
• Ставлення до мобільного як до “меншого десктопу”. Мобільний — це інший контекст: великі пальці, переривання, короткі сесії. Адаптуйтеся до контексту, а не до ширини вьюпорту.
• Пропуск /impeccable harden після цього. Адаптивні макети виявляють крайові випадки. Запустіть зміцнення після adapt, щоб зловити ті, що з’являються лише на 320px.