Кросплатформність: реагуючий та адаптивний вебдизайн

Коли ви працюєте над макетом дизайну для плаката, вам необхідно створити композицію в межах відповідного формату (наприклад, А2). Сам плакат може розміщуватись горизонтально або вертикально. Про це ви домовляєтесь заздалегідь із замовником. Адже положення плаката суттєво вплине на композицію. А якщо замовнику потрібно мати одну версію плаката вертикальну і одну горизонтальну, то дизайнеру доведеться створити дві різні композиції й, фактично, — два різних плакати.

У випадку вебсайтів все дещо складніше.

В першій половині дев’яностих років композиція вебсайтів ще була трохи схожа на роботу з плакатами. Тоді сайти створювались для зрозумілого формату — екранів з роздільною здатністю переважно 640х480.

Згодом з’явились екрани з роздільною здатністю 800х600. Ще пізніше почали з’являтись інші дисплеї — 1024х768, 1280х1024, 1400х1050 тощо.

Таке розмаїття призвело до ускладнення роботи над вебсайтом. На відміну від плаката, що мав чітко визначений формат, один і той самий вебсайт міг відкриватись на різних моніторах. Тобто один продукт існував в межах різних форматів.

З часом ця проблема лише поглибилась.

На додачу до різних моніторів комп’ютерів додались і різні пристрої перегляду (платформи). У 2007 році з’явився iPhone — перший популярний смартфон з сенсорним екраном. У 2010-му — перший планшет з сенсорним екраном, iPad.

Ще сильніше на ситуацію вплинула поява операційної системи Android, яку можна було встановити на різних пристроях (як планшетах, так і смартфонах).

З часом кількість різноманітних екранів, на яких сайт міг би переглядатись, збільшилась в рази.

При цьому доля користувачів, що заходили на сайт з різних мобільних пристроїв невпинно зростала. Відповідно до сайту statista.com, у 2017 році кількість людей, що відвідують сайт з мобільних пристроїв вперше перевищила половину і склала 50,3%. Наступного року їх доля збільшилась до 52,2% (як смартфонів, так і планшетів).

Сьогодні один і той самий вебсайт може бути відкритим зі смартфона, комп’ютера, планшета, ігрової приставки чи «розумного» телевізора. Тобто, з будь-якого пристрою, на якому є браузер.

Коректна робота сайту на всіх типах пристроїв, з яких він може переглядатись, називається кросплатформністю.

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

  • реагуючий вебдизайн (responsive web design);
  • адаптивний вебдизайн (adaptive web design)

Ознайомимось з ними ближче! Почнемо з реагуючого дизайну, адже він з’явився трохи раніше.

Реагуючий вебдизайн

Назва «реагуючий вебдизайн» походить від англійського слова response, тобто «реакція», «відповідь». Мається на увазі такий дизайн-підхід, за якого композиція вебсторінки з’являється відповідно до розміру вікна браузера. При цьому HTML-складова вебсторінки залишається незмінною, як і зміст сайту, і його зображення. Змінюється саме представлення в браузері. Відповідно, якщо вікно розширити, то й представлення розшириться, а якщо звузити — звузиться.

Вважається, що першим вебсайтом, створеним відповідно до цього підходу, був сайт автомобільної компанії Audi, створений у 2001 році компанією Razorfish. Завдяки мові JavaScript, цей сайт вмів визначати роздільну здатність монітора і використовував макет сайту відповідно до неї.

В реагуючому дизайні базовою була композиція, що відповідала роздільній здатності більшості екранів (до початку 2010-х — 1024х768), і відносно неї створювалась розширена версія для екранів з більшою роздільною здатністю та звужена — для екранів з меншою роздільною здатністю. Часто елементи залишались тими ж самими, але їхня ширина змінювалась. Через це такий дизайн ще називали «еластичним». Адже композиція розтягувалась, наче гума.

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

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

Втім про важливість роботи з мобільними пристроями писали чимало дизайнерів. Зокрема Ітан Маркот у книзі «Реагуючий вебдизайн» 2011 року (йому, до речі, приписують авторство цього поняття) та автор книги «Спочатку — мобільні пристрої» Люк Вроблевські.

