Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Mobile First: что в имени твоем?

Mobile First: что в имени твоем?

5 Марта 2018
Николай Гоцалюк
Front End Developer
Николай  Гоцалюк
следующая статья

Что мог делать мобильный телефон 20 лет назад? Звонить, отправлять и получать SMS, всего две основных функции.
А что поменялось спустя 10 лет? Пользователи могли слушать музыку с помощью плеера, фотографировать и даже заходить в Интернет, точнее в его примитивную версию (WAP).

Переносимся в наши дни. У нас уже не просто телефоны, а полноценные компьютеры, с возможностями, доступными ранее только на стационарном ПК. Можно и с электронной почтой управится, и новости почитать на любимом ресурсе, и фильм посмотреть, и с документами поработать...
Смартфоны и планшетные компьютеры все больше вытесняют системные блоки и ноутбуки. Но с удобностью “мини-компьютера” появляются и новые проблемы, например, относительно малый экран. Если же ваш телефон не похож на игровой системный блок, то сайты с мобильного будут загружаться куда медленнее, чем  хотелось. А если ваш доступ в интернет идет не через публичную Wi-Fi точку доступа, а через 3G или же LTE, значит делаете лишние расходы для своего кошелька.

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

Именно поэтому, многие современные сайты изначально создаются только под разрешения мобильных телефонов. Технология “Mobile First” позволяет создать сайт не используя первоначальную desktop-версию. Она упрощает путь создания сайта под определенную аудиторию юзеров, которые будут пользоваться сервисом только со смартфона.

Термин “Mobile First” впервые был использован в апреле 2009 на “Web 2.0 Expo” Марком Девисом (Marc Davis), работавшим тогда в корпорации “Yahoo!”.
Он напомнил публике, что их мобильный телефон давно уже перестал быть просто “звонилкой”, и превратился в мощное мультимедийное устройство. И  эту мощь надо правильно использовать. То, что является правильным и понятным на экране монитора, не обязательно должно быть истиной в абсолюте для дисплея поменьше. Ему нужен полностью другой подход.

Таким образом, базируясь на специфике мобильных устройств, мы разрабатываем уже второстепенно для “старших” - ноутбуков и ПК.
В центре внимания - сам пользователь, и его удобство при работе с сайтом. Никаких больше лишних эффектов - всё должно быть максимально компактно и логично. Ведь мы имеем дело далеко не всегда даже с 5 дюймами ! Возможны и 4 и даже 3.6 дюймов. В таких крохотных габаритах почти нереально разместить красивый,  функциональный слайдер. Картинки на нём будут слишком маленькие. А его загрузка может быть довольно проблемной задачей для не особо мощного устройства.

В 2015 году Google запустил новый алгоритм мобильной выдачи “Mobilegeddon”. В результате этого, на первые позиции при поиске, попадали страницы с мобильным дизайном. И только потом шли обычные сайты. Справедливости ради, обновление затрагивало только мобильную часть устройств. На компьютерах все осталось без изменений. В защиту “корпорации добра” всплывает факт: на сколько, согласно графику, увеличилось количество пользователей мобильных устройств:


Предлагаем чуть более детально рассмотреть принципы, согласно которым работает Mobile First.

Сначала взглянем на привычный всем подход Desktop-First. Он представляет собой  подход производства “от сложного к простому”:



У Mobile First все наоборот:


Казалось бы - все то же самое, разницы никакой. Просто элементы на иллюстрации идут в обратном порядке. Но подходы к производству абсолютно разные.
Плюс дизайна Mobile first состоит в том, что он не конкурирует с адаптивным. Дело в том, что адаптив изначально предполагает просмотр на большом экране. Затем, если вход осуществляется с мобильного устройства, часть контента скрывается.
Верстка такого продукта вызывает дополнительные осложнения из-за необходимости доступности скрытого контента, придется применять ajax запросы, например придерживаться реализации LazyLoad для подключения картинок.

Процесс верстки ничем не отличается. Единственное различие в том, что мы сначала создаем мобильную версию.

Для адаптации лучше всего применить медиа-запросы:



Также, в зависимости от проекта, нам могут пригодиться и такие варианты:

Не стоит забывать о поддержке в различных браузерах:
https://caniuse.com/#search=orientation

Если в качестве значения элемента “width” в метатеге “viewport” указывается “device-width”, это значение обновляется в случае, если пользователь меняет ориентацию экрана смартфона или планшета.

В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства.
Также может пригодится и JavaScript библиотека для определения устройства. Их довольно много. Можете использовать, например: device.js https://github.com/borismus/device.js/tree/master
Что касается разделения стилей в разные файлы, то это один из спорных вопросов. Возможен такой способ:


Это будет полезным, в случае если заказчик желает разделить сайт на мобильную и десктопную версию.Mobile-first в основном зависит от бюджета: его разработка займет дополнительное время и это увеличит стоимость проекта. Но если рассматривать только этап верстки, то этот подход можно применять как отдельный инструмент. В неумелых руках mobile-first может превратится в mobile-only  и получится не очень красиво:



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

В конце нашей статьи, хотим напомнить, что вы можете задавать нам вопросы в наших группах в соцсетях. Постараемся ответить каждому.

Всем остальным желаем чистого кода и красивого дизайна :)









Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут