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

Чому це важливо

Кількість відвідувачів мобільних версій сайтів з кожним роком зростає. За підсумками 2013 мобільним інтернетом користуються 12,6% українців, з них 10,2% - на екрані мобільного телефону або смартфону (за даними GFK Ukraine); а частка мобільного трафіку в українському сегменті інтернету становить 3,18% (за даними Gemius на червень 2013р.).

Статистика зростання частки мобільного трафіку в Центральній і Східній Європі за 2012-2013 рік виглядає наступним чином.

ris.1

Мал. 1 Статистика зростання частки мобільного трафіку в Центральній і Східній Європі за 2012-2013

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

ris.-2

Мал. 2 Динаміка мобільного трафіку

 

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

ris.3

Мал. 3 Приклад статистики продажів інтернет-магазину за джерелами

Налаштування правильних переходів

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

ris.-4

Мал. 4 Правильно налаштований редірект на сторінці мобільної версії сайту (a - результати пошукової видачі; b - сторінка, на яку користувач переходить з пошуку)

Використання Flash-елементів

Уникайте використання елементів сайту, що програються за допомогою мультимедійної платформи Flash, вони не будуть нормально працювати на більшості мобільних пристроїв. Відео не буде відображатися, ігри не будуть програватися, елементи навігації не стануть провідниками по сайту і т.д. Компанія Adobe в 2011 повністю припинила підтримку Flash для всіх мобільних пристроїв.

Замість технології Flash Google рекомендує використовувати HTML5, і всі провідні сайти (наприклад youtube.com) цю рекомендацію виконують.

Не дублюйте контент на мобільній і повній версіях

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

Прості правила:

  • На всіх сторінках мобільної версії використовуйте атрибут тега link - rel = canonical з вказівкою на відповідні їм повні сторінки в якості «основних», канонічних.

  • На всіх сторінках повної версії використовуйте атрибут тега link - rel = alternate з вказівкою на відповідні їм мобільні сторінки.

 

Ці дії дозволять пошуковому роботу зрозуміти, яка зі сторінок оригінал, а яка є її мобільною версією, а не дублікатом.

Докладніше на сторінці довідки Google.

Рекламний банер додатку не повинен закривати контент

Добре, коли поряд з мобільною версією сайту, існує ще й мобільний додаток. Але неприпустимо використання спливаючого рекламного банера «Скачайте наш додаток!», який займає весь робочий екран. Посилання потрібно оформити таким чином, щоб воно не заважало перегляду сторінки. Для iOS можно використовувати Smart App Banner, а для інших платформ — реалізувати міні-банера у верхній частині сторінки. Хороший приклад - сайти kinopoisk.ru або zappos.com: для користувачів iPhone у верхній частині сторінки відображається саме такий стандартний і добре видимий міні-банер, який при цьому не заважає читанню контенту.

ris.5

Мал. 5 Приклад реалізації міні-банерів (a - сайт zappos.com; b - сайт kinopoisk.ru)


Використовуйте спрощену навігацію

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

ris.6

Мал. 6 Реалізація навігації на головній сторінці повної (a) і мобільної (b) версіях сайту Розетка

Рекомендації щодо реалізації навігації мобільної версії:

  • Стимулюйте використання рядка пошуку (максимально велика кнопка на першому екрані);
  • Виносьте в меню на головній сторінці тільки 4-5 найголовніших, базових пункту. Для внутрішніх сторінок меню — такі що згортаються в іконку.
  • Замість згортання можна розмістити меню в нижній частині сторінки, і перенаправляти туди користувача, клацнувши на іконку. Використовуйте обов'язково при наявності посилань «вниз» і «вгору» для сторінок з прокруткою.

Посилайтесь на повну версію сайту

Для зручності користування в нижній частині сторінки мобільного сайту повинне поміщатися посилання «Перейти до повної версії сайту».

ris.7

Мал. 7 Посилання на повну версію на сайті Вконтакті

 

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

Відстежуйте поведінку мобільних користувачів

Мова йде про дві пов'язані речі:

 

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


ris.8

Мал. 8 Приклад сегментування відвідувачів, які заходять на сайт за допомогою комп'ютеру, мобільного телефону і планшету

Оскільки найбільш частий спосіб створення мобільних адрес — використання m.site.com версії, то оптимальне рішення в цьому випадку - налаштувати відстеження піддомену m.site.com (для цього потрібна невелика модифікація коду) в окремому профілі.

Можна використовувати і спеціальні «розширені сегменти», які є в GoogleAnalytics спеціально для мобільного трафіку.

Висновки

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

Якщо ви хочете працювати з нами,
давайте почнемо з обговорення завдання

Обговорити задачу

Отримуйте новини інтернет-маркетингу

Тільки корисна інформація від експертів Promodo

Отримуйте новини інтернет-маркетингу