Як адаптувати сайт під мобільні пристрої?

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

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

Чому важливо, щоб сайт був mobile-friendly?

Mobile-friendly веб-сайт добре відкривається не тільки з персональних комп’ютерів, але і з мобільних пристроїв. Є три ключових причини забезпечити інтернет-ресурс адаптивної версією:

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

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

Ознаки mobile-friendly ресурсу

Мобільний варіант сайту вважається повноцінним проектом зі спеціально розробленим дизайном, опрацюванням юзабіліті і оптимізацією контенту. Сайти, які можна назвати mobile-friendly, мають такі ознаки:

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

Не обов’язково мати поглиблені знання в веб-дизайні, щоб зрозуміти, що онлайн-ресурс не позиціонується як mobile-friendly. Багато користувачів роблять подібні висновки інтуїтивно, після чого просто залишають сайт. Тому в інтересах власників інтернет-майданчиків — забезпечити комфортний перегляд сайту як з ПК, так і з мобільних девайсів.

Варіанти оптимізації під мобільні пристрої

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

Мобільна версія

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

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

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

Динамічний показ

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

Канонічні AMP-сторінки

Accelerated Mobile Pages стали ініціативою Google, запущеної в 2016 році. Оперативне вирішення по оптимізації можна отримати завдяки фреймворками і бібліотекам AMP. Хоча такою можливістю спочатку користувалися переважно інформаційні агентства та інші інтернет-ЗМІ, зараз даний варіант також актуальний і для e-commerce.

Різні URL

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

Мобільна версія: переваги і недоліки

Сайт, який адаптований спеціально для мобільних гаджетів, має такі переваги:

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

Проте, у мобільних версій також є недоліки:

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

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

Адаптивна мобільна версія: способи оптимізації

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

Щоб налаштувати адаптивну мобільну версію, використовується код Javascript, реалізований двома популярними способами:

• адаптація за допомогою Javascript — застосовується єдиний код HTML, JS і CSS, механізми роботи і відображення прописані в JS (саме такий спосіб передбачають рекомендації Google);
• комбінований тип Javascript — користувачі отримують різний HTML-контент в залежності від того, який пристрій використовують.

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

Версія розмітки що завантажується дінамічно

При використанні версії розмітки яка завантажується динамічно, розпізнається параметр Vary від певного User-Agent. Далі потрібна HTML-версія відправляється користувачеві. Щоб завантаження була більш зручною, використовуються куки, завдяки яким при повторному відвідуванні веб-ресурсу потрібна версія завантажується автоматично. Для коректного завантаження треба правильно розпізнати User-Agent.

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

Технологія прискорених мобільних сторінок (AMP)

Як зазначалося вище, мобільні сторінки AMP є технологією, розробленою Google. Кілька років тому компанія впровадила політику Mobile-First Indexing, яка передбачає, що під час індексування спочатку будуть оцінюватися мобільні, а не десктопні версії веб-сайтів.

Проект Accelerated Mobile Pages передбачає формат максимального прискорення завантаження на будь-яких мобільних пристроях (навіть при досить повільному інтернет-з’єднанні). В основу сторінок закладений АМР HTML, який представляє урізаний HTML з Javascript-бібліотекою і спеціальним набором тегів. У кеші Google зберігаються AMP-сторінки, які завантажуються в разі повільного з’єднання.

Сервіси для перевірки, наскільки сайт mobile-friendly

Так як з 2017 року всі пошукові системи почали ставити в пріоритет видачу для мобільних пристроїв, характеристика mobile-friendly стала основою успішного просування сайту. Щоб переконатися в адаптивності веб-ресурсу, необов’язково звертатися за допомогою в спеціальні компанії. Є ряд сервісів, які здійснюють відповідну перевірку:

• Google Mobile Friendly — одна з найпоширеніших програм, є інструментом в Google Search Console, оцінює не весь сайт повністю, а кожну сторінку окремо;
• Яндекс Вебмастер — програма, що дозволяє перевірити не тільки свій, а й будь-який інший веб-ресурс, виставляє загальну оцінку на основі шести пунктів відповідності, також перевіряє сторінки окремо;
• Bing — сервіс від Microsoft, що аналізує адаптивність на мобільних пристроях Android і Windows, дає аналітичну інформацію з приводу сайтів конкурентів, перевірку здійснює без підтвердження володіння веб-сайтом;
• Mobile Checker — сервіс перевірки, що допомагає проаналізувати сайт на предмет адаптивності і підвищити якість ПЗ, тестування відбувається за допомогою завантаження файлу;
• Responsinator — сервіс, який не відображує загальну оцінку, проте показує, як саме буде виглядати веб-ресурс на різних пристроях.

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