Mobile First — что это? Концепция, примеры, фреймворки, книги

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

Что означает понятие mobile first и почему это важно?

Обычно весь процесс работки сайта выглядит следующим образом – заказчик пишет ТЗ (Техническое задание), после обсуждает с дизайнером то как будет выглядеть проект, а после принимается за работу и рисует проект. Дальше макеты и ТЗ отдаются программистам и верстальщикам, после чего одни принимаются за разработку backend, а друге frontend. Когда все готово проводится тестирование и правки ошибок, ну а дальше мы получаем полноценную систему.

В целом это огромный процесс, который может длиться несколько месяцев, а в некоторых случаях дело может затянуться и на годы – если система очень огромная. В целом Mobile First подразумевает изначальное создание верстки именно под мобильные версии. То есть сначала мы верстаем для мобильных, а только потом настраиваем под Desctop версию.  При этом отпадает ощущение, что мобильная версия как-то недодумана или вообще обрезана, а все потому, что в первую очередь много внимания нацелено разработку для мобильных.

Вот что я имею ввиду:

Адаптивный экран Mobile First

Понятно, что пример слишком преувеличен, ведь можно сделать красиво, когда применяется старая концепция Desctop first, но в силу того, что основное внимание было направленно не на мобильную версию, меняется несколько вещей:

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

Зачем нужна концепция mobile first?

А теперь объясняю откуда она появилась и для чего была придумана. Первый кто задал тренд это был Google в 2015 году. Именно они, внедрив новый алгоритм согласно которому сайты без мобильной версии должны терять позиции в поисковой системе, вынудили разработчиков начать делать адаптивные версии сайтов.

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

По факту в этом и все дело – мы делаем на сайтах Mobile first для поисковых систем.  А теперь я хочу поделиться небольшой статистикой. Правда она не касается именно этого сайта, а все потому, что все разработчики и верстальщики сидят преимущественно с компьютеров, но если брать другие тематики типа информационных, то картина меняется значительно. На львиной доле сайтов более 50% приходится именно на мобильных пользователей. Кроме того, в 2017 году было проведено несколько очень масштабных исследований на тему сайтов и их мобильной версии. Самыми интересными мне показались следующие:

  • 57% пользователей уверенны в том, что не рекомендовали бы никому сайт или интернет бизнес, у которого нет мобильной версии сайта или сайт на мобильные очень низкие качества;
  • 80% сайтов из рейтинга Alexa Rank имеют адаптивную версию сайта, что является большинством;
  • 60% опрошенных сказали, что не вернутся на сайт, у которого неудобная версия;
  • Каждый час с мобильных устройств осуществляется более 68 миллионов запросов в Google;
  • Более 35% поисковых запросов выполняется с 5.1 дюймовых экранов, а самые популярные разращения дисплеев 720 x 1280 точек.

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

На сколько он удобен по сравнению Desktop first?

Чисто, по своему мнению, скажу, что с точки зрения разработки вообще не удобно, но конечный результат очень радует. Радует тем как работает сам сайт, ну и тем на сколько быстродействующим он является. К тому же поисковые системы любят такие сайты больше.

Я даже нашел крутую анимацию, которая показывает разницу, между тем как работает резиновый макет и адаптивный, и пусть разница не большая, она все-таки есть!

Адаптивный и респонсивный сайт пример

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

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

Как вести разработку веб-приложения по mobile-first, если макеты, в основном дизайнеры предоставляют для Desctop версии?

На самом деле особых инструментов иметь для этого не нужно. Все, как и было до этого – мы можем делать это вручную ну или с помощью framework’ов. Главное выбрать такой инструмент, с которым тебе будет удобно и комфортно работать. Ранее я очень любил использовать bootstrap, потом я перешел на другие решения, хватает даже простого skeleton, с которым можно просто задать каркас сайту, ну, а все остальные блоки настраивать собственноручно с помощью scss или простого css.

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

10 отличных Mobile first css framework’ов

Понятно, что для твоей работы достаточно лишь одного фреймворка который может минимум полезных вещей. Но чтобы выбрать тот самый единственный нужно опробовать несколько, а возможно и с десяток. В целом сегодня это не проблема – просто нужно время чтобы освоиться и адаптироваться. Вот потому я и собрал 10 удобных mobile first фреймворков css с которыми ты можешь начать разработку своей верстки.

Spectre

Spectre Framework

Это современный и бесплатный феймворк, с отзывчивой CSS инфраструктурой. Он предлагает очень красивые решения – мне лично этот фреймворк очень нравится. Если брать фреймворк я бы брал этот. Все элементы основаны на flexbox, ну а так имеются различные компоненты и утилиты CSS некоторые если что можно изменить с помощью компилятора Scss. Этот набор готовых элементов и стилей очень легкий – всего 44 кб – это реально мало!

