Еще в прошлом году количество трафика с мобильных устройств превысило количество ПК пользователей и после выхода отчета в конце 2019 года от SimularWeb это тренд подтвердился.
Подробно можно почитать здесь: https://wbest.ru/blog/uvelichenie-veb-trafika-v-2019-godu-bylo-obuslovleno-mobilnostyu
Мобильный трафик растет, но у пользователей мобильных устройств другие привычки просмотра сайтов. Придется не только делать адаптивные сайты, но и пересматривать их структуру - довольно кратко и емко суть данного отчета отписал Аркадий Морейнис.
Вопрос о наличии у сайта версии способной корректно работать на гаджетах встал еще более остро.
В этой статье мы не будем сравнивать варианты реализации версии для мобильных телефонов. Мы хотим рассказать о подходе или методологии - 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 не только макет сайта, но и контент – отдайте предпочтение информативным материалам.
Часть материла взято с: https://geniusmarketing.me/lab/vse-o-mobile-first-ili-kak-ne-poteryat-pozicii-v-google-v-2018-2019-godu/
вверх