1.7 KiB
1.7 KiB
title, created, updated, type, tags, sources, confidence
| title | created | updated | type | tags | sources | confidence | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Mobile-First Design | 2026-06-02 | 2026-06-02 | concept |
|
|
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 пунктами