Mobile-first рефакторинг

Перенеси сайт с desktop-first на mobile-first.

Зачем

• 60-70% трафика — мобильный
• Mobile-first проще: вырезать сложное → потом достроить
• Лучше CSS performance

Шаги

1. Audit текущего

Открой сайт на 375px ширине. Запиши все проблемы:

• Горизонтальный скролл
• Перекрывающие элементы
• Нечитаемый текст
• Кнопки которые невозможно нажать
• Тяжёлые images / fonts

2. Refactor CSS подход

Было (desktop-first)

.card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
  .card { grid-template-columns: 1fr; }
}

Стало (mobile-first)

.card {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card { grid-template-columns: 1fr 1fr 1fr; }
}

Дефолт = mobile. Добавление = upscale.

3. Tailwind подход

Tailwind по умолчанию mobile-first:

<!-- Default = mobile, добавляем upscale -->
<div class="grid grid-cols-1 md:grid-cols-3">

4. Layout-приоритеты

На мобильном:

• Вертикальный stack по умолчанию
• Скрыть второстепенное
• Сократить навигацию (hamburger)
• Большие touch-таргеты
• Текст крупнее (минимум 16px чтобы iOS не зумил инпуты)

На desktop:

• Восстановить grid / horizontal layout
• Sidebar возвращается
• Hover-эффекты
• Мелкий текст ок (≥ 14px)

5. Картинки

<img src="card.jpg"
     srcset="card-480.jpg 480w,
             card-960.jpg 960w,
             card-1440.jpg 1440w"
     sizes="(max-width: 768px) 100vw, 50vw"
     loading="lazy">

Браузер сам выберет нужный размер.

6. Fonts

• font-display: swap (показывает fallback пока грузится)
• subset (только нужные glyphs)
• preload критичных шрифтов

7. Touch optimization

• Кнопки 44px+
• Padding между интерактивами
• Убрать hover-only функционал
• -webkit-tap-highlight-color: transparent если используешь свой
• input autocomplete атрибуты

8. Performance

Mobile часто на slow networks:

• LCP < 2.5s на 4G
• Изображения lazy
• Code splitting по роутам
• Минимум JS на main thread

9. Тестирование

• DevTools mobile emulator (быстро)
• Реальные устройства (важно)
• BrowserStack для разных моделей
• Lighthouse Mobile

Анти-паттерны

• ❌ Просто zoom: 0.8 для desktop layout на mobile
• ❌ display: none на важных кнопках
• ❌ Текст 12px на mobile (слепнут)
• ❌ Inputs без type="email" / type="tel" (не вылазит правильная клавиатура)
• ❌ Тестирование только на DevTools

Финальный чек-лист

• Все breakpoints — min-width, не max-width
• Картинки с srcset
• Touch targets ≥ 44px
• LCP < 2.5s на mobile
• Нет horizontal scroll
• Тексты читаемы без зума
• Inputs правильного type