AzaBroflovski
@AzaBroflovski
webdev

Плюсы и минусы верскти: Mobile First vs Desktop First?

Прошу не кидаться камнями, гуглить тоже умею ;
Хотелось бы узнать плюсы и минусы Mobile First и Desktop First верстки ;

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


Всем заранее спасибо !

Не обязательно, но хотел бы получить более развернутый ответ
  • Вопрос задан
  • 7604 просмотра
Решения вопроса 4
Wolfnsex
@Wolfnsex Куратор тега CSS
Если не хочешь быть первым - не вставай в очередь!
Давайте попробую по пунктам:
Почему (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Кбит, специально для тех у кого кончился трафик и интернет работает с ограничениями скорости". Остальное я описал выше :)
Ответ написан
Olek1
@Olek1
Из десктопной версии сделать мобильную версию гораздо проще, чем из мобильной пытаться сделать десктопный интерфейс. Если мобайл-фёрст то про креатив можно забыть.

P.S. мобайл не фёрст, а секьюр и креатив фёрст, потом десктоп, а потом уже мобайл с урезанным функционалом. А мобайл фёд или фоус. Не ведитесь на лозунги толпы, общество часто ошибается. И общественность склонна только клепать штамповки из того, что им скажут.
Ответ написан
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
1. Почему Mobile First лучше ;

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

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

Но мы не в идеальном мире живём ....
2. Почему Mobile First хуже ;

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

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

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

Если из макета видно, что десктоп версия не сильно отличается от мобайла, внешний вид, расположение блоков их количество. Где что надо убрать или добавить. Если можно застилиризовать десктоп версию из мобильных стилей без больших переделок и доработок, то однозначно мой выбор лучше начинать от мобильной версии.
Ответ написан
x264
@x264
Напишу теоретический плюс mobile first верстки. Поисковики легко определят, что ваша верстка mobile first. И за счет этого могут повысить в выдаче. Получается плюс к SEO.

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


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

Тут уж вопрос к верстальщику, как он организует свой процесс верстки, чтобы получить меньше проблем.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
4mobile
@4mobile
WEB developer
Разницы не вижу.
Если верстка с 0, с макетами для мобильных и десктопов, верстаю mobile first.
Если готовый десктоп-сайт и нужно добавить "мобильности", не переверстываю, добавляю, получается desktop first.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы