neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
37 lines
1.7 KiB
Markdown
37 lines
1.7 KiB
Markdown
---
|
|
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 пунктами
|