Стратегия Mobile First

Mobile_first

Стратегия Mobile First: что это и почему на него стоит обратить внимание?

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

В этом материале мы собрали все, что нужно знать о стратегии 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 строится от обратного: сначала сайт делается под смартфоны, а затем дорабатывается для десктопов. В этом случае нет ощущения, что мобильная версия неполноценна.

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

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

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

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

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

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

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

Подписывайтесь на нас в Facebook.

Веб студия Tarasoff.

28.09.2018

Читайте еще новости

Шрифт - next король веб-дизайна 2017

Шрифт - next король веб-дизайна 2017

Тенденция, определяющая большие надписи в качестве центрального монумента веб дизайна многих сайтов начала свое укрепление в 2016 году и благодаря Подробнее 14.02.2017
Львів стає центром IT індустрії в Україні

Львів стає центром IT індустрії в Україні

Місто Лева на сьогодні чи ни перше місто в Україні з розробки різних креативних ідей Подробнее 19.08.2016
Лучшие Android-приложения 2016 по версии премии Google Play Awards

Лучшие Android-приложения 2016 по версии премии Google Play Awards

19 мая состоялась церемония вручения наград первой в истории премии Google Play Awards Подробнее 23.05.2016
С первым весенним днем!

С первым весенним днем!

И пусть все мартовские коты поют Вам в унисон, когда Вы решились создать сайт! Подробнее 01.03.2016
Все новости