---
title: Mobile-First Design
created: 2026-06-02
updated: 2026-06-02
type: concept
tags: [web-design, mobile-first]
sources:
  - raw/articles/crawford-20-principles.md
  - raw/articles/crawford-26-lessons.md
  - raw/articles/web-design-research.md
confidence: high
---

# Mobile-First Design — Мобильный дизайн

## Принцип
Начинать проектирование с малого экрана (360×800), потом расширять на планшет и десктоп.
Заставляет приоритизировать: что действительно важно?

## Почему это стандарт
- **Мобильный трафик доминирует** — для большинства посетителей мобильная версия = весь сайт
- **Google mobile-first indexing** — поисковик ранжирует по мобильной версии
- **Core Web Vitals** — LCP, INP, CLS на мобильных критичнее

## Техническая реализация
- CSS Container Queries — адаптивность на уровне компонентов
- Media queries как резерв, container queries как основной инструмент
- Touch-friendly: кнопки минимум 44×44px
- Bottom navigation вместо hamburger на мобильных
- Swipe-жесты для навигации

## Mobile Menu (hamburger)
Проверенные паттерны:
- **Slide-in** — меню выезжает слева
- **Bottom sheet** — меню снизу (удобнее для больших экранов)
- **Full screen overlay** — для лендингов с 4-5 пунктами