Чутливий дизайн проти адаптивного: який кращий вибір для дизайнерів?
Google завжди рекомендував чуйний веб-дизайн (RWD), особливо після того, як було впроваджено велике оновлення на 4/21/15, яке займає мобільні сайти вище.
У оновленнях не зазначено, що ви повинні використовувати адаптивний дизайн, але лише щоб сайт був доступний на мобільних пристроях з хорошою UX та продуктивністю.
Зважаючи на це, давайте вивчимо плюси та мінуси адаптивного та чуйного дизайну щодо продуктивності та UX.
Однією з найбільших дискусій, яку ми спостерігали з моменту зростання мобільних пристроїв, є те, чи варто вибирати розробку чуйного, адаптивного веб-дизайну (AWD) або окремого веб-сайту для мобільних пристроїв (з власною m. URL-адресою). Для цілей цієї дискусії ми залишимо окремий m. сайти, як видається, є найменш улюбленим рішенням для дизайнерів та підприємств, оскільки вони повинні створюватися окремо (що нараховує більше перших витрат та витрат на обслуговування).
У чому різниця між адаптивним та чуйним дизайном?
Отже, спочатку, які ключові відмінності між чуйним та адаптивним дизайном?
Простіше кажучи, чуйність є рідинною і підлаштовується під розмір екрана, незалежно від того, який цільовий пристрій. Чуйний використовує медіа-запити CSS для зміни стилів на основі цільового пристрою, такого як тип дисплея, ширина, висота тощо, і лише один із них необхідний для адаптації сайту до різних екранів.
З іншого боку, адаптивний дизайн використовує статичні схеми на основі точок прориву, які не реагують, коли вони завантажені спочатку. Адаптивний працює для визначення розміру екрана та завантаження відповідного макета для нього - як правило, ви створили б адаптивний сайт для шести загальних ширин екрана:
- 320
- 480
- 760
- 960
- 1200
- 1600
На поверхні здається, що адаптив вимагає більше роботи, оскільки вам доведеться розробити макети як мінімум на шість ширин. Однак реагування може бути складнішим, оскільки неправильне використання медіа-запитів (або взагалі їх не використовується) може спричинити проблеми з відображенням та ефективністю.
Примітка редактора: У UXPin ви можете використовувати різні точки перерви. Якщо ви хочете пограти з ними, почніть безкоштовну пробну версію.
Останній, зокрема, викликав багато дискусій протягом останніх кількох років, оскільки у багатьох випадках на багатьох веб-сайтах розміщена повна модель робочого столу, яка, навіть якщо не завантажується на мобільний пристрій, значно уповільнює сайти. Щоб обійти це, ви можете скористатися медіа-запитами - але буде кілька компромісів, оскільки чуйний сайт ніколи не буде таким швидким, як спеціалізований мобільний сайт.
Навіщо використовувати адаптивний дизайн?
Адаптив корисний для модернізації існуючого сайту, щоб зробити його більш зручним для мобільних пристроїв. Це дозволяє взяти під контроль дизайн та розробляти конкретні, декілька вікон перегляду. Кількість вікон перегляду, які ви вирішите розробити, залежить лише від вас, вашої компанії та загального бюджету. Однак, це дає вам певний контроль (наприклад, над вмістом та компонуванням), який у вас не обов'язково буде використовувати адаптивний дизайн.
Як правило, ви б почали з дизайну вікна перегляду з низькою роздільною здатністю і працювали над тим, щоб дизайн не обмежувався вмістом.
Як згадувалося раніше, стандартно розробити шість резолюцій. Однак ви можете прийняти більш обгрунтоване рішення, переглянувши свою веб-аналітику для найбільш часто використовуваних пристроїв, а потім створивши дизайн для цих оглядів.
Якщо ви хочете створити адаптивний сайт з нуля, це теж нормально. Почніть знову, розробляючи найменшу роздільну здатність і працюйте вгору. Потім ви можете використовувати медіа-запити, щоб розширити макет для вікон перегляду з більшою роздільною здатністю. Однак якщо ви розробляєте проекти для декількох дозволів, ви можете виявити, що це призводить до того, що макет «стрибне» під час зміни вікна.
Це може бути додатковою роботою по розробці та розробці сайту з адаптивним для декількох вікон перегляду, тому його зазвичай використовують для доопрацювання.
Навіщо використовувати чутливий дизайн?
Більшість нових веб-сайтів зараз використовують адаптивну роботу, що було спрощено для менш досвідчених дизайнерів та розробників, завдяки наявності тем, доступних через системи CMS, такі як WordPress, Joomla та Drupal.
Чуйний не пропонує стільки контролю, скільки адаптивного, але вимагає набагато меншої роботи як для створення, так і для підтримки. Реактивний макет також є рідким і в той час, як адаптивний може і використовувати відсотки, щоб дати більше відчуття рідини при масштабуванні, вони знову можуть спричинити стрибок при зміні вікна. Наприклад, на зображенні нижче, на якому зображено текуче розташування, дизайнер використовує відсоткові ширини, щоб вигляд був налаштований для кожного користувача.
Завдяки чуйності, ви будете проектувати з урахуванням всіх макетів, і це, звичайно, може заплутати процес і зробити його досить складним. Це означає, що вам слід зосередитись на створенні вікна перегляду для середньої роздільної здатності, а потім можна використовувати медіа-запити, щоб згодом налаштувати низькі та високі роздільні здатності.
Тож по суті, зазвичай краще використовувати адаптивну для нових проектів та адаптивну для модернізації.
Міркування, які слід враховувати
Як було обговорено раніше, чутливі сайти можуть постраждати, коли справа стосується швидкості сайту (якщо вони не належним чином реалізовані).
Реагує також потрібно більше в способі кодування, щоб гарантувати, що сайт підходить до кожного екрану, що має доступ до нього. Однак додаткова робота є дискусійною (порівняно з адаптивним дизайном), оскільки адаптивний дизайн вимагає розробити та підтримувати окремий HTML та CSS-код для кожного макета. Модифікація адаптивних сайтів також є складнішою, оскільки, швидше за все, вам доведеться переконатися, що все ще працює на всьому світі (наприклад, SEO, вміст та посилання), коли настає час впровадження.
Слід, звичайно, враховувати і досвід користувача. Оскільки чуйний по суті переміщує вміст навколо, щоб плавно помістити вікно пристрою, вам потрібно буде приділити особливу увагу візуальній ієрархії дизайну, коли він зміщується навколо.
За словами Емі Шейд, «Чуйний дизайн часто перетворюється на розгадку загадки - як реорганізувати елементи на більших сторінках, щоб вони підходили стрункіші, довші сторінки чи навпаки. Однак недостатньо забезпечити, щоб елементи вміщувалися на сторінці. Для того, щоб гнучка конструкція була успішною, дизайн також повинен бути придатним для використання у будь-якій роздільній здатності та розмірах екрана ".
Таким чином, не існує ярликів до тієї методики, яку ви вирішили використовувати - обидві вимагають роботи, створеної зі створення сайту, який по суті є одним розміром. Реагуючий має незначну перевагу, тому що ви не будете, рухаючись вперед, потрібно витрачати дуже багато часу на обслуговування сайту.
Рішення - Адаптивний та чутливий дизайн
Коли справа доходить до цього, головне - врахувати свою аудиторію насамперед незалежно від того, яку техніку дизайну ви прийняли. Коли ви точно дізнаєтеся, хто вони та на які пристрої вони мають доступ до сайту, тоді простіше спроектувати їх на увазі, коли мова йде про макет, вміст тощо.
Це також багато в чому залежатиме від того, чи є у вас вже існуючий сайт, з яким ви працюєте, або ви починаєте з нуля. Чуйний дизайн став технікою перехідного дизайну, і вважається, що зараз близько 1/8 веб-сайтів використовують чуйність (хоча даних про те, скільки використовує адаптивне, мало, немає). Рівень прийняття для чуйних теж швидко зростає і майже досяг такого рівня, як і окремі мобільні сайти.
Зважаючи на це, можна з упевненістю сказати, що реагування зазвичай є кращою технікою, хоча тільки через триваючу роботу, яка вимагає адаптивного дизайну.
Однак якщо у клієнта чи компанії є бюджет, то адаптив може бути кращим вибором, згідно з тестом, проведеним Catchpoint. Вони створили два сайти в WordPress, один використовував стандартну тему, що реагує на WP TwentyFourteen, а другий використовував плагін під назвою Wiziapp.
Плагін обслуговує мобільну тему для користувачів залежно від пристрою, з якого вони отримують доступ до сайту, а також пропонує розширені параметри конфігурації, щоб ви могли надалі впорядкувати процес.
Результати часу завантаження говорять самі за себе:
Слід зазначити, що оптимізація взагалі не проводилася, але це свідчить про те, що чуйний сайт завантажує все, що потрібно для робочого столу. Отож, ця тема зовсім не дає дуже гарної ефективності.
Знову ж таки, це можна подолати за допомогою медіа-запитів, але вищезазначене слугує хорошим прикладом того, чому чуйний дизайн - хоча і є популярним вибором - не завжди є найкращим для мобільних пристроїв. Поки щось краще не виходить, важко знати, що ми можемо з цим зробити, крім того, як навчитися правильно кодувати та реалізовувати чудовий чуйний сайт.
Тож висновок?
Чуйний дизайн залишатиметься популярним, але це може бути тому, що ми ще не знайшли гідного рішення для важкого обслуговування, яке вимагає адаптація. Адаптивний дизайн не вимер, хоча, незважаючи на очевидну любов до реагування в Інтернеті, тож можливо - принаймні теоретично - ми побачимо, що ще з’являться якісь вдосконалення, які витягнуть чуйний веб-дизайн з води.