Филин Лаки
209,74
рейтинг
13 января 2014 в 21:15

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

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

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

    В этом посте мы собрали основные советы по улучшению мобильных сайтов. Полную версию наших рекомендаций для разработчиков можно найти тут. Если мы упустили что-то важное, будем рады вашим предложениям в комментариях.
Автор: @HabrAndrey Майли Ойе (Maile Ohye), технический директор программ Google для разработчиков
Google
рейтинг 209,74
Филин Лаки

Комментарии (3)

  • +3
    Имея адаптивную верстку, для кого мобильная версия? для нокии 1100?
    Зачем поисковику мои css и js?
    • 0
      Имея адаптивную верстку, для кого мобильная версия? для нокии 1100?
      Адаптивный дизайн, отдельная мобильная версия и динамический показ — это три возможных варианта реализации и для каждого из них есть свои подходящие случаи. В целом, чаще всего мы рекомендуем адаптивный дизайн, но отдельная версия может пригодиться, например, если процессы взаимодействия с десктопной и мобильной версией настолько различаются, что требуют разных структур.

      Зачем поисковику мои css и js?
      Затем, что без них поисковик может не понять содержимое страницы.
  • –1
    если процессы взаимодействия с десктопной и мобильной версией настолько различаются, что требуют разных структур.

    а я слышал рекомендацию (с которой согласен), что мобильная версия не должна по понятности и функциональности отличаться от полной. Что бы мобильные юзеры не чувствовали себя ущербными.
    Хотя возможно и есть такой вариант, когда необходимо сделать их различными.

    Затем, что без них поисковик может не понять содержимое страницы.

    ну с Вас станется. Сидит Скайнет ИИ и смотрит очередную парралаксовую страничку в поиске ценной информации на ней.
    Уж лучше пытаться xml-схемы использовать, чем Вы там чего-нить наковыряете сквозь разметку. Разработчик должен лучше знать, что отдать поисковику, а что не стоит внимания.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка