Mobile-first подход: проектирование сайтов с мобильной версии

Почему mobile-first — это не просто мода, а необходимость 📱➡️💻

В 2023 году более 60% интернет-трафика приходится на мобильные устройства. Если ваш сайт сначала создаётся для десктопа, а потом «ужимается» — вы теряете пользователей на каждом шагу. Mobile-first меняет правила игры:

• Скорость: Меньше лишнего кода = быстрая загрузка
• Юзабилити: Интерфейс проектируется от простого к сложному
• SEO: Google ранжирует mobile-friendly сайты выше

💡 Совет от Данилы Бежина: «Начинайте с viewport в 320px — это заставит вас расставлять приоритеты в контенте».

3 кита mobile-first подхода 🏗️

1. Сетки на flex/grid, а не на px

Фиксированные ширины убивают адаптивность. Вот как должно выглядеть начало CSS:

.container {
  width: 100%;
  max-width: 1200px; /* Лимит для десктопа */
  display: grid;
  grid-template-columns: 1fr; /* Одна колонка для мобилок */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* Планшеты */
  }
}

2. Относительные единицы вместо фиксированных

• rem для шрифтов
• % и vw/vh для блоков
• min()/max() для гибких ограничений

.btn {
  padding: 1rem 2rem; /* Адаптивный отступ */
  font-size: clamp(1rem, 3vw, 1.5rem); /* Динамический размер текста */
}

3. Приоритизация контента

Сначала — ключевые действия (CTA, меню), потом — второстепенные элементы. Используйте CSS-порядок:

.mobile-nav {
  order: -1; /* Меню будет первым в потоке */
}