Інтернет 2016: хай живе адаптивний дизайн

39

Від автора: адаптивний Веб Дизайн чи RWD останнім часом завжди на слуху, і він зробив величезний вплив на індустрію в цілому. Всього кілька років тому дизайну було досить добре виглядати під 4 або 5 різних розміру екрана. Сьогодні ж усе змінилося.

Інтернет 2016: хай живе адаптивний дизайн

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

Раніше вистачало кількох варіантів обслуговування мобільних користувачів: люди використовували піддомен з літерою «m» або повністю покладалися на мобільні додатки. Однак останні дослідження на сьогоднішній день показують, що дані рішення не настільки послідовні і економічно вигідні, як адаптивний дизайн.

Що таке адаптивний веб-дизайн?

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

Інтернет 2016: хай живе адаптивний дизайн

Адаптивний веб-дизайн в 2015 році вже вийшов далеко за ці рамки, проте люди досі асоціюють цей дизайн з трьома первинними концепціями, описаними в книзі «Кращі практики адаптивного дизайну»:

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

Гнучкі зображення – Будь-який візуальний контент або медіа файл, який підлаштовується під розмір екрану користувача. Зазвичай, це зображення, розміщені всередині гнучкої сітки, якою встановлено правило CSS max-width: 100%. З точки зору непрофесіонала даний підхід робить так, що зображення не можуть бути більше сітки, усередині якої вони знаходяться, але в той же час зображення можуть змінювати свій розмір, не втрачаючи при цьому співвідношення сторін. Щоб уникнути довгого завантаження, дизайнери можуть стискати дозвіл зображень для маленьких екранів. Інший спосіб це встановити ширину зображення у відсотках від ширини сторінки в цілому.

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

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

Інтернет 2016: хай живе адаптивний дизайн

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

Чому потрібно продовжувати використовувати адаптивний веб-дизайн?

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

Інтернет 2016: хай живе адаптивний дизайн

Що важливіше, RWD — це метод, який робить веб-сайт більш доступним практично всім:

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

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

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

Підвищує кількість користувачів, продажу і конверсію. За даними дослідження Aberdeen Group сайти з RWD в середньому підвищують конверсію на 11% на відміну від неадаптивних.

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

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

Покращує SEO: Google офіційно рекомендує адаптивні сайти.

Дає користувачам єдине якість обслуговування – ніхто не хоче бути другосортним.

Дозволяє фокусуватися на деталях, і це здорово, тому що (якщо ви хороший дизайнер) ви повинні піклуватися про деталі.

Поступово відмирають старі способи

Піддомени з літерою «m» або окремі версії сайтів для мобільних користувачів практично відмирає.

Інтернет 2016: хай живе адаптивний дизайн

Сайти типу m.samplesite.com і www.samplesite.com дають різні відчуття від використання на різних пристроях. Коли основна мета це послідовність, цілісність стає зрозуміло, чому дані рішення не ідеальні. Тим не менше, немає нічого точніше статистики, яка доводить зниження кількості сайтів на піддомені «m».

Pure Oxygen Labs повідомили, що за останній рік кількість сайтів з «m» поддоменом скоротилося на 20%, з 79% у 2013 до 59 2014, в той час як адаптивні сайти зросли на 37%.

Користувачі все одно переходять на повну версію Дослідження, Web Performance Today показало, що близько третини (35%) користувачів воліють переходити на повну версію сайту, якщо є така можливість.

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

SEO/Google проблеми – Згідно google’s own guidelines адаптивні сайти відображаються вище в пошуковій видачі. Якщо не використовувати піддомен «m», то можна відразу поліпшити SEO.

Час редіректу – В теорії «m» сайти завантажуються швидше, але адаптивним сайтів не потрібно витрачати час на редирект з повної версії на «m» версію сайту (якщо користувач сам не вбиває URL мобільної версії сайту). Укупі з іншими недоліками воно того варте?

У мобільних пристроїв не один і той же розмір екрану – Як би іронічно це не звучало, але те, що раніше було найбільшим перевагою мобільних версій сайту, тепер є найбільшим їхнім недоліком. «m» сайти проектуються під певний розмір екрану, однак мобільні пристрої можуть мати різний дозвіл від 320х240 для деяких смартфонів і до 768х1024 (і вище) на планшетах. Немає сенсу використовувати один макет для всіх розмірів екрану.

Підсумок: «m» сайти це погана ідея, так як їх обслуговування більш дороге, і вони псують користувачеві відчуття від сайту. У 2016 році ви побачите, як вони продовжать зникати з поля зору, а їх нішу займає адаптивний дизайн. Існує безліч прикладів, коли сайти переключилися на RWD, що зробило їх більш успішними після перезапуску. Розглянемо приклад з дослідження Google – Британський інтернет провайдер Plusnet.

Приклад: Plusnet

Коли аналітики Plusnet вказали на значно збільшений мобільний трафік, вони почали продумувати серйозні зміни на веб-сайті.

У прикладі Google видно, що цифри вражаючі, і вони почали рости дуже швидко. А точніше, мобільний трафік зростав на один процентний пункт (щодо загального трафіку) кожен місяць. Як тільки стало очевидно, що дана тенденція збережеться в найближчому майбутньому, особи, що приймають рішення в Plusnet прийшли до висновку, що їм слід більше інвестувати в мобільну стратегію.

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

Інтернет 2016: хай живе адаптивний дизайн

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

Час конверсії скоротилася майже в два рази (40%), продажу зі смартфонів і планшетів зросли більш ніж у 10 разів за останні роки. Тепер показник конверсії для нового мобільного сайту вище, ніж старий показник для всіх пристроїв разом узятих.

Результати досить типові, якщо у вас раніше взагалі не було мобільного стратегії, а потім ви відразу переключилися на RWD. Коли Time Magazine перезапустились з адаптивним дизайном, кількість унікальних відвідувань домашньої сторінки зросла на 15%, з часом цей показник впав до 7.5%, а відсоток відмов скоротився на 26%.

Хороший адаптивний дизайн обіцяє хороший бізнес. Якщо ви хочете бути хорошим дизайнером, ви завжди повинні обґрунтувати причини свого дизайну.

Основна думка

Висновки дуже прості. Кількість людей, які користуються мобільними пристроями велика, як ніколи, і воно буде тільки рости. Більше половини населення підписані на мобільні інтернет-сервіси, а до кінця 2020 року ця цифра зросте ще на мільярд людей.

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

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