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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  
  A) Разрешите поисковому роботу Google индексировать контент в вашем приложении. Прочитайте подробнее об этой возможности и ее реализаци.
  B) Подумайте, чем можно увлечь пользователя:
  
  • Создайте приложение для пользователей мобильных устройств, например, для посетителей вашего магазина или торгового центра (примеры из практики).
  • Задействуйте датчик GPS, камеру и акселерометр смартфона.
  • Увеличивайте степень социальной вовлеченности пользователей (примеры из практики).
  • Задействуйте жесты: перелистывание, нажатия, встряхивание. Это одновременно весело и интуитивно понятно.
  
  В этом посте мы собрали основные советы по улучшению мобильных сайтов. Полную версию наших рекомендаций для разработчиков можно найти тут. Если мы упустили что-то важное, будем рады вашим предложениям в комментариях.