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

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

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

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

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

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

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

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

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

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

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

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

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

• Разрешите индексацию ресурсов (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, камеру и акселерометр смартфона.
  • Увеличивайте степень социальной вовлеченности пользователей (примеры из практики).
  • Задействуйте жесты: перелистывание, нажатия, встряхивание. Это одновременно весело и интуитивно понятно.

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