У статті розберемося в плюсах і мінусах адаптивної верстки та мобільного сайту. Розповімо, чому частіше все-таки використовують адаптив і які у нього переваги. В кінці представимо найкращі сервіси для перевірки «мобайл-френдлі».
Зараз велика частина користувачів заходять в мережу зі смартфонів і планшетів. У зв’язку з цим сайт, який планується розвивати і просувати, необхідно оптимізувати під мобільні девайси. Це важливо не тільки для зручності відвідувачів, а й для пошукового просування. Оптимізувати ресурс можна за допомогою адаптивної верстки або створення мобільної версії. Розглянемо особливості кожного варіанту.
При адаптивному дизайні веб-сторінки автоматично змінюють вигляд залежно від розміру екрана, орієнтації пристрою, поведінки користувачів. Параметри картинок, шрифтів задаються у відсотках від ширини екрану, таким чином, сайт легко підлаштовується під будь-який девайс. Щоб текст не вилазив за кордони, його ділять на кілька блоків, які при необхідності переносять текстовий матеріал вниз сторінки.
Є й інші правила створення адаптивного дизайну. В основному вони пов’язані з корегуваннями в таблицях CSS і HTML-коду. Це зручний, нескладний спосіб оптимізації, ось головні плюси:
- немає необхідності робити окремий сайт;
- завдяки єдиному URL сторінки не конкурують одна з одною, не потрібні додаткові редіректи;
- SEO-просування одночасно налаштоване на десктопний і мобільний пошук;
- трафік прямує на один сайт.
Адаптивна верстка сайту зручна для користувачів, не завдасть великих клопотів розробникам і оптимізаторам. Але недоліки у цього способу теж є. Перш за все такий сайт може довго завантажуватися на телефоні, тому що важить більше, ніж спрощений мобільний. Щоб уникнути довгого завантаження, намагайтеся мінімізувати код, скоротити редіректи, спростити дизайн.
Але в цілому труднощі зі швидкістю виникають при виході в мережу зі старих пристроїв або при використанні застарілих технологій 2G. На сучасних смартфонах при швидкісному інтернеті такі проблеми рідкісні. Перевірити час завантаження можна в сервісах pr-cy.ru, mainspy.ru та інших подібних.
Ще один мінус пов’язаний з юзабіліті. При адаптиві найважливіша інформація іноді виявляється в незручному для користувача місці прокрутки екрану. Крім цього, адаптивну верстку складно реалізувати на flash-сайтах. Також бувають проблеми з незвичайно оформленими проектами. Є ризик, що картинка зміниться так, що загубиться вся дизайнерська концепція, а це знову ж негативно вплине на юзабіліті.
Мобільна версія – копія основного ресурсу, адаптована під мобільні пристрої. Іншими словами, це окремий проект, для якого спеціально розробляється дизайн і юзабіліті. Найчастіше створюється на піддомені (m.site.ru) або в папці (site.ru/m). Перерахуємо плюси такого сайту:
- швидке завантаження: попрацювавши з кодом, можна максимально полегшити ресурс;
- забезпечення хорошого юзабіліті: можливо додати корисні для користувачів функції, яких не було в десктопній версії;
- внесення змін до мобільної версії без наслідків для десктопної.
Останній пункт відноситься також і до мінусів, тому що при змінах в проекті доводиться робити подвійну роботу: корегувати десктоп і мобільний ресурс. Необхідно дублювати і контент, а це трудомісткий процес, особливо якщо мова йде про новинний ресурс, який щодня оновлюється. Крім цього, важливо стежити, щоб мобільна версія не конкурувала з десктопною.
Але головна проблема мобільних сайтів – це збільшення обсягу SEO-робіт, тому що, по суті, доводиться просувати в пошуку два майданчики. Знижується і ефект від зовнішньої оптимізації: користувачі іноді посилаються на різні версії сайту. Також можуть бути складнощі з мобільним посиланням. Якщо відвідувачі не помітять його, то будуть сидіти з мобільного в десктопній версії, а це незручно – виникає ймовірність зростання відмов.
У 90 випадках зі 100 ми рекомендуємо клієнтам адаптивний дизайн. Це простіше і менш витратно: не потрібно розробляти другий сайт, вирішувати проблеми кількох URL-адресів. Просування не ускладнюється створенням іншого інтернет-майданчика, всі зусилля спрямовуються на один домен – можна отримати більш швидкий і якісний результат, для SEO це набагато краще.
Проблеми адаптиву нескладно усунути: оптимізувати швидкість, налагодити юзабіліті. Та й адмініструвати такий сайт простіше. Наприклад, щоб змінити вартість товару, досить скорегувати ціну в одному місці, і вона буде відображатися всюди. У мобільній версії довелося б робити подвійну роботу, як ми вже писали.
Але в деяких випадках краще зробити окремий мобільний майданчик. Наприклад, коли ви працюєте зі складним високонавантажених проектом. На старі сайти також іноді складно впровадити адаптив, простіше створити окремий мобільний.
Який би варіант ви не обрали, важливо перевіряти зручність використання сайту. Ресурс і його версії повинні коректно індексуватися пошуковими ботами, завантажуватися за 2 сек., Правильно відображатися на телефонах і планшетах. Для аудиту цих критеріїв використовуйте наступні сервіси:
- Mobile-Friendly Test. Інструмент від Google дозволяє оцінити, наскільки зручно переглядати сторінку на різних пристроях.
- Adaptivator. Сервіс виявить проблемні сторінки, складе технічне завдання щодо усунення недоліків.
- Mobile SERP Test. Перевіряє правильність ранжирування в пошуку мобільних сторінок.
- Mobile First Index Checker. Програма покаже, наскільки узгоджені мобільний сайт і десктопний, знайде невідповідності.
Відстежуйте і оцінюйте мобільність ресурсу. Неадаптований за правилами веб-проект втрачає частину користувачів. Обирайте відповідний спосіб оптимізації і робіть сайт зручним. Після успішного впровадження «мобайл-френдлі» багато власників відзначали зростання пошукового трафіку і поліпшення позицій у видачі.
