Мобильная версия сайта: основные тонкости и этапы настройки

Почему это важно

Количество посетителей мобильных версий сайтов с каждым годом растет.  По итогам 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 для всех мобильных устройств.

Вместо технологии FlashGoogle рекомендует использовать 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

Если вы хотите работать с нами,
давайте начнем с обсуждения задачи

Получить консультацию

Есть задача?

Давайте обсудим!

Получайте новости интернет-маркетинга