Что такое mobile first и почему он так актуален в 2019 году?

В этой статье мы хотим ответить на вопрос - что такое mobile first сайты и какие они должны быть в 2019 году

В интернете весь 2018 год горячо обсуждался актуальный способ разработки сайтов - mobile first. 1 июля Google запустил алгоритм, ранжирующий сайты по принципу mobile-first. 
Сегодня мы хотим обсудить - что это такое и насколько этот подход важен в 2019 году.

Если кратко, то mobile first – это способ проектирования разработки сайта таким образом, что в первую очередь он будет использоваться пользователями с мобильных устройств.


Почему такой метод стал набирать популярность - нам даст ответ статистика. 

Согласно исследованиям агентства GFK, 61% (73 млн) жителей России пользуются мобильным интернетом. А 35% (32 млн) используют только мобильные устройства.

Поэтому, чтобы в ближайшем времени не почувствовать спад продаж (особенно, если ваши услуги и товары активно покупаются в интернете) - проверьте, насколько удобно сейчас ваш портал адаптирован под мобильные устройства.

Что мы видим по статистике проникновения мобильного интернета в России:


Проникновение мобильного интернета в России

Особый интерес представляет рост статистика мобильного трафика:

mobile only аудитория интернета в россии

Ситуация складывается такая, что 32 миллиона россиян пользуются только мобильным интернетом. Смартфон сейчас есть в каждом кармане  и от домашнего компьютера или ноутбука люди могут отказаться.
При этом, это не дети (вся статистика 16+), а вполне обеспеченное и платежеспособное население, которое может стать вашими постоянными покупателями.

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

Что такое mobile first сайт?

Mobile First - это совсем не то же самое, что адаптивный сайт, их нельзя сравнивать. Адаптивные сайты создаются в таком порядке - сначала разрабатывается десктопная версия (для ПК и ноутбуков), которая уже адаптируется под мобильные девайсы и их небольшие экраны.

Mobile First сайты разрабатывают с другого конца. Сначала создают мобильную версию, а потом адаптируют её под десктоп. Бывает, что к десктопной версии добавляют мобильную версию сайта. Т.е., делают две версии сайта, как в старые-добрые времена.

Mobile First - создаются ровно наоборот.

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

Чтобы сделать удобный (или улучшить существующий) сайт для мобильных, мы рекомендуем придерживаться этих правил:

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

Идеальный размер шрифта для мобильных версия - от 16. Учитывая разрешения смартфонов - такой текст читается легко, контент потребляется быстрее.
Большие куски текста (если это не статья), можно убирать под кнопки “Подробнее” или “Читать ещё”.

Горизонтальный скролл - должен отсутствовать. Ни один элемент не должен вылезать за пределы экрана.

Картинки делаем меньше, но при нажатии - увеличиваем. Если человека что-то заинтересует, чтобы он мог это легко разглядеть.

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

Откажитесь по максимуму от всплывающих окон и popup’ов.

И самое главное - делайте упор на конкретные действия, поменьше “воды”. Мобильные пользователи не ждут от вашего сайта большого количества контента, графики, динамики. Цель таких - быстро узнать, быстро купить, быстро решить свой вопрос. Упрощайте им задачу. 


Кстати, если вы еще выбираете на чем разрабатывать сайт - обратите внимание на продукты от 1C-Битрикс.
Например CMS Битрикс:Управление Сайтом уже адаптирована под все мобильные разрешения и устройства, контент на ней отлично выглядит на смартфонах. 

Либо вы можете использовать Готовые решения - чтобы сократить время на разработку. Там тоже всё готово к работе с мобильных.

Остались вопросы или нужна разработка mobile first сайта? Оставьте свою заявку в форме ниже - мы обязательно вам поможем!

Есть задача?
Найдем решение!

Нажатием кнопки я принимаю условия Оферты и согласен с Политикой конфиденциальности