Все о Mobile First, или Как не потерять позиции в Google в 2019-2020 году

Print Friendly, PDF & Email

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

На сегодняшний день около 53% мирового веб-трафика приходится на мобильные устройства. К концу 2019 года этот показатель может вырасти до 60%. Не обращать внимание на мобильную версию своего сайта – преступление против бизнеса!

В этом материале мы собрали все, что нужно знать о стратегии Mobile First при создании и оптимизации сайтов, а также объяснили, почему ее обязательно нужно внедрить уже в ближайшее время.

Что такое Mobile First и почему это важно

Чем Mobile First отличается от привычного процесса создания сайтов

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

Mobile First подразумевает изначальное создание именно мобильной версии. То есть первым делом веб-разработчики идеально подгоняют проект под смартфоны и лишь потом адаптируют его для отображения на десктопах.

При таком подходе не возникает ощущение, что мобильная версия обрезана или недоработана – элементы не наезжают друг на друга, а все меню и ссылки корректно работают.

Что такое Mobile First

Тренд на Mobile First задала компания Google

Первые шаги к Mobile First были сделаны в 2015 году. Google внедрила новый алгоритм ранжирования, согласно которому сайты без мобильной версии потеряли позиции в поисковой выдаче.

На конференции SMX Advanced в 2017 году компания пошла еще дальше и запустила индексацию по принципу Mobile First. Поисковик начал рассматривать мобильные версии сайтов как основные, а качество их оптимизации учитывать при формировании выдачи.

Полный переход на Mobile First займет несколько лет, но откладывать адаптацию сайта под данный метод не стоит. Сделаете это раньше конкурентов – будете выше в поиске.

Зависимость места в выдаче от мобильной версии

Около 50% посетителей заходят к вам на сайт с телефонов

Если вы посмотрите статистику своего сайта в Google Analytics, увидите, что 50% трафика или даже больше приходится на мобильные устройства. С каждым годом этот показатель будет только расти.

В 2017 году было проведено несколько масштабных исследований на тему мобильных сайтов, вот самые интересные данные:

  • 60% опрошенных заявили, что вряд ли вернутся на сайт с неудобной мобильной версией;
  • 57% пользователей уверены, что никогда не будут рекомендовать интернет-бизнес с плохим мобильным сайтом;
  • 80% сайтов из рейтинга Alexa Rank имеют адаптированные мобильные версии;
  • 69% времени в сети приходится на использование смартфонов;
  • Каждый час с мобильных устройств осуществляется 68 млн поисковых запросов в Google;
  • 35% мобильных поисковых запросов совершается с устройств с 5,1-дюймовыми экранами. Самое популярное разрешение дисплея – 720 x 1280 точек.

Чем адаптивный и отзывчивый дизайны отличаются от Mobile First

Адаптивный дизайн

Сайт в адаптивном дизайне состоит из нескольких макетов. В каждом из них – структура размещения элементов на сайте под разные размеры экранов. Движок определяет диагональ, разрешение и соотношение сторон дисплея, на котором пользователь открыл страницу, и загружает соответствующий шаблон.

Например, для устройств с экранами в диапазоне от четырех до шести дюймов (смартфоны) создается один макет, от семи до одиннадцати (планшеты) – второй, а от двенадцати и больше (ноутбуки) – третий.

Адаптивный дизайн

Отзывчивый дизайн

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

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

Адаптивный и отзывчивый дизайны похожи – оба они подстраиваются под размеры экранов. Разница в том, что в первом случае контент может быть только фиксированных размеров, предусмотренных макетом, а во втором – способен динамически меняться:

Отзывчивый дизайн

Mobile First

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

Стратегия Mobile First строится от обратного: сначала сайт делается под смартфоны, а затем дорабатывается для десктопов. В этом случае нет ощущения, что мобильная версия неполноценна.

Хороший пример – сайт Esquire. Он создан по принципу Mobile First:

Чек-лист: каким должен быть сайт Mobile First

Проверьте, соответствует ли мобильная версия вашего сайта следующим пунктам:

  • Информация отображается корректно как в книжной, так и в альбомной ориентации;
  • Все кликабельные элементы работают;
  • Отсутствуют тяжелые изображения, которые замедляют загрузку страницы;
  • На сайте нет ничего, связанного с Flash;
  • Нет всплывающих окон, которые перекрывают полстраницы;
  • Нигде не задействована горизонтальная прокрутка;
  • Контактный номер кликабельный или его хотя бы можно скопировать;
  • Поля в форме регистрации короткие и простые, отключена функция автозаполнения (часто может подтягиваться некорректная информация);
  • Все кнопки сделаны с помощью CSS, нет кнопок-изображений;
  • Размер картинок меняется автоматически в зависимости от типа устройства;
  • Есть возможность совершить покупку в один клик.

Примерами для вдохновения могут послужить мобильные версии Booking.com, ETQ и Fortnum & Mason. Грамотный редизайн последнего начал приносить сети ресторанов и магазинов продуктовых подарков на 57% больше заявок именно со смартфонов.

Общие черты этих сайтов: дизайн не перегружен, отчетливо видны поисковые строки и корзины, есть кликабельные номера, а также вспомогающие элементы, которые подводят пользователя к покупке.

Примеры сайтов Mobile First

Адаптируйте под Mobile First не только макет сайта, но и контент – отдайте предпочтение информативным материалам.

Все о профессии интернет-маркетолога

18 и 19 июня Олесь Тимофеев проведет серию бесплатных онлайн мастер-классов. Он расскажет, как стать востребованным маркетологом за 3 месяца, устроиться в престижную компанию и зарабатывать $2000-5000 ежемесячно. Регистрируйтесь прямо сейчас:

ЗАБРОНИРОВАТЬ УЧАСТИЕ