Настоящий mobile-firstMobile-first многим известен как подход к вёрстке, при котором сначала реализуется версия для мобильных и расширяется до десктопа. Это противоположность подходу desktop-first, при котором вёрстка идёт от десктопа к мобильным.
Разница обычно сводится к организации медиа-запросов и использованию
min-width/
max-width. Сначала применяются мобильные стили и переопределяются на более широких экранах, или десктопные переопределяются на более узких.
/* Mobile-first */.product-grid { --col: 1; --gap: 12px; display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)) ; gap: var(--gap);}@media (min-width: 600px) { .product-grid { --col: 2; --gap: 18px; }}@media (min-width: 900px) { .product-grid { --col: 3; --gap: 24px; }}@media (min-width: 1200px) { .product-grid { --col: 4; }}/* Desktop-first */.product-grid { --col: 4; --gap: 24px; display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)) ; gap: var(--gap);}@media (max-width: 1200px) { .product-grid { --col: 3; }}@media (max-width: 900px) { .product-grid { --col: 2; --gap: 18px; }}@media (max-width: 600px) { .product-grid { --col: 1; --gap: 12px; }}
Принципиальной разницы нет. В теории, движение от малых экранов к большим даст в итоге чуть меньше стилей, потому что контент по умолчанию mobile-first, адаптируется под ширину экрана и идёт в потоке сверху вниз.
Однако сам термин mobile-first говорит о том, что подход ориентирован в первую очередь на мобильные устройства. Суть не в том, в какую сторону переопределяются стили, а в том, чтобы учесть ограничения мобильных устройств.
Ограничения исходят из конструктивных особенностей. Мобильные устройства компактные и переносимые, питаются от аккумулятора, работают в беспроводных сетях, управляются касаниями и жестами, вмещают меньше контента на экране.
Размеры и питание от аккумулятора не позволяют использовать более мощное железо и массивные системы охлаждения. Поэтому мобильные устройства уступают десктопам по производительности, что повышает требования к оптимизации.
Точки Wi-Fi и мобильные сети менее стабильны, чем проводные соединения. Скорость приёма/передачи, потери пакетов, задержки и другие характеристики сети на мобильных устройствах, как правило, уступают десктопам.
Не смотря на безлимитные тарифы, всё ещё достаточно распространены тарифы с лимитированным трафиком и скоростью. Покрытие сети вне крупных городов ухудшается. Может быть включен режим экономии трафика или батареи.
Отличаются сценарии взаимодействия. Нет мыши и курсора, виртуальная клавиатура на треть экрана заменяет физическую, управление осуществляется жестами, касаниями и долгими нажатиями вместо кликов и наведения указателя мыши.
Настоящий mobile-first — это разработка сайтов и веб-приложений с учётом всех особенностей и ограничений мобильных устройств. Он затрагивает архитектуру проекта и выбор инструментов разработки, а не только направление медиа-запросов.
В хорошем mobile-first:
- Элементы управления и контент компактно и логично размещены на ограниченном по размеру экране, интерфейс не перегружен;
- Интерактивные элементы достаточно большие для взаимодействия касаниями и расположены так, что с ними удобно работать;
- Ресурсы оптимизированы для минимального размера и быстрой загрузки;
- Видео, анимации, сложные фоновые вычисления и сетевые операции ограничены, если мало заряда батареи или включен энергосберегающий режим;
- Упрощённая версия без лишних ресурсов загружается, если включен режим экономии трафика;
- Контент кэшируется на устройстве и доступен оффлайн при потере соединения;
- Контент адаптируется к изменению ориентации экрана, режиму разделения экрана и другим возможностям устройства;
- Сайт использует аппаратные возможности устройства (камеру, микрофон, Bluetooth, акселерометр и другие), если это уместно и помогает пользователю;
#css #ux #performance
