Адаптивна верстка vs. мобільний сайт, або Яка стратегія адаптації до мобільного трафіку виграє в майбутньому?

В березні 2016 року засновник Facebook Марк Цукерберг у розмові з творцем Alibaba Group Джеком Ма оголосив швидке завершення епохи смартфонів і планшетів. За словами Цукерберга, кожні 10 років з’являються принципово нові девайси, змінюють уявлення людини про способи взаємодії з комп’ютером.

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

Які стратегії адаптації до мобільного трафіку працюють сьогодні

Є дві основні стратегії створення дружніх до мобільним користувачам ресурсів. Перша передбачає використання адаптивної верстки. Сторінка з RWD (від англ. Responsive Web Design) автоматично підлаштовується під розміри екрана відвідувача. Завдяки цьому її зручно переглядати на будь-якому пристрої: десктопі, планшет і смартфон.

Друга стратегія передбачає створення для мобільних користувачів окремого сайту. Він адаптований виключно для перегляду на невеликих екранах. Тому з мобільних версій сайту зникають багато елементів десктопної версії, включаючи flash-анімацію і «важку» графіком. Мобільні версії мають окремий URL. Наприклад, незважаючи на використання адаптивного дизайну, «Стрічка.ру» пропонує користувачам окремий мобільний сайт. Він знаходиться за адресою m.lenta.ru.

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

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

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

Адаптивний дизайн: переваги та недоліки

Найбільша в світі пошукова система Google рекомендує робити сайти mobile-friendly з допомогою адаптивного дизайну («We recommend using responsive web design»). Уявіть, що ваш колега переглядає сторінку сайту на смартфоні, а ви відкриваєте ту ж сторінку на стаціонарному ПК. При переході на вибраний URL ваші браузери завантажують однаковий HTML-код.

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

А ви бачите сайт так:

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

• Більш високі позиції ресурсу в мобільній пошуковій видачі. Тут потрібно відзначити дві принципові позиції. По-перше, це універсальне перевага всіх стратегій адаптації до мобільного трафіку. Пошукові системи вважають коректними як RWD або динамічний показ, так і мобільну версію сайту. По-друге, наявність або відсутність адаптації під мобільний трафік впливає виключно на мобільний видачу. Ось підтвердження від «Яндекса», а от від Google. Ось ще одна чітка відповідь від представника Google (див. Питання № 2): адаптація під мобільний трафік впливає тільки на мобільний видачу.

• Зручний моніторинг сайту за допомогою систем аналітики. Якщо ви використовуєте RWD або RESS, з допомогою Google Analytics і Яндекс.Метрики» можна стежити за ефективністю сайту для всіх типів трафіку.
• Економія коштів. Адаптивна верстка обійдеться вам дешевше, ніж створення та зміст окремої версії ресурсу для мобільних девайсів.
• Відсутність необхідності налаштовувати редиректи. Як сказано вище, при використанні RWD браузер автоматично адаптує до екрану сторінку, розташовану за однією адресою.

• Простота управління. Щоб показати вміст власникам десктопів і мобільних гаджетів, достатньо один раз зверстати і опублікувати статтю.
• Відсутність дублів контенту. Всі користувачі відвідують сторінку, розташовану за однією адресою.
• Простота реалізації. Фреймворки типу Bootstrap значно спрощують роботу веб-розробників. Більш того, навіть якщо ви нічого не розумієте в коді, можна скористатися плагінами для популярних CMS. Наприклад, щоб зробити дизайн сайту на WordPress чуйним, встановіть плагін WPtouch.

Як бачите, Google не дарма рекомендує RWD для адаптації ресурсів до мобільного трафіку. Чи означає це, що чуйний дизайн можна вважати панацеєю? Немає, так як…

… адаптивна верстка має недоліки

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

Потреби аудиторії не враховуються

Адаптивна верстка не повністю враховує потреби мобільних користувачів. Вона вирішує проблему коректного відображення контенту. Але хто сказав, що власник смартфона, толкающийся у вагоні метро або розглядає товари в гіпермаркеті, потребує в тому ж контенті, що і зручно розташувався за столом власник десктопу або розвалений на дивані користувач планшета? Мобільні користувачі потребують в снек-контенті. Складно уявити, щоб вони регулярно читали зі смартфонів лонгриды, правда?

Страждає юзабіліті і користувальницький досвід

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

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

Виходить, більшість страждає через меншини. Чому так, якщо мобільний трафік перевищив або ось-ось перевищить трафік зі стаціонарних пристроїв? Коли пошукові системи і сервіси аналітики говорять про паритет мобільного та стаціонарного інтернету, мова йде про глобальні тенденції. Для окремих сайтів пропорції стаціонарного і мобільного трафіку можуть відрізнятися. Наприклад, ось дані з нашого ресурсу.

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

Сторінки довго завантажуються, створюється надмірне навантаження на «залізо»

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

Факт залишається фактом: щоб відкрити сторінку, мобільний телефон та стаціонарний комп’ютер завантажують однаковий об’єм інформації і здійснюють однаковий обсяг обчислень, який навантажує процесор. Підключений до швидкого інтернету десктоп з могутнім «залізом» справляється з цим завданням на ура. А як себе почуває смартфон з менш потужним процесором? Якщо ви підключаєтеся до інтернету через офісний Wi-Fi, а через мобільні мережі, обсяг завантажуваної інформації грає критично важливу роль.