До того ж можливості мови HTML суттєво розширились з поширенням її п’ятої версії у 2009 році; з’явилась і третя версія каскадних таблиць стилів, вдосконалювалась мова JavaScript, — все це сприяло поширенню реагуючого дизайну.

І хоч композиційно реагуючий дизайн з часом став набагато ретельніше ставитись до різних версій сайту, він, як і раніше, використовував ту саму HTML-основу. Відповідно, вага файлів не змінювалась, а на смартфонах сайти часто відкривали за допомогою мобільного інтернету — дорожчого і повільнішого ніж інтернет-мережі, до яких підключались стаціонарні комп’ютери.

При цьому з ростом популярності смартфонів увага до мобільного дизайну зростала, і якоїсь миті на додачу до реагуючого з’явився адаптивний вебдизайн.

Адаптивний вебдизайн

Авторство поняття «адаптивний вебдизайн» приписують дизайнеру Аарону Густафсону, який написав однойменну книгу в 2011 році.

Адаптивний вебдизайн, як і реагуючий, забезпечує кросплатформність сайту. Але в адаптивному дизайн-підході відмінність версій для мобільних пристроїв та для комп’ютерів більш суттєва. Пам’ятаєте? В реагуючому вебдизайні конкретна композиція сторінки визначалась відповідно до розмірів вікна браузера. А в адаптивному вебдизайні композиція і представлення вебсайту визначається відповідно до пристрою, з якого відкривається сайт.

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

Це дає змогу розглядати ключові версії сайту як автономні дизайн-проєкти і більш гнучко та уповні врахувати особливості платформ.

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

Це особливо актуально, з урахуванням того, що інтернет-з’єднання в мобільних пристроях часто слабше, а тарифи на нього — дорожчі.

Відтак, в комп’ютерній версії вебсайту можуть використовуватись зображення чи навіть відео на тлі, а в мобільній їх радше за все не буде. З одного боку, вони просто не будуть естетично виглядати, а з іншого — вони уповільнять завантаження сайту.

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

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

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

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

Тож вибір того чи іншого підходу залежить не лише від світогляду команди, але й від наявних ресурсів.

Ключові відмінності реагуючого та адаптивного вебдизайну

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

  • Спосіб визначення представлення сайту. Нагадаємо, в реагуючому вебдизайні представлення визначається розміром вікна браузера, а в адаптивному — пристроєм, з якого переглядається вебсайт.
  • Можливості оптимізації змісту. Вебсайти з реагуючим дизайном часто обмежуються зміною композиції, але зміст підвантажується той самий, незалежно від пристрою, з якого ви переглядаєте сторінку. Адаптивні сайти, своєю чергою, можуть використовувати оптимізовану графіку та інші медіафайли, і тому, як правило, важать менше.
  • Швидкодія. Завдяки оптимізації змісту і дизайну адаптивні вебсайти працюють і завантажуються швидше, ніж реагуючі. Для перевірки швидкості роботи сторінки на мобільних пристроях ви можете використовувати спеціальний інструмент PageSpeed Insights від Google. Часто серед рекомендацій з пришвидшення роботи є такі, що відповідають адаптивній моделі.

На завершення

Тривалий час замовники й розробники ставились до створення мобільної версії вебсайтів дещо зверхньо. В Україні цьому сприяло те, що третє покоління стільникового зв’язку 3G набуло широкого поширення лише у 2015 році.

На той момент у світі в цілому загальна доля мобільного трафіку на вебсайтах вже поступово наближалась до 50%, і у тому ж 2015 році компанія Google публічно заявила, що наявність мобільної версії для вебсайту буде впливати на його позиції під час ранжування.

Так, поступово створення мобільної версії стало неодмінною складовою розробки вебсайтів.

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

·
5103
·
2
·
goodsuper 96
Наступна стаття
Відмінності в дизайні мобільної та настільної версій вебсайту
1188
Головна