В чем идея Mobile First подхода?

Question

[Роман Якимчук]

Друзья,

Сейчас задумался что такое Mobile First подход на самом деле, и всё что удалось найти в интернете, это:

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

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

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

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

Comments

[Александр]

<link rel="stylesheet" href="/assets/css/mobile.css" media="all">
<link rel="stylesheet" href="/assets/css/desktop.css" media="screen and (min-width: 860px)">
<link rel="stylesheet" href="/assets/css/print.css" media="print">

Вот и всё.

[Darya Shvakh]

Александр, Добрый день.
А если можно объясните пожалуйста, что это даёт?
Если на скорость загрузки в основном влияет объём и качество изображений?
Количество dom элементов и стили это как бы не критично?
Но я могу ошибаться)) Объясните пожалуйста!!!
Спасибо!

Answer 1

[Сергей Соколов]

Сумев обходиться малым, позволить себе больше — проще, чем обладая многим, начать ограничивать себя.

То же длиннее и на англ. в посте.

абзац

Progressive Advancement has won the game for now as far as I can see. If UI/UX designers start a product design with its desktop version, they will inevitably want to make use of most of the advantages of the advanced end. For example, the hover effect which is supported by a cursor mouse; HD images & complex charts which can display normally only when there is a recent bandwidth. In this way, the designers will make efforts to complete an amazing desktop version and only to find it can hardly be adopted on a mobile end unless they give up a lot of beautiful ideas. If so, the mobile end version will be more like an afterthought, an incomplete product which’s been watered down.

Answer 2

[Шохрух Шаймардонов]

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

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

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

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

Данное "правило" как раз и появилось на фоне тренда "запихнуть все"

Answer 3

[Athanor]

1. Mobile first подразумевает определенный процесс работы ближе к продуктовой разработке. Здесь важно не сделать все экраны сразу, а постепенно версия за версией выкатывать функционал. На мобильных экранах функционал ограничен устройством, а на настольных экранах он шире.

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

Если подытожить, то можно и так и так, действительно, особенно если вы работаете с заказной разработкой, когда надо просто «задизайнить» и отдать все экраны сразу и забыть. Но в условиях, продуктовой разработки, когда нужно экономить ресурсы, mobile first выглядит эффективней.

2. Видимо ещё дело в том, что мобильный трафик несколько лет назад превысил десктопный.