Mustard UI

Mustard Framework

Еще один легковесный CSS фреймворк. Этот фреймворк разбит на модули, потому ты можешь выбрать, что включить в сборку, а что тебе не нужно. На самом деле я и сам считаю это правильным – использовать только то, что нужно, а не скачивать и устанавливать огромный фреймворк, а после использовать минимум. В минимальной версии имеется сетка flexbox, кнопки и таблицы, формы и карточки. Кроме того, можно настраивать его с помощью scss переменных.

Bulma

Bulma Framework

Еще один фреймворк реализованный на flexbox сетке. Стоит отметить, что фреймворк полностью бесплатный. Этот фреймворк очень хорошо заточен под Mobile First, так же хорошо оптимизирован для небольших экранов. Кроме того, на гите можно собрать свою сборку, которая требуется лично тебя. Нужна только сетка? Пожалуйста, это можно сделать в несколько кликов, а после просто использовать!

UI Kit

UI KIT Framework

Крутой CSS фреймворк построенный в связке с JavaScript, кроме того внутри этой среды имеется свой набор svg иконок. Работать с этим инструментом очень просто, как сама документация выполнена очень грамотно. Кроме того, много разных опций и настроек.

TentCSS

TentCss Framework
Tent

Небольшой фреймворк выполненный по стандарту БЭМ, а также сочетает в себе flexbox сетку. Сам фреймворк запиленный под разработку адаптивных mobile first сайтов. Потому есть смысл обратить на него внимание! Лично мне этот фреймворк нравится тем что ну проще уже некуда. Сетка, заголовки, маржины с падингами, и практически на этом все. Реально это тот самый минимум, которого иногда так не хватает. Когда делаешь простой проект на быструю руку.

MaterializeCSS

Materialize Framework

Современный фреймворк основанный на Material Design. Как и любой другой подобный инструмент этот попытались сделать очень простым и удобным. Особенно если ты пользовался такой вещью как Bootstrap, то перейти на эту вещь будет максимально просто. Круто то, что имеется целый ряд шаблонов для начинающих – просто бери и используй. Но на самом деле я считаю, что у этого инструмента куда больше преимуществ в средних и больших проектах. Правда сам инструмент весит реально не мало, так как используется в сочетании с JavaScript.

Foundation

Foundation Framework
F

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

Semantic UI

Semantic UI Framework
SeSe

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

Base

Base Framework

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

MUI

MUI Framework

Это будет последний по списку, но не по значению css фреймворк который мне понравился и тем что он очень простой, и достаточно легкий – всего ~55 кб, ну и больше всего мне понравился подход разработчиков к кроссплатформенности. Они взяли и просто они разработали несколько адаптаций – для простых сайтов и для фреймворков типа React и Angular.

Кроме того, предполагается что можно с этой штукой верстать и емейлы, правда в своем портфеле я использую безотказный инструмент это Foundation for Emails, который позволяет собрать емейлы в несколько строк кода.

Mobile First примеры

Я долго думал над этим пунктом – стоит или не стоит его делать. Но все-таки я решился сделать пример который покажет, что такое Mobile First ну и как с этим работать примерно.

В первую очередь хочу сказать, что при верстке Desctop first мы использовали следующие медиа-запрос

@media (max-width: 20em) // 320px
@media (max-width: 40em) // 640px
@media (max-width: 60em) // 960px

То есть в начала мы верстали для больших дисплеев, а дальше выводили стили если размер окна браузера меньше заданного размера. Тесть так мы двигались от большего к меньшему, но если мы хочешь работать с Mobile first, то сначала пишем обычные стили, а после в медиа-запросах указываем:

@media (min-width: 40em) // 640px
@media (min-width: 60em) // 960px
@media (min-width: 80em) // 1280px

Так мы сменили max на min, ну и немного изменились цифры. Все, в целом это вся логика. А пример такой страницы можно глянуть по этой ссылке.

На что обращать внимание? В мобильном режиме у нас вообще не будет никаких медиа запросов, чисто CSS, а вот уже на компьютерах будут отображаться запросы и все подобное!

Какие лучшие книги по mobile first?

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

  • Сначала мобильные! – Люк Вроблевски
  • Отзывчивый веб-дизайн – Итан Маркотт


Это те самые книги которое реально помогают понять, как это работает, ну и в дополнение ко всему этому учат как стать хорошим frontend разработчиком!

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

Оставьте комментарий