Initial commit: 79+ design patterns, LLM prompts, and assets

concepts/mobile-first-design.md

@@ -0,0 +1,36 @@
+---
+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 пунктами