Что такое 

mobile first

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

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

Теперь ситуация изменилась: Яндекс.Метрика любого сайта показывает, что просмотров со смартфонов на порядок больше, чем с десктопов – примерно 70 процентов. Поэтому разработчики стали думать, как исправить положение, и возникло такое направление в IT-сфере, как mobile first.

Сегодня более актуально сначала писать код для мобильного, а потом адаптировать для компьютера или вообще не адаптировать (такое тоже бывает).

Как это

работает

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

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

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

Особенности и отличия

  • Кнопки. Десктоп снабжен суперточной мышью, с помощью которой пользователь вводит данные. В смартфоне это делается с помощью «толстого» пальца. Поэтому для компьютера кнопки создают маленькие, а для мобильного – большие.

  • Клавиатура. В компе клавиатура быстрая и удобная, в смартфоне – медленная и мелкая, и выскакивает на половину экрана. Поэтому на десктопе можно предложить человеку что-то набрать на клавиатуре, а в смартфоне лучше этого избегать. То же касается и «горячих» клавиш, ими в телефоне пользоваться сложно.

  • Экран. Приложение в смартфоне представляет собой одну колонку с текстом и картинками, которую можно долго скроллить. На декстопе – широкое поле для деятельности, тут можно размещать текст в две колонки, витрины, баннеры.

  • Контент. В мобильной версии им пользуются сверху вниз, вертикально, на компьютере – слева направо, горизонтально.

  • Возможности. С телефона легко набрать номер в приложении, например, заказать такси, а затем и позвонить водителю. В компе – нужно писать сообщение.

  • Узнавание. Смартфон можно назвать личным, и даже интимным пространством. Оно открывается по отпечатку пальца, определяет местонахождение, может заплатить по карте, предложить способ доставки. Так что десктопу до мобильного далеко.

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

Где применяют

Формат mobile first удобен в проектах, предлагающих услуги и товары, если их можно выложить на маленьком экране. Главное, чтобы не пострадал смысл предложения.

Например:

  • Доставка еды (кафе, рестораны).
  • Заказ такси (любые службы с приложением).
  • Интернет-магазины (продажа мебели, продуктов).
  • Дистанционные услуги (интернет-банкинг).
  • Общение в соцсетях.

Если описание качества вашего товара или услуги будет удобно для чтения с мобильного телефона, mobile first вам подходит.

Преимущества и недостатки

Из плюсов

Увеличивает количество заказов, так как приложением на смартфоне пользоваться проще и скорее, чем на компе.

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

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

Из минусов

Проект, по сути, состоит из двух частей, совершенно разных по выполнению.

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

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

Выполнять работу сложнее из-за разного разрешения экранов и различия в интерфейсах.

Но несмотря на такие «минусы», продукт получается более качественным, современным, функциональным. А значит, приносит больше денег.
Зарегистрироваться на курсы программирования