- PVSM.RU - https://www.pvsm.ru -

Как улучшить мобильную версию сайта. Рекомендации и видеосоветы

Уровень подготовки веб-мастера: средний или высокий

Задумываетесь, как улучшить мобильную версию веб-сайта, и не знаете, с чего начать? Специально для вас мы подготовили список рекомендаций, которые помогут усовершенствовать ваш мобильный сайт. Часть рекомендаций мы сопроводили ссылками на известные примеры из практики и результаты исследований, а для некоторых даже сняли несколько видеосоветов (их можно смотреть с субтитрами на русском и ряде других языков). Эти советы и рекомендации помогут разобраться, как правильно интерпретировать данные из Google Analytics и Инструментов для веб-мастеров [1], чтобы улучшить мобильную версию вашего сайта.

Шаг 1. Сделайте мобильный сайт по-настоящему удобным


A) Уберите дополнительные окна в версиях для всех мобильных устройств (рекомендации Google [2], полезная статья [3]).

  • Не используйте всплывающие окна JavaScript, которые трудно закрывать.
  • Удалите все плавающие объявления, особенно рекламу приложений. Вместо этого используйте смарт-баннеры приложений в стиле iOS 6+ [4], боковую навигацию, рассылки по электронной почте и другие маркетинговые инструменты.
  • Не приглашайте пользователей поучаствовать в опросе до того, как они решат свои задачи.

B) Оптимизируйте сайт для разных устройств.

  • Откажитесь от функций, требующих использования плагинов или инструментов воспроизведения видео, которые могут отсутствовать на устройстве пользователя. Например, проигрыватель Adobe Flash Player отсутствует в iPhone, а также в Android 4.1 и более поздних версиях (пример из практики [5]).
  • Показывайте пользователям планшетов либо оптимизированную для настольных компьютеров версию, либо – ещё лучше – сайт для планшетов (результаты исследования [6]).
  • Предоставьте пользователям мобильных телефонов возможность переключиться на версию для ПК. Выбор пользователя должен применяться на протяжении всей сессии: не заставляйте посетителей переключаться на версию для ПК после загрузки каждой страницы (результаты исследования [7]).

С) Облегчайте мобильные страницы, чтобы пользователи не тратили на загрузку время и мобильный трафик.


Как облегчить мобильные страницы, ориентируясь на данные о показателе отказов и событиях из Google Analytics (презентация [8])

D) Ускорьте загрузку страниц и продолжайте работать в этом направлении, если ваши показатели ниже средних (пример из практики [9]).


Как ускорить мобильный сайт в сжатые сроки и сравнить его с сайтами конкурентов (презентация [10])

Подробный список вещей, доставляющих неудобства посетителям мобильных сайтов, опубликован на этой странице [11].

Шаг 2. Помогите посетителям получить то, за чем они пришли


А) Оптимизируйте свой сайт для сканирования и индексации, а также сделайте его удобнее для пользователей, которые приходят из поисковиков (пример из практики [12]).

  • Разрешите индексацию ресурсов (CSS, JavaScript и т. д.) в robots.txt.
  • Следуйте советам по оптимизации мобильной версии сайта для поисковых систем (в зависимости от способа реализации мобильного сайта):
    1. Адаптивный дизайн [13]: обязательно включите запрос CSS @media.
    2. Отдельная мобильная версия сайта [14]: добавьте атрибуты rel=alternate media и rel=canonical, а также HTTP-заголовок Vary: User-Agent, чтобы поисковый робот Google сразу указывал мобильный URL в результатах поиска [15]
    3. Динамический показ [16]: добавьте HTTP-заголовок Vary: User-Agent.

    B) Узнайте, как ведут себя пользователи мобильных устройств на сайте, и помогите им быстрее добиваться желаемого результата.


    Как оптимизировать свой сайт в соответствии с распространенными сценариями поведения пользователей мобильных устройств, основываясь на данных из Инструментов Google для веб-мастеров и Google Analytics (презентация [17])

    Шаг 3. Превращайте клиентов в поклонников


    A) Разрешите поисковому роботу Google индексировать контент в вашем приложении. Прочитайте подробнее об этой возможности [18] и ее реализаци [19].
    B) Подумайте, чем можно увлечь пользователя:

    • Создайте приложение для пользователей мобильных устройств, например, для посетителей вашего магазина или торгового центра (примеры из практики [20]).
    • Задействуйте датчик GPS, камеру и акселерометр смартфона.
    • Увеличивайте степень социальной вовлеченности пользователей (примеры из практики [21]).
    • Задействуйте жесты: перелистывание, нажатия, встряхивание. Это одновременно весело и интуитивно понятно.

    В этом посте мы собрали основные советы по улучшению мобильных сайтов. Полную версию наших рекомендаций для разработчиков можно найти тут [11]. Если мы упустили что-то важное, будем рады вашим предложениям в комментариях.

Автор: HabrAndrey

Источник [22]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/mobile-development/52675

Ссылки в тексте:

[1] Инструментов для веб-мастеров: http://www.google.ru/intl/ru/webmasters/

[2] рекомендации Google: https://developers.google.com/webmasters/smartphone-sites/common-mistakes

[3] полезная статья: http://www.nngroup.com/articles/most-hated-advertising-techniques/

[4] смарт-баннеры приложений в стиле iOS 6+: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

[5] пример из практики: http://habrahabr.ru/company/google/blog/187066/

[6] результаты исследования: http://www.nngroup.com/articles/tablet-usability/

[7] результаты исследования: http://www.nngroup.com/articles/mobile-site-vs-full-site/

[8] презентация: https://docs.google.com/a/google.com/presentation/d/1itnlBohS_UxxhL8luQHMzxLLmJ4CzK7lsQoYxs_UD1s/edit#slide=id.p

[9] пример из практики: http://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/

[10] презентация: https://docs.google.com/a/google.com/presentation/d/1CeZtuz2Tn3EdxYtTRzPGCXMOs3flk__YuLr4g0SnsGw/edit#slide=id.p

[11] на этой странице: https://developers.google.com/webmasters/smartphone-sites/website-improvement-checklist

[12] пример из практики: http://www.google.com/think/research-studies/mobile-path-to-purchase-5-key-findings.html

[13] Адаптивный дизайн: https://developers.google.com/webmasters/smartphone-sites/details#rwd

[14] Отдельная мобильная версия сайта: https://developers.google.com/webmasters/smartphone-sites/details#separateurls

[15] сразу указывал мобильный URL в результатах поиска: http://googlewebmastercentral.blogspot.ie/2011/12/introducing-smartphone-googlebot-mobile.html

[16] Динамический показ: https://developers.google.com/webmasters/smartphone-sites/details#dynamicserving

[17] презентация: https://docs.google.com/a/google.com/presentation/d/1pnrJ1BloLeGll__0N7hCKXIqgPuj8jPEuPBW2cH9Vr0/edit#slide=id.p

[18] об этой возможности: http://habrahabr.ru/company/google/blog/201968/

[19] ее реализаци: https://developers.google.com/app-indexing/

[20] примеры из практики: http://www.google.com/think/research-studies/mobile-in-store.html

[21] примеры из практики: http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/adobe-2013-mobile-consumer-survey-71-of-people-use-mobile-to-access-social-media/

[22] Источник: http://habrahabr.ru/post/208488/