В чем плюсы Mobile First подхода в верстке?

Question

[Никита Савельев]

Часто говорят "Верстай через min-width, используй Mobile First, сайт будет быстрее грузиться, трафика меньше жрет и т.д". Но я никак не пойму в чем смысл.
Какая разница, буду ли я верстать через max или min, если в итоге css файл все равно загружается полностью, со всеми стилями от десктопной версии? От того что я верстаю через min, свойств в css файле меньше не становится.

Тогда за счет чего страница должна загружаться быстрее? Ведь во всех статьях говорят, что при Mobile First страница быстрее грузится, но в этих статьях не объясняется почему.

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

Если бы я делал через min-width, то верхняя часть хедера изначально была бы скрыта (display: none), но при ширине выше, например 768px, я бы ее показал (display: block) и писал бы остальные свойства для нее в этом же медиа-запросе.

Если бы я делал через max-width, то эта часть хедера была бы изначально видна и были бы описаны все нужные для нее свойства, а при ширине меньше 768px я бы ее просто скрыл (display: none).
Как видите стилей выходит ни больше ни меньше. Вся разница лишь в том, что в первом случае (min-width) свойства для мобильной версии будут находиться выше в css-файле, чем для десктопной. И все, в этом вся разница. Где тут увеличение скорости загрузки и экономия мобильного трафика? Хотелось бы увидеть объяснение с точки зрения работы браузера, обработки им css файла. Я не могу понять, что я не улавливаю.

Comments

[Антон Литвиненко]

Так начнется же битва!
Я считаю что мобайл-фест не более чем один из способов, причем намного менее удобный в разработке чем десктоп-фест

[Сергей delphinpro]

Fight!

Никто не говорит про скорость загрузки. Либо вы не так понимаете.
Чаще всего речь идёт о скорости рендеринга на мобильных устройствах.

Ну я не буду повторяться. https://qna.habr.com/q/1216430

Кроме того, возьмите любой CSS-фреймворк. Если вдруг вам придется на них верстать, вы увидите, что там везде mobile-first. Будете дополнять его своим desktop-first кодом, получите кашу.

Да и вообще, это просто удобнее.

[Shandy]

В фронтенде не шарю, но интересно. А не проще ли сделать 2-3 файла со стилями (телефон, планшет/десктоп), а на сервер определять какое устройство и отсылать нужный файл css?

[Aetae]

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

С т.з. загрузки: на этапе коннекта мы можем получить только юзерагент, по которому судить о реальных размерах экрана можно чисто теоретически, потому, что именно подключать сервер наверняка не знает.
Это, в теории, можно решить на лету маленьким куском js на самом верху, но есть подозрение, что даже с чёрной магией document.write оно скажется на скорости загрузки плачено. Но не проверял.)

[Shandy]

Aetae, ну да, с дополнительной проверкой размера экрана средствами js загрузка станет еще медленнее. Понял, буду знать :)

Answer 1

[Виталий Першин]

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

Далее, даже если не обращать внимание на то с каких устройств заходят посетители, вам придется подстраиваться под поисковые системы, которые требуют оптимизацию под мобильные устройства. При Mobile First верстке у вас эта оптимизацию получится сама собой так как вы выбираете кратчайший путь к правильному отображению. Браузер не будет вообще применять свойства которые больше доступного размера, в то время как при first desktop будут применены все стили и переопределены, отсюда и всякие визуальные скачки при входе на сайт, которые критичны для первой отрисовки и прочие хорошо наблюдаемые не точности с отступами, вылезание блоков за пределы экрана и т.д.. А в случае, если начинают манипулировать вложенностью повышая специфичность, то первый рендеринг для мобильных устройств превращается в страдания

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

От того что я верстаю через min, свойств в css файле меньше не становится.

Ну так все приходит с опытом

Если бы я делал через min-width, то верхняя часть хедера изначально была бы скрыта (display: none), но при ширине выше, например 768px, я бы ее показал (display: block) и писал бы остальные свойства для нее в этом же медиа-запросе.

Это все нюансы, один display: block ничего не порешает. Но бывают ситуации когда стоит комбинировать и min и max, я например описываю меню в отдельных media, я не делаю общих стилей для десктопа и мобилок, потому что там общего практически ничего нет, даже цвета и шрифты иногда отличаются вот кстати размышления Вадима Макеева на эту тему, я делал так задолго до просмотра этого видео и это удобно, кроме того используя сборщик можно раскидать их в разные файлы работать как с отдельными блоками не оглядываясь на переопределения.

Comments

[Никита Савельев]

Спасибо за развернутый ответ

Answer 2

[Noder SS]

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

Comments

[Aetae]

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

[Noder SS]

Aetae, Правильно подметели!

[Виталий Першин]

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

И кстати, старушки то как раз по большей части с телефонов сейчас и сидят, в них есть все что надо, в них проще разобраться и можно таскать с собой

Answer 3

[Ольга Ветер]

Во-первых mobile first - это не только про верстку. Это гораздо больше про проектирование и приоритеты. Для хорошего результата этот подход нужно применять еще на стадии прототипирования и проработки дизайна. Всё проектирование интерфейса должно плясать от мобильной версии как основной, достаточной и удобной. Потом этот интерфейс уже дополняют и развивают в десктопный, но также через анализ и проектирование. А не как бывает крайне часто - держи десктопный макет, сверстай, по пути придумай, как это все впихнуть на мобильник. Но увы, клиент обычно не хочет за это платить, а дизайнер не может реализовать достаточно квалифицированно, потому что "я в эту вашу верстку не понимаю, я красиво делаю". Это не про всех, конечно же, но такие проблемы по моему опыту встречаются чаще, чем какой-либо иной расклад.

Во-вторых, mobile first даже в верстке точно не только про min / max - width, это опять же про проектирование, направление мысли, выбор инструментов... глубина зависит от умений, исходных данных и поставленной задачи.

Что на деле: как правило при верстке / разработке сайта подходом mobile-first пытаются закрыть те упущенные вещи, которые должны были быть сделаны на этапе проектирования, но не сделаны. Увы, среди разработчиков и верстальщиков знатоков юзабилити также не много, как среди дизайнеров людей, понимающих нюансы верстки / разработки. Поэтому мы имеем то, что имеем, и принципиальность разницы desktop / mobile first становится действительно порядком "ненатуральной", надуманной. Примерно также выглядит ситуация c последователями pixel perfect верстки по кривым-косым макетам без хоть сколько-нибудь продуманной дизайн системы, но это уже совсем другая история.

Answer 4

[Владимир Коротенко]

Выскажу непопулярное мнение . Mobile-first ущербен в своей основе.
Мобильные сценарии и десктопные очень разные.
Как пример класс container самый широкий 1320px и просто забавно выглядят сайты на 4к и 8к дисплеях.
Дальше огромные размеры контролов и отступы все это съедает место.
Излишняя верстка для адаптивности, это относится к таблицам превращающимся в карточки.
Инфинити скрул, это вообще придумал дьявол
Так что лучше сделать мобильную и десктопную версию.

Comments

[Виталий Першин]

Все что вы написали вообще не относится к Mobile First. Вы путаете верстку "под мобильные" с "сначала под мобильные". Проблемы описанные вами относятся и к Mobile First и к Desktop First. Все этим проблемы легко решаются правильным подходом, выбором техник и технологий.

Answer 5

[Froggyweb]

практика очень хорошая. если удалить весь сss, то сайт становится адаптивным и удобным по умолчанию. Ну кроме гигантских картинок. если писать от мобильника css будет меньше и он будет лучше по структуре.