Mobile-first rethink: переосмыслить desktop-макет

Переосмысли {{page}} с нуля для mobile-first. Это не "сжать desktop" — это переосмыслить IA и приоритеты под палец и узкий вьюпорт, а затем прогрессивно усложнить.

1. Деконструкция десктопа

Возьми десктопный макет. Выпиши всё в плоский список:

• Каждая навигация (top, sidebar, breadcrumbs, footer)
• Каждый блок контента (hero, секции, sidebar widgets, related)
• Каждое действие (primary CTA, secondary, tertiary, отдалённый pop-out)
• Каждый интерактив (hover, drag, right-click, multi-select)

Цель: увидеть сколько всего на странице. На десктопе всё помещается; на мобильном нет.

2. Перепроверка IA

Для каждого элемента — три вопроса:

1. Зачем это здесь? Какую задачу решает на этом экране?
2. Если убрать на мобильном — что сломается? Если "ничего" → убери и на десктопе.
3. Что является primary? Secondary? Декор?

Перегруппируй в три ведра:

• Must-have. Без этого экран не работает.
• Should-have. Скрыть в более глубокую навигацию (sheet, accordion, "More").
• Nice-to-have / desktop-only. Прячь на мобильном — выводи на md+ breakpoint.

Mobile — лакмус. Если страница без 70% элементов всё ещё делает свою работу — те 70% и на десктопе сомнительны.

3. Hover не существует

На тач-устройстве нет hover. Перепроверь весь функционал:

• Tooltip — заменить на inline-подпись, info-иконку с tap-toggle, или убрать
• Hover-menu — заменить на tap-to-open (accordion, bottom sheet)
• Hover-preview — убрать или заменить на explicit "Preview" кнопку
• Hover-reveal экшнов (показывать иконки только при hover) — на мобильном делай их видимыми всегда ИЛИ скрой за "..." меню

{/* desktop: видно при hover; mobile: всегда видно */}
<div className="opacity-0 hover:opacity-100 md:opacity-0 md:hover:opacity-100">
  ...
</div>
{/* лучше: */}
<div className="opacity-100 md:opacity-0 md:hover:opacity-100">
  ...
</div>

4. Большой палец и тач-зоны

• Минимум 44×44px для любого тапа (Apple HIG / WCAG)
• Между интерактивами ≥ 8px gap (не промахнёшься соседним)
• Bottom 30% экрана — самая удобная зона для большого пальца (правая рука). Primary actions — здесь, не вверху
• Top 20% — пользователь дотягивается с трудом. Только статус / branding / back

Reach-zone:

┌──────────────┐
│  стрейч       │  ← сложно (status bar, system UI)
│              │
│  лёгкий стрейч │
│              │
│  естественно   │  ← primary actions сюда
└──────────────┘

5. Навигация

Десктопный sidebar / top-nav почти всегда полностью переделывается:

Sidebar никогда не переезжает на мобильный целиком — даже свёрнутый он съест ширину.

6. Декомпозиция в стек

Десктопные паттерны → мобильные эквиваленты:

7. Progressive enhancement (mobile → desktop)

Дизайнь от мобильного, потом только добавляй:

{/* mobile: вертикальный стек, primary CTA внизу */}
<div className="flex flex-col gap-4
                md:grid md:grid-cols-[1fr_280px] md:gap-8
                lg:grid-cols-[1fr_360px] lg:gap-12">
  <main>...</main>
  <aside className="hidden md:block">...</aside>
</div>

Brakpoints — не "телефон/планшет/десктоп", а где макет ломается. Замеряй: 360, 480, 640, 768, 1024, 1280, 1536. Используй только те, что нужны.

8. Контент

• Сократить копию. На мобильном многословность убийственна. Главное предложение должно помещаться на 1 экран.
• H1 короче. Десктопный 8-словный заголовок на мобильном переносится в 3 строки и съедает 30% экрана.
• Списки — компактнее. Меньше padding между пунктами, больше шрифт.
• Изображения — другой crop. Широкий hero на десктопе → квадрат/портрет на мобильном. Использовать <picture> с media query.

9. Производительность как часть дизайна

Mobile-first ≠ только лейаут. Это и:

• LCP < 2.5s на 4G
• Hero-изображение приоритезировано (fetchpriority="high", preload)
• Шрифты — subset (включая cyrillic если нужно), font-display: swap
• JS — minimal до первого взаимодействия; отложи аналитику / 3rd party
• Картинки — srcset + sizes; AVIF/WebP; loading="lazy" для below-the-fold

Дизайн, который красив, но грузится 6 секунд на 4G — провал.

10. Тест на устройстве

DevTools — недостаточно. Обязательно:

• Реальный iPhone (SE 4.7" + что-то 6.1")
• Реальный Android (бюджетный, 6")
• Throttled 4G в Chrome DevTools (для замера)
• Lighthouse Mobile (Perf + Accessibility ≥ 90)
• Тач один палец, тач один палец в перчатке для серьёзности

Формат вывода

1. Деконструкция: плоский список всего, что есть на десктопе
2. Три ведра: must / should / nice-to-have для мобильного
3. Hover-аудит: какой функционал заменён и чем
4. Navigation pattern для мобильного с обоснованием
5. JSX/wireframe мобильного экрана + перечисление brakpoints
6. Progressive enhancement snippets для md/lg
7. Performance budget (LCP, JS, шрифты)

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

• "Сжать" десктоп через zoom: 0.7 или мелкий шрифт
• Перенести sidebar на мобильный (даже сжатый)
• Hover-only функционал на тач-устройстве
• Primary CTA в top header, недосягаемый большим пальцем
• 12px шрифт "для компактности" (iOS зумит инпуты при < 16px)
• Modal с close × в правом верхнем углу — недосягаем; ставь bottom sheet
• Везде @media (max-width) — переверни в min-width, mobile становится дефолтом
• Hide-on-mobile важной функции — она важна или не важна?