Що таке адаптивний дизайн? (і чи відрізняється він від чуйного дизайну?)

1

Від автора: всі ми повинні бути знайомі з терміном чуйний дизайн, але описує він саме те, про що ми думаємо? Для нас чуйний дизайн це процес створення сайтів, які правильно відображаються на всіх пристроях і екранах. Однак деякі вважають, що такий дизайн краще називати «адаптивним».

Чи це Правда, чи це одне і те ж?

Або ж адаптивний дизайн означає щось зовсім інше?

І до чого більше відноситься рідкий дизайн?

На перший погляд питання досить простий, але вивчивши тему, я зрозумів, що в ньому є другий сенс, про який я і не думав. Питання навіть досить спірні. Існує два домінуючих визначення адаптивності:

Визначення 1: чуйний дизайн – це селфи палиця – адаптивний дизайн – це парасолька

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

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

Что такое адаптивный дизайн? (и отличается ли он от отзывчивого дизайна?)

Є пара GIF-зображень, які наочно ілюструють концепцію.

Что такое адаптивный дизайн? (и отличается ли он от отзывчивого дизайна?)

У 2015 році Джеф Грехем підкреслив різницю підходів. Він сказав, що чуйні макети адаптуються під ширину вікна браузера в будь-який момент часу, в той час як адаптивні макети адаптуються тільки під задані брейкпоинты.

Джеф сказав, що чуйний дизайн заснований на відсотках (тобто те ж саме, що і рідкий дизайн), а адаптивний дизайн заснований на фіксованих одиницях виміру. Обидва підходи використовують медіа запити.

Визначення 2: адаптивний дизайн змінюється від всіх параметрів пристрою (не тільки екрану)

Якщо заглянути в коментарі до статті Джефа, можна помітити, що не всі згодні з цим твердженням.

Коментар зверху: «Чуйний дизайн може бути рідким або фіксованим, тобто він може бути адаптивним. Різниця в тому, що чуйному дизайну не потрібно знати, який браузер ви використовуєте, він відповідає на розмір вікна браузера і перебудовує під нього макет. І навпаки, адаптивний дизайн підлаштовується під настроювання браузера спеціально, він може приймати в розрахунок, а може й не брати в розрахунок поточний розмір вікна браузера.» zzzzBov.

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

В цьому спорі бере участь безліч великих імен, таких як UXPin і Mozilla, але до спільної думки ніхто так і не прийшов.

Що я думаю на цю тему

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

Якщо сайт не відповідає на ваше з ним взаємодію, він не дуже чуйний. Якщо ж сайт не може адаптуватися під оточення (тобто екран пристрою), він не дуже адаптивний. Обидва чинники значно впливають на UX.

Чому чуйний дизайн – це не чуйний дизайн

Чуйність – це дія, результат іншої дії. Наприклад, якщо кнопка на сайті змінила фоновий колір при наведенні на неї курсора миші. Дія тут – наведення курсору, відповідь – зміна фонового кольору.

Звичайно, якщо ми говоримо, що сайт чуйний, ми думає, що він адаптується під будь-який розмір екрану на всіх пристроях, але насправді це має означати, що сайт відповідає на взаємодію з користувачем. І ось чому.

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

Чому, на мій погляд, адаптивний дизайн більш точне визначення

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

Тоді що таке рідкий дизайн?

На початку 2000-их розгорілися великі дебати навколо теми «фіксований макет або рідкий». Рідкі макети використовували відсотки і розтягувалися під розмір вікна браузера. Фіксовані дизайни обмежувалися одним макетом з заданою шириною в пікселях.

Проблеми були в обох макетах. Фіксовані макети чудово виглядали на одних екранах і були абсолютно непридатні до використання на маленьких екранах. Рідкі макети були більш гнучкі, але на широких моніторах виглядали занадто вузько і розтягнуто.

Етан Маркотт прийшов до ідеї чуйного дизайну. Класичний «тягучий» RWD – це більш доросла версія рідкого дизайну. Дизайн розтягується, щоб заповнити вікно і перебудовується за необхідності.

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

Висновок

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

А у вас коли-небудь були моменти, коли ви промовляли «адаптивний дизайн», а люди не розуміли? Пишіть про це в коментарях, мені цікаво!