Какие плюсы и минусы у Mobile First и Desktop First вёрстки?

Question

[Aza Broflovski]

Хотелось бы узнать плюсы и минусы Mobile First и Desktop First верстки:

1. Почему (Mobile First) или (Desktop First) лучше?
   
2. Почему (Mobile First) или (Desktop First) хуже?
   
3. Производительность (Mobile First) или (Desktop First)
   
4. Где и каким сайтам подходит (Mobile First) или (Desktop First)?
   

Comments

[Иван]

Это всего лишь подход к верстке,какие тут могут плюсы и минусы?)Какая производительность?) Либо от большего к меньшему,либо от меньшего к большему)) вот и все. Но многие советуют mobile first мол практически основные стили есть,остается раскидать их для больших экранов и все

Answer 1

[Евгений Вольф]

Давайте попробую по пунктам:

Почему (Mobile First) или (Desktop First) лучше ;
Почему (Mobile First) или (Desktop First) хуже ;

что-то из серии "Что лучше, ложка или вилка?" Ну Вы поняли... Это вопрос исключительно удобства и он напрямую зависит от того, какой у Вас исходный шаблон, и в какую сторону его проще будет адаптировать. Но даже и в этом случае, слово "лучше" тут мало уместно, скорее это вопрос удобства. Мы (в общей сложности человек 50+, от студентов до матёрых разработчиков) взяв за основу ряд параметров с отметкой "нужно делать вот так" от Google PageSpeed провели массу тестов и дискуссий... В результате которых, едино правильного подхода найдено не было. Самый удобный с точки зрения здравого смысла, был такой вариант:
1. Сначала пишем все общие стили, описывающие цвета, шрифты и всю такую ерунду
2. Для каждого диапазона разрешений создаём свой стиль-корректор, который описывает (корректирует) позиционирование элементов, их размеры, размер шрифта и т.д.

Таким образом, как Вы понимаете, "first" вообще отпадает как таковой, получается "and". Но Google'у не нравится такой подход, он просит запихивать "все важные стили" в , и отделить в таком режиме "важные стили" от "не важных" невозможно, т.к. степень "важности" определяется в зависимости от разрешения устройства. Но, говоря исключительно о личном удобстве - удобнее - начинать с мобильной версии, т.к. она априори "меньше" и расширить элемент гораздо проще, чем "слепить более мелкую его версию".

Производительность (Mobile First) или (Desktop First) ;

На производительность это в общей сложности не влияет никак, т.к. Вы банально даже JS'ы можете подгружать нужные на нужное разрешение, по этому вопрос производительности тут вообще сложно обозначить. Хотя, конечно можно опираться на такое условие как "мобильные всегда медленнее чем стационарные устройства", и из этих соображений, если такое условие "сильно вывернуть" и возвести в ранг абсолюта - тоже будет логичнее сначала делать "Mobile first".

Где и каким сайтам подходит (Mobile First) или (Desktop First) ;

MobileFirst по определению идеально подходит тем сайтам, которые изначально (в первую очередь) рассчитаны именно на мобильные устройства, например какой-нибудь "музыкальный сервис онлайн, с возможностью прослушивать MP3'шки в качестве 32-64Кбит, специально для тех у кого кончился трафик и интернет работает с ограничениями скорости". Остальное я описал выше :)

Comments

[Сергей delphinpro]

Ну вот, даже добавить нечего... )

[Евгений Вольф]

Сергей, ахаха, спасибо за отзыв :)))))

Answer 2

[Johny Smith]

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

P.S. мобайл не фёрст, а секьюр и креатив фёрст, потом десктоп, а потом уже мобайл с урезанным функционалом. А мобайл фёд или фоус. Не ведитесь на лозунги толпы, общество часто ошибается. И общественность склонна только клепать штамповки из того, что им скажут.

Comments

[Johny Smith]

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

Answer 3

[ⓒⓢⓢ]

1. Почему Mobile First лучше ;

3. Производительность Mobile First ;

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

Но мы не в идеальном мире живём ....

2. Почему Mobile First хуже ;

После мобайла для десктопа придётся возвращаться к вёрстке, чтобы нарастить всё что не вошло в мобильную версию, но есть на десктопе, одновременно работая со стилями. От этого и получается что бегаем от вьюхи к вьюхе, десктоп\мобайл

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

4. Где и каким сайтам подходит Mobile First ;

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

Answer 4

[x264]

Напишу теоретический плюс mobile first верстки. Поисковики легко определят, что ваша верстка mobile first. И за счет этого могут повысить в выдаче. Получается плюс к SEO.

Из минусов тут уже выше писали что:

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

Ведь всегда мобайл - это кастрированная версия декстопа.

Тут уж вопрос к верстальщику, как он организует свой процесс верстки, чтобы получить меньше проблем.

Answer 5

[4mobile]

Разницы не вижу.
Если верстка с 0, с макетами для мобильных и десктопов, верстаю mobile first.
Если готовый десктоп-сайт и нужно добавить "мобильности", не переверстываю, добавляю, получается desktop first.