В 2020году статистика показала, что трафик, приходящий со смартфонов на 70 % превысил трафик пользователей компьютеров. С тем временем как доля мобильного интернета растет это кардинальным образом меняет направлении целых индустрий. Компании все больше переходят на мобильные платформы, стриминги, игры. Благодаря развитию 4G, начали появляться новые приложения, которые ранее были невозможны, а при 5G технологиях которые потихоньку внедряются в России и Казахстане – мобильный трафик станет основным. Это создает большой спрос на мобильную разработку сайтов. Теперь сайт не только нужно адаптировать, но и перестраивать с нуля, чтобы максимально использовать возможность мобильного сёрфинга.
Мы не будем рассказывать о различиях версий и тому подобное. Мы хотим вам рассказать о новом методе в веб разработке как Mobile First.
Mobile First – что это и с чем едят?
MOBILE FIRST не отличается от традиционной разработки сайтов для мобильных устройств
Обычно как все устроено: веб дизайнер делает дизайн внешнего вида страницы для компьютера, а потом верстальщик перестраивает дизайн под мобильную версию. Mobile First же изначально ориентирует на разработку отдельной версии сайта для смартфонов. Что значит, на первой стадии нацеливаются на мобильную версию, а потом уже ее переделывают «десктопную»
В этом случаем мобильная версия не выглядит незавершенной, сделанной за 30 минут по образу полной версии сайта. Отнюдь, все работает корректно, ничто, но вылезает за рамки, и приятно глазу.
Кто задал этот тренд?
Первыми на такой шаг решился Google. Именно он ввел новый критерий, при котором сайты без мобильной версии не будут корректно индексироваться. Тем самым вынуждаю целую индустрию теперь уделять на разработку версий для смартфонов особое внимание.
Если хотите опередить другие фирмы в списке органической выдачи Google, то самое время заняться полной адаптации вашего сайты под смартфоны, пока это не сделали ваши конкуренты.
Уже около 70% пользователей приходят со смартфонов
Согласно Google Analytics с каждым годом эта цифра будет только расти.
Также была приведена статистика, показывающая очень интересные цифры:
В чем разница между Mobile First и адаптацией?
АДАПТИВНЫЙ ДИЗАЙН
Сайт в адаптивном дизайне состоит из нескольких макетов. В каждом из них – структура размещения элементов на сайте под разные размеры экранов. Движок определяет диагональ, разрешение и соотношение сторон дисплея, на котором пользователь открыл страницу, и загружает соответствующий шаблон.
Например, для устройств с экранами в диапазоне от четырех до шести дюймов (смартфоны) создается один макет, от семи до одиннадцати (планшеты) – второй, а от двенадцати и больше (ноутбуки) – третий.
ОТЗЫВЧИВЫЙ ДИЗАЙН
В отзывчивом дизайне макет сайта подстраивается под ширину экрана, на котором человек смотрит страницу. Даже если окно браузера изменится на один пиксель, страница автоматически адаптируется под новые размеры.
Такой подход позволяет не тратить время на создание мобильной версии сайта. При этом будет не лишним убедиться, что все элементы нормально смотрятся на разных устройствах.
Адаптивный и отзывчивый дизайны похожи – оба они подстраиваются под размеры экранов. Разница в том, что в первом случае контент может быть только фиксированных размеров, предусмотренных макетом, а во втором – способен динамически меняться:
MOBILE FIRST
Минус адаптивных дизайнов в том, что, когда создают «десктопную» версию сайта, разработчики сталкиваются с многими неудобствами при адаптации этого сайта на мобильные устройства. И это явно отражается на дизайне и юзабилити сайта со смартфонов.
Как уже было сказано раньше метод «обратной» разработки Mobile First заключается в том, что в первую очередь делают сайт под смартфоны, а затем ее видоизменяют для версии на ПК. При таком способе, мобильная версии выглядит гораздо лучше и работает быстрее.
К примеру, сайт популярного журнала Esquire был разработан, следуя методике Mobile First:
Основные критерии метода Mobile First
Для примеров вы можете посмотреть мобильные версии сайтов, таких как Booking.co и ETQ. Когда Fortnum & Mason, провели полный редизайн мобильной версии их продажи со смартфонов выросли на 57%!
Можно у всех заметить общие элементы: простой понятный интерфейс, интуитивно видно, как ориентироваться по сайту, номера не просто текст, а также элементы которою делают покупку намного проще.
Адаптируйте под Mobile First не только макет сайта, но и контент – отдайте предпочтение информативным материалам.
WhatsApp
Меню
Позвонить