Відсутність вибору

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

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

Мобільна версія сайту: за і проти

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

Переваги мобільного сайту

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

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

• Економія трафіку і ресурсів пристрою. Це дуже важлива перевага, якщо значну частку трафіку вам забезпечують по-справжньому мобільна аудиторія: власники смартфонів, які користуються інтернетом на ходу.

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

… недоліки мобільної версії сайту

Мобільна версія має цілий ряд серйозних недоліків.

Мобільний сайт підходить не для всіх мобільних пристроїв

Як ви пам’ятаєте, RWD гарантує коректне відображення ресурсу на екрані будь-якого девайса. Мобільні сайти також коректно відкриваються з будь-якого пристрою. Однак мобільна версія зазвичай виглядає безглуздо на екрані десктопа. Більш того, більшість мобільних сайтів неможливо використовувати на планшетах з великим екраном. Подивіться, як виглядає мобільна версія «Живого Журналу» на екрані 10″:

Управляти двома сайтами складніше, ніж одним

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

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

Додаткові витрати

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

Проблеми з дублюванням вмісту

Уявіть, що опублікували на основному сайті класну статтю. Якщо ви опублікуєте її на мобільному сайті, він буде пессимизирован за крадіжки контенту. Щоб вирішити проблему, вам доведеться потрудитися: інформувати «Яндекс» і Google про спорідненість основний і мобільної версії ресурсу з допомогою атрибутів rel=alternate і rel=canonical.

Кастрированная функціональність і контент

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

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

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

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

Динамічний показ: шах чи мат мобільному сайту?

Динамічний показ або RESS — це покращений варіант адаптивного дизайну. Він працює так: після запиту до URL сервер визначає характеристики пристрою відвідувача. Потім переглядач HTML-код сторінки, адаптованої до перегляду на конкретному екрані. Завдяки динамічному показу усувається один з головних недоліків RWD: велика витрата трафіку і навантаження на пристрій користувача.

Коли ви заходите на сайт з RESS зі смартфона і десктопа, ваші браузери завантажують різний код. При цьому ви отримуєте всю інформацію, що міститься на сторінці. Більш того, ви можете адаптувати навігацію, меню, дизайн і контент сторінок до потреб власників конкретних девайсів. Найпростіший приклад адаптації контенту: завдяки визначенню сервером пристрої користувача ви можете показувати власникам девайсів під управлінням iOS і Android посилання на скачування додатків в App Store і Google Play відповідно.

Коректну роботу сайтів з RESS забезпечує HTTP-заголовок Vary, що міститься у відповіді сервера на запит. З його допомогою браузер завантажує відповідний характеристиками пристрою HTML-код. Також завдяки HTTP-заголовку Vary пошукові системи визначають мобільний дружність ресурсу.

RESS використовують SlideShare, CNN, WordPress.com і інші сайти. Наприклад, якщо ви відкриєте сайт CNN зі стаціонарного комп’ютера, в коді сторінки буде JavaScript.

У коді сторінки, завантаженої зі смартфона, JavaScript відсутня.

Чому Google рекомендує адаптивний дизайн, якщо є покращений варіант? Чому власники сайтів масово не впроваджують динамічний показ? Як будь-який інший інструмент, RESS має недоліки:

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

Google рекомендує RWD, а не RESS, з-за ресурсовитратності другого інструменту. Щоб забезпечити динамічний показ, доведеться вирішувати проблему визначення пристроїв користувачів, збільшувати витрати на хостинг і витрачати час і гроші на створення різного HTML-коду для одного URL. Дозволити собі додаткові витрати може далеко не кожен проект. Тому в даний час RESS не можна назвати матом і навіть шахом мобільної та адаптивного дизайну.

Як впливає на вибір стратегії еволюція мобільних екранів

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

Дисплеї стають гнучкими

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

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

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

Смартфони, планшети та портативні пристрої створюють доповнену реальність

Простий приклад: якщо під час подорожі подивитися на вулицю незнайомого міста, можна побачити красиві будівлі і пам’ятники. Якщо подивитися на цю ж вулицю через Google Glass або Samsung Gear VR, можна побачити красиві будівлі і отримати інформацію про них.

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

Від тривимірних зображень до об’ємним голограмам

Смартфони і планшети вже вміють відтворювати 3D-зображення. Що далі? Деякі виробники розробляють системи, які дозволять обладнати смартфони і планшети проекторами голограм.

Варто веб-дизайнерам і власникам сайтів вже зараз думати, як адаптувати свої ресурси до голографічного інтернету? Хіба що на дозвіллі.

А як щодо інтернету без екранів?

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

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

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

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

Яку стратегію обрати

Для початку погляньте на таблицю. З її допомогою можна швидко оцінити основні інструменти адаптації до сайту мобільному трафіку.

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

Так, особливості проекту і потреби його аудиторії необхідно враховувати. Так, основні стратегії адаптації до мобільного трафіку мають переваги і недоліки. Так, кожна з стратегій має прихильників і супротивників. Наприклад, засновник Nielsen Norman Group Якоб Нільсен не любить адаптивний дизайн і рекомендує робити мобільну версію сайту. А автор бестселера «Вивчаємо HTML 5» Брюс Лоусон рекомендує використовувати RWD і відмовитися від мобільних сайтів. Але це теорія.

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

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