Что такое mobile first

Рань­ше все сай­ты, про­грам­мы и сер­ви­сы дела­ли сна­ча­ла для ком­пью­те­ров и боль­ших экра­нов. Потом, может быть, дела­ли адап­тив­ную вер­сию для мобиль­ных или отдель­ный мобиль­ный сайт. Или не дела­ли, а остав­ля­ли как есть — кому нуж­но, тот и так спра­вит­ся с мел­ким интер­фей­сом на экране теле­фо­на.

Теперь всё ина­че: про­смот­ров с теле­фо­на уже боль­ше, чем с ком­пью­те­ра. Неко­то­рые сай­ты или сер­ви­сы обслу­жи­ва­ют 70—90% кли­ен­тов с теле­фо­на. Поэто­му появи­лось направ­ле­ние в дизайне и раз­ра­бот­ке — mobile first. Это озна­ча­ет «сна­ча­ла для мобиль­но­го», а деск­топ­ную вер­сию сде­ла­ем потом или вооб­ще не сде­ла­ем.

Как устроено

В под­хо­де mobile first рабо­та идёт так:

  1. Рису­ет­ся дизайн, что­бы на смарт­фоне всё выгля­де­ло отлич­но. На осно­ве это­го дизай­на пишет­ся код. Или код и дизайн дела­ют­ся парал­лель­но на осно­ве обще­го про­то­ти­па. 
  2. Если нуж­но — дела­ют отдель­ную вер­сию для ком­пью­те­ра, если нет — доде­лы­ва­ют мобиль­ный дизайн, что­бы он «рас­ши­рял­ся» до боль­шо­го экра­на.
  3. Если нуж­но что-то улуч­шить в про­грам­ме или сер­ви­се, то сна­ча­ла дела­ют это для смарт­фо­нов, а потом для ком­пью­те­ров. Ино­гда вер­сия для смарт­фо­на рабо­та­ет луч­ше, чем настоль­ная или в вебе.

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

В чём нюансы проектирования под мобилку

О, их мас­са

  • В ком­пью­те­ре чело­век вво­дит дан­ные через супер­точ­ную мышь. В теле­фоне ввод через огром­ную сосиску-палец. Поэто­му деск­топ­ные кноп­ки и ссыл­ки могут быть малень­ки­ми, а мобиль­ные долж­ны быть боль­ши­ми.
  • У поль­зо­ва­те­ля деск­то­па есть быст­рая кла­ви­а­ту­ра, а на мобил­ке она неудоб­ная, мел­кая, мед­лен­ная и зани­ма­ет пол-экрана. Деск­топ­ное при­ло­же­ние ещё может попро­сить нас что-то вве­сти с кла­вы, а мобиль­ное долж­но это­го избе­гать.
  • И наобо­рот: деск­топ­ное при­ло­же­ние долж­но со страш­ной силой под­дер­жи­вать горя­чие кла­ви­ши, копировать-вставить, очист­ку дан­ных из буфе­ра. А мобиль­ное долж­но пола­гать­ся на авто­за­пол­не­ние.
  • Мобил­ка хоть и боль­шая, но мень­ше деск­то­па. Поэто­му мобиль­ный экран — это одна колон­ка с кон­тен­том и бес­ко­неч­ный скролл. Деск­топ, наобо­рот, боль­шой и широ­кий, там мож­но укла­ды­вать кон­тент в несколь­ко столб­цов, делать вит­ри­ны и шикар­ные рас­клад­ки.
  • Мобил­ка вытя­ну­та свер­ху вниз, деск­топ — сле­ва напра­во. Иде­аль­ный кон­тент для мобил­ки — вер­ти­каль­ный, для деск­то­па — гори­зон­таль­ный.
  • С мобил­ки мож­но лег­ко позво­нить, поэто­му этот сце­на­рий мож­но вполне рас­смат­ри­вать как часть при­ло­же­ния (напри­мер, позво­нить так­си­сту). А с деск­то­па мож­но раз­ве что напи­сать в мес­сен­дже­ре.
  • Мобил­ка зна­ет о тебе боль­ше, чем деск­топ: она может узнать тебя по отпе­чат­ку паль­ца и по лицу, в неё встро­ен пла­тёж­ный модуль, мобил­ка зна­ет о сво­ём место­по­ло­же­нии. Мак­си­мум, что может деск­топ, — пом­нить твой номер кар­ты и знать, в каком ты горо­де. Это зна­чит, что мобил­ка долж­на сама узна­чать твой адрес, сама пред­ла­гать тебе спо­со­бы достав­ки, сама пред­ла­гать опла­тить встро­ен­ны­ми сред­ства­ми.
  • Мобил­ка — это твоё интим­ное про­стран­ство, поэто­му любое сооб­ще­ние или уве­дом­ле­ние отвле­ка­ет на себя вни­ма­ние. Нуж­но быть осто­рож­ным, отправ­ляя что-то поль­зо­ва­те­лю или уве­дом­ляя его. Деск­топ — это тер­ми­нал, к кото­ро­му ты под­хо­дишь или ухо­дишь, когда тебе нуж­но. Там мень­ше таких огра­ни­че­ний.

И мож­но так ещё дол­го рас­суж­дать. Но уже сей­час вид­но, что мобил­ка и деск­топ — два раз­ных зве­ря. 

Где используется

Mobile First исполь­зу­ет­ся вез­де, где мож­но пока­зать товар, услу­гу или про­ект на малень­ком экране без ущер­ба для смыс­ла, напри­мер:

  • интернет-магазины (Zara),
  • сер­ви­сы зака­за еды (Додо-пицца),
  • служ­бы так­си (Яндекс Так­си),
  • соц­се­ти и соци­аль­ные сер­ви­сы,
  • сер­ви­сы дистан­ци­он­ных услуг (интернет-банки).

Если ваш про­дукт доста­точ­но прост для того, что­бы о нём мож­но было про­чи­тать со смарт­фо­на и разо­брать­ся в нём, то мож­но исполь­зо­вать mobile first.

Плюсы и минусы

Плю­сы:

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

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

  • такие про­дук­ты раз­ра­ба­ты­ва­ют­ся доль­ше, если под­дер­жи­вать все смарт­фо­ны и делать вер­сию для ком­пью­те­ра;
  • раз­ра­бот­ка и дизайн сто­ят доро­же;
  • при­хо­дит­ся под­дер­жи­вать дизайн для ста­рых устройств с малень­ким экра­ном или нестан­дарт­ны­ми харак­те­ри­сти­ка­ми.

Текст:
Миша Поля­нин

Иллю­стра­ции и редак­ту­ра:
Мак­сим Илья­хов

Кор­рек­тор:
Ира Михе­е­ва

Иллю­стра­тор:
Даня Бер­ков­ский

Вёрст­ка:
Маша Дро­но­ва

Достав­ка:
Олег Веш­кур­цев