Чуйний дизайн

Адаптивний дизайн — це підхід до створення веб-інтерфейсів, які адаптуються до розміру та можливостей пристрою, що їх відображає, використовуючи гнучкі макети, гнучкі зображення та медіа-запити CSS для перерозподілу єдиної кодової бази в різних областях перегляду. Запроваджений як названа практика Ітаном Маркоттом у 2010 році, він замінив попередній підхід підтримки окремих сайтів для настільних комп’ютерів та мобільних пристроїв і тепер є стандартним очікуванням практично для всієї веб-роботи.

Його головна перевага полягає в підтримці однієї реалізації, а не кількох. Окремі мобільні сайти з часом розходяться, накопичують невідповідності, ускладнюють аналітику та індексацію пошуку, а також подвоюють вартість кожної зміни. Адаптивна реалізація зберігає уніфікований контент, URL-адреси та функціональність, що також відповідає тому, як пошукові системи індексують та ранжують сторінки, оскільки індексація з урахуванням мобільних пристроїв оцінює мобільне відображення тієї самої URL-адреси.

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

Найчастіше адаптивні реалізації на практиці зазнають невдачі саме в продуктивності. Макет, який візуально адаптується, водночас завантажуючи зображення розміру робочого столу, повні пакети JavaScript та непотрібні компоненти, створює сторінку, яка виглядає правильно, але погано працює саме на тих пристроях та з’єднаннях, які найменше здатні поглинути витрати. Адаптивні зображення з відповідними наборами джерел, умовне завантаження компонентів, які не відображаються в малих вікнах перегляду, та відкладення некритичних ресурсів – це те, що робить цей підхід ефективним у польових умовах, а не лише в браузері, розмір якого змінено на робочому столі.

Для тестування адаптивної роботи потрібні реальні пристрої, а не лише зміна розміру браузера. Емулятори не відтворюють неточність дотику, фактичні мережеві умови, обмеження пам'яті на середньому рівні обладнання або те, як системні клавіатури та браузер Chrome споживають вертикальний простір. Багато найпоширеніших дефектів, включаючи введення, приховане клавіатурою, залипаючі елементи, що займають більшу частину невеликого екрана, та горизонтальне переповнення, спричинене одним широким елементом, невидимі в емуляції робочого столу та одразу помітні на телефоні.

Адаптивна робота також повинна враховувати масштабування та зум тексту, які часто ігноруються та є поширеною причиною проблем зі доступністю. Макет, створений з фіксованими розмірами пікселів, може коректно перерозподіляти зображення по ширині пристрою, але повністю зламатися, коли користувач збільшує розмір тексту браузера за замовчуванням або масштабується до двохсот відсотків, що є налаштуванням, на яке постійно покладається значна кількість людей. Контент, який переповнює контейнери, обрізається або вимагає горизонтального прокручування за цих умов, не відповідає стандартам зручності використання та доступності. Тестування зі збільшеним розміром тексту та високими рівнями масштабування займає лічені хвилини та виявляє категорію дефектів, яку тестування ширини пристрою ніколи не виявляє, оскільки ці два обмеження по-різному навантажують макет.

Оскільки адаптивність охоплює макет, контент-стратегію та доставку, її рідко можна покращити лише коригуванням точок зупинки. дизайн продукту Довготривалий підхід полягає у визначенні макета, інтервалів та поведінки компонентів у різних областях перегляду в системі дизайну, щоб нові сторінки за замовчуванням успадковували правильну поведінку. Сторона продуктивності належить веб-продуктивність робота, оскільки різниця між адаптивним сайтом, який конвертує на мобільних пристроях, і тим, який цього не робить, зазвичай полягає у вазі та стратегії завантаження, а не у макеті.