Бесплатная консультация маркетолога ПодробнееБесплатно

Мобильная версия важнее десктопной?

Mobile first 2021 году. Мобильная версия важнее десктопной? (адаптивная верстка или мобильный сайт)

В 2020году статистика показала, что трафик, приходящий со смартфонов на 70 % превысил трафик пользователей компьютеров. С тем временем как доля мобильного интернета растет это кардинальным образом меняет направлении целых индустрий. Компании все больше переходят на мобильные платформы, стриминги, игры. Благодаря развитию 4G, начали появляться новые приложения, которые ранее были невозможны, а  при 5G технологиях которые потихоньку внедряются в России и Казахстане – мобильный трафик станет основным. Это создает большой спрос на мобильную разработку сайтов. Теперь сайт не только нужно адаптировать, но и перестраивать с нуля, чтобы максимально использовать возможность мобильного сёрфинга.

Мы не будем рассказывать о различиях версий и тому подобное. Мы хотим вам рассказать о новом методе в веб разработке как Mobile First.

Mobile First – что это и с чем едят?

MOBILE FIRST не отличается от традиционной разработки сайтов для мобильных устройств

Обычно как все устроено: веб дизайнер делает дизайн внешнего вида страницы для компьютера, а потом верстальщик перестраивает дизайн под мобильную версию. Mobile First же изначально ориентирует на разработку отдельной версии сайта для смартфонов. Что значит, на первой стадии нацеливаются на мобильную версию, а потом уже ее переделывают «десктопную»

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

pastedGraphic.png

Кто задал этот тренд?

Первыми на такой шаг решился Google. Именно он ввел новый критерий, при котором сайты без мобильной версии не будут корректно индексироваться. Тем самым вынуждаю целую индустрию теперь уделять на разработку версий для смартфонов особое внимание.

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

pastedGraphic_1.png

Уже около 70% пользователей приходят со смартфонов

Согласно Google Analytics с каждым годом эта цифра будет только расти.

Также была приведена статистика, показывающая очень интересные цифры:

  • 60% людей сказали, что не возвращаются на плохие и неудобные сайты;
  • 57% утверждают, что сайты с плохой мобильной версии отталкивают их от сервиса;
  • 71% столько времени сети приходится на смартфоны;
  • Каждые 60 минут с телефонов приходит более 70 млн запросов в Google;

В чем разница между Mobile First и адаптацией?

АДАПТИВНЫЙ ДИЗАЙН

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

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

pastedGraphic_2.png

ОТЗЫВЧИВЫЙ ДИЗАЙН

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

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

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

pastedGraphic_3.png

MOBILE FIRST

Минус адаптивных дизайнов в том, что, когда создают «десктопную» версию сайта, разработчики сталкиваются с многими неудобствами при адаптации этого сайта на мобильные устройства. И это явно отражается на дизайне и юзабилити сайта со смартфонов.

Как уже было сказано раньше метод «обратной» разработки Mobile First заключается в том, что в первую очередь делают сайт под смартфоны, а затем ее видоизменяют для версии на ПК. При таком способе, мобильная версии выглядит гораздо лучше и работает быстрее.

К примеру, сайт популярного журнала Esquire был разработан, следуя методике Mobile First:

pastedGraphic_4.png

Основные критерии метода Mobile First

  • При двух режимах ориентации информация отражается правильно;
  • Кнопки работают корректно;
  • Нет тяжеловесных файлов;
  • Отсутствие продуктов Flash;
  • Нет разных pop-up;
  • Нет «скролов» по горизонтали;
  • Контактный номер не просто текст, а еще и кнопка вызова;
  • Простые поля заполнения;
  • Все кнопки являются строчками кода, а не картинками;
  • Фоновые картинки лаконично подстраиваются под масштаб смартфонов и его ориентацию;

Для примеров вы можете посмотреть мобильные версии сайтов, таких как Booking.co и ETQ. Когда Fortnum & Mason, провели полный редизайн мобильной версии их продажи со смартфонов выросли на 57%!

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

pastedGraphic_5.png

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

WhatsApp Меню Позвонить
WhatsAppЗаявки принимаем 24/7
Позвонитьс 9:00 до 22:00
Без выходных