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

  • гумовий дизайн. Елементи сторінки (блоки, шрифт, зображення) змінюють розмір в залежності від дозволу і типу пристрою. Він не надає повний контроль над зовнішнім виглядом ресурсу. Це оптимальне рішення для простих сайтів і посадочних сторінок;

  • адаптивний дизайн. Для найбільш поширених дозволів і екранів (від мобільних до 4K телевізорів) пишуться окремі блоки правил. Формується різна поведінка елементів - завантажуються відповідні зображення (можуть бути різними), змінюється зовнішній вигляд меню. Картки товарів шикуються по 4, 3 або 1 на ширину екрану. Складність розробки обумовлена ​​необхідністю передбачити поведінку великої кількості дозволів. Зовнішній вигляд сторінки на нетипових пристроях може не відповідати уявленням дизайнера;

  • чуйний дизайн. Поєднує гнучку і адаптивну верстку. Забезпечує більш швидку розробку. Надає середній рівень контролю зовнішнього вигляду.

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

  • Чи потрібен адаптивний дизайн вашого сайту?

  • Можливо, раціональніше заплатити за розробку окремої мобільної версії?

  • Чи варто нести додаткові витрати для підвищення UX?

Відповімо на них по черзі.

Кому не потрібен адаптивний дизайн?

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

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

Чому мобільна версія не сприяє просуванню?

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

 Що в цьому поганого:

  • дозволу сучасних мобільних пристроїв росте. Воно наздогнало десктопи. Мобільна версія, створена без урахування цих параметрів, може виглядати погано;

  • мобільна версія - окремий сайт. Тому трафік буде розділятися на 2 потоку, що погіршить загальні показники ранжирування;

  • при оновленні та підтримки належить робити у 2 рази більше роботи. Значить, реалізація буде дорожче;

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

  • десктопні сайти без mobile friendly відображаються у видачі Google і Яндекс на нижчих позиціях.

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

Чи варто платити більше для поліпшення користувацького досвіду?

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

  • скоротиться час завантаження. Найважче - зображення і відео. В адаптивному дизайні їх вага буде відрізнятися при різних дозволах;

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

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