Дуже явно виражене зростання mobile трафіку та все частіше відкриття браузерів для серфінгу в інтернеті через ґаджети стимулює попит на якісні онлайн-ресурси для кишенькових пристроїв. Звичайні версії сайтів для ПК часто на мобільних пристроях з малим екраном працюють некоректно, якщо не передбачено спеціальний алгоритм для відображення елементів верстки. Повне уявлення, чим відрізняється мобільна версія сайту від адаптивної, дає можливість зрозуміти та вибрати найкращий спосіб презентації онлайн-ресурсу для аудиторії із сучасними пристроями Apple, Android, Windows Phone.
Вважається, що при показнику відвідування через ґаджет 15% аудиторії ресурсу, йому життєво необхідна адаптація під смартфони. Якість подачі контенту мобільному користувачеві також важлива для ранжування сайту в пошуковиках. Машини оцінюють показник mobile-friendly (грубо кажучи, зручності ресурсу) за такими основними критеріями:
сторінки не потрібно масштабувати, вручну збільшуючи окремі частини екрана для читання;
немає необхідності використовувати горизонтальний скролінг – інформація за шириною вміщується в рамки екрана;
не припустимі елементи флеш-анімації або плагіни, які не завантажуються в мобільному браузері та «ламають» архітектурний задум сторінки;
кнопки, посилання, повзунки не повинні надто тісно розташовуватися один до одного, оскільки натискати на сенсорний екран з маленькими деталями дуже незручно.
Перераховані проблеми усувають обидва формати для ґаджетів. Адаптивний вебсайт здатний автоматично підлаштовувати розміри своїх елементів під ширину та висоту дисплея планшета, смартфона, ноутбука. Код сторінки має прописані розмірні варіанти відображення ілюстрацій та блоків. Вони змінюються для різної ширини екрана або контент стискається в пропорції звуження дисплея.
Мобільна версія – це більш складний підхід. Змістова та цільова концепція сайту зберігається, але для неї пишеться окремий програмний код. Порядок елементів, їх пропорції, навігація, структура сторінок та дизайн можуть докорінно відрізнятися від повної версії для ноутбука, але найчастіше 99% функцій та контенту зберігається.
Зважуємо за і проти самодостатньої мобільної версії
Знаючи, чим відрізняється мобільна версія сайту від адаптивного дизайну, можна прийняти найправильніше рішення для належної подачі інформації користувачам. Версія mobile – це індивідуальний, спеціально розроблений шаблон на окремому піддомені. Він наповнений тим функціоналом, який найбільше потрібен потенційному клієнту чи гостю.
Очевидні переваги, через які обирають мобільну версію:
- простота внесення коректив – шаблон для mobile можна змінювати, доповнювати, урізати без внесення правок в основний (повний) вебсайт для комп'ютера;
- зручна навігація та кнопки – явні плюси для тих, хто хоче швидко керувати навігацією на великих кнопках, спеціальних випадаючих меню без необхідності прокручувати цілі сторінки або збільшувати в масштабі окремі частини блоків;
- краща швидкість – спрощений адаптований код шаблону завантажується набагато швидше, ніж місткий, насичений функціоналом та зайвою (для мобільного) рекламою та анімацією десктопний варіант;
- можливість, за бажанням, повернутись до звичної десктопної версії.
Недоліки даного способу завантаження контенту на ґаджетах – це окремий URL та помилки, які можуть виникати при переході на конкретні глибинні, внутрішні сторінки звичайної версії через mobile browser. Посилання на десктопний формат у пошуковику при автоматичному переході на версію m.адреса можуть не містити прив'язаної в мобільному шаблоні аналогічної інформації та видавати помилку.
Підрахунок мінусів та плюсів – очікування від адаптивної верстки
Порівнюючи адаптивну верстку vs мобільну версію за затратами сил та бюджету, перший варіант, однозначно, економніший. Плюси адаптивного дизайну:
- достатньо внести корективи в основний код, щоб структура сама підлаштовувалася під розміри пристрою, так само, як і під параметри вікна в браузері;
- один URL виключає проблеми з індексацією контенту для пошуковиків та із запам'ятовуванням нових адрес для користувача;
- будь-яка статистика та аналіз ведеться по одному джерелу.
Розробку окремих мобільних версій багато хто віддає перевагу через довге завантаження верстки, адаптованої під ґаджети. При слабкому інтернеті ємний ресурс повільно завантажується, процес може обриватися, і сторінку потрібно заново оновлювати. Намарно витрачається платний трафік мобільного інтернету на зчитування непотрібних скриптів та великих обсягів HTML-коду. Відвідувачам, що звикли до широкоформатного інтерфейсу, не дається право вибору – вони змушені переглядати лише компактну версію, з іншим, незвичним розташуванням блоків.
Динамічний показ (RESS) – популярний вид адаптивного дизайну
Альтернатива, що краще, простий адаптивний дизайн чи мобільна версія сайту, може вирішитися одним популярним способом адаптації сайту – RESS. Це покращений різновид багатоваріантної верстки з адаптацією. Формат відображення елементів задається на більш глибокому рівні – це не просто задане процентне співвідношення блоків з розміром екрана. Спочатку визначається тип пристрою, з якого заходить користувач. Миттєво для браузера запускається той варіант коду, який відповідає характеристикам пристрою.
Плюси такого методу адаптації під ОС та формат ґаджета:
- один і той самий контент при вході через будь-який пристрій;
- розмежування продуктів для iOS та Android (наприклад, після розпізнавання пристрою сервером, на сайті розташовуватиметься відповідне посилання для завантаження застосунку під конкретний смартфон);
- HTTP-заголовок Vary позитивно впливає на оцінку параметра mobile-friendly у пошукових машин;
- автоматичне відключення блоків з певним кодом для різних десктопів та ноутбуків (наприклад, у повній верстці для ПК може бути анімація JavaScript, а в мобільному її не буде, для додаткового розвантаження трафіку).
Оскільки для ефективного адаптивного дизайну RESS потрібно користуватися сервісом визначення пристроїв та збільшувати навантаження на сервер, даний спосіб підлаштування під мобільний не з дешевих. Для коригування окремо контенту під власників Айфона та ґаджетів на Android доведеться добре витратитись.
Остаточне рішення на користь адаптивної розмітки або версії mobile
Однозначно розмежувати критерії рішення на користь адаптивного дизайну чи мобільної версії сайту не можна. Потрібно проаналізувати цільові особливості окремо взятого ресурсу, вивчити цільову аудиторію та те, наскільки добре буде задоволений користувацький досвід. Для прийняття рішення рекомендується враховувати такі фактори:
з яких типів пристроїв приходить основна маса відвідувачів (наприклад, сучасні вузькоспеціалізовані блоги, приміром, про спортивне харчування, мають більше лідів зі смартфонів);
комерційна чи інша спеціалізація сайту (якщо це ресурс для купівлі спеціалізованого медичного обладнання, або B2B проєкт, його значно частіше відвідують зі стаціонарного ПК або ноутбука);
просування продукції для смартфонів або пристроїв певного типу (якщо це інтернет-магазин аксесуарів для Айфон, логічно, що основний приплив відвідувачів буде через Айфон);
масштаби головного сайту (якщо йдеться про великий проєкт з безліччю дрібних кнопок, які відмінно керуються мишкою на ноутбуці, зменшення навігації в розмірі зробить незручним весь інтерфейс).
Адаптивна верстка сприятливо впливає на поведінкові фактори головного сайту, краще підходить для його просування. Невеликим проєктам, однозначно, краще використовувати цей не надто витратний варіант. Версію мобайл рекомендують для великих проєктів, і в той же час такий вибір забезпечує кращий досвід для користувача і навіть іноді змінює ставлення до продукту, викликаючи більше довіри.
