Mobile-safe дизайн

1) Принципи Mobile-safe

1. Thumb-first: зони дії - в межах великого пальця (нижня навігація, FAB/primary праворуч знизу).
2. Touch-friendly: цілі ≥ 40-48 px з полями; відстань ≥ 8-12 px.
3. Safe-area by design: враховуємо вирізи/жестові зони ('env (safe-area-inset-)').
4. Швидкість важливіша за «красу»: LCP ≤ 2. 5 c, INP ≤ 200 мс, CLS ≤ 0. 1 (p75).
5. Стриманість: мінімум модалок, мінімум форм, максимум автозаповнень.
6. Мережі та батарея: економний трафік, офлайн-режим, грамотні ретраї.

2) Сітка, брейкпоінти і safe-area

Брейкпоінти: ≤ 480 (мобайл), 481-768 (планшет вертикаль), 769-1024 (планшет горизонталь).
Контейнери з max-width, гнучкі картки 1-2 колонки.
Нижні панелі ≥ 56 px, запас під жестову навігацію.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) Текст, кнопки та інтеракції

Текст: 16-18 px базовий, міжрядковий 1. 4–1. 6, довжина рядка 40-70 знаків.
Кнопки: висота 44-52 px, чіткий фокус/актив/disabled; іконка + текст, не тільки іконка.
Жести завжди мають альтернативу (кнопка/меню/гаряча точка).
Анімації - на'transform/opacity'і поважають'prefers-reduced-motion'.

4) Форми, клавіатури та автозаповнення

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

Маски м'які (формат показуємо, але не ламаємо введення).

5) Навігація та архітектура екранів

Нижня навігація (до 5 пунктів) + жест «назад».
До 3-5 тапів до цільової дії.
Уникайте «гамбургера» для критичних розділів; використовуйте таби/segmented.
Стани UI: 'loading/empty/error/success'- явні, з діями і поясненнями.

6) Продуктивність та економія

Code-split і ледачі віджети; графіки/карти вантажимо «на вимогу».
Критичні ресурси -'preload', решта -'defer '/' lazy'.
Зображення AVIF/WebP +'srcset/sizes','loading =» lazy»'.
Шрифти: 1 variable WOFF2, `font-display: swap', preload тільки основного.
Кешування та офлайн через Service Worker (PWA),'stale-while-revalidate'.

7) Мережі, офлайн і ретраї

Дружелюбність до 3G/високої затримки: ліміт запитів, батчинг, jittered backoff.
Офлайн-екран з кешем критичних даних і чергою синхронізації.
Поважайте економію даних: Client Hints/Save-Data → легкі зображення, без авто-відео.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) Доступність (A11y) на мобайлі

Повна керованість клавіатурою/перемикачами і читабельний фокус.
Контраст ≥ WCAG AA, текст альтернатив ('alt','aria-label').
Великі таргети і пауза анімацій; жести дублюються кнопками.
Для діаграм - короткий текстовий резюме і таблиця даних.

9) Темна тема, яскравість і haptics

Темна тема - не просто інверсія; перевіряйте контрасти і колірні акценти.
Поважайте системну тему («prefers-color-scheme»).
Haptics - дозовано (успіх/помилка), можливість відключити.

10) Приватність, дозволи та безпека

Дозволи тільки в моменті цінності (камера → скан документа).
Пояснення «навіщо» і fallback без дозволу.
WebAuthn/біометрія замість пароля; менеджери паролів підтримуються.
Приховуйте чутливі поля при згортанні; таймаути з попередженням.

11) Пуш-повідомлення та фонові завдання

Ясні ціннісні сценарії, не частити; Тихий годинник.
One-tap unsubscribe і центр переваг.
Фонові синки - малими порціями, з обмеженнями по батареї/мережі.

12) Зображення, медіа та адаптивність

Placeholder із заданими розмірами → нульовий CLS.
Відео за замовчуванням без автоплея, з субтитрами і контролами; адаптивні бітрейти.
Іконки - вектор (SVG) або спрайт; не вантажте набори по 1 МБ.

13) Сніпети та налаштування

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) Тест-план (мінімум)

Пристрої: 1 iOS + 1 Android (малий/середній/великий екран), портрет/ландшафт.
Мережі: офлайн, 3G, 4G (throttle); включити Save-Data.
Доступність: VoiceOver/TalkBack сценарії, клавіатурний прохід, контраст.
Перфоманс: Web-Vitals (RUM), профілювальник; великі списки, введення/скролл/жести.
Стійкість: ротація, згортання/повернення, вбивство процесу → відновлення стану.
Безпека: дозволу, таймаут сесії, приховування приватних даних, біометрія.

15) Метрики Mobile-safe

LCP/INP/CLS (p75, мобайл-тільки).
Time-to-Action (до первинного цільового кліка).
Tap Accuracy (частка помилкових тапів близьких елементів).
Crash-free sessions/ANR rate (додатки/вебв'ю).
Data per session і Battery impact (фон/передній план).
Opt-in/opt-out гармат і engagement.

16) Анти-патерни

Кнопки 28-32 px, щільні списки, «карти» без поля - промахи.
Текст 12-14 px на світло-сірому тлі.
Модалки поверх модалок; закриття тільки жестом.
Автоплей відео/анімацій на 3G/Save-Data.
Функції «тільки жестом», без кнопки/меню.
Невраховані safe-area → перекриття контенту «чубчиком» або свайп-панеллю.

17) Чек-лист екрану

• Таргети ≥ 48 px, відступи ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Текст ≥ 16 px, контраст AA, фокус/актив видимі
• Форми: коректні'type/inputmode/autocomplete', автозаповнення працює
• LCP ≤ 2. 5 c, INP ≤ 200 мс, CLS ≤ 0. 1 (мобайл)
• Lazy-loading важких блоків, downsampling списків
• Офлайн-екран, ретраї з backoff, Save-Data режим
• Пуши і дозволи - на вимогу, з поясненням і відмовою
• Темна тема і reduced-motion підтримані
• Тести: iOS/Android, портрет/ландшафт, 3G/офлайн, SR-прохід

18) План впровадження (3 ітерації)

• Сітка і safe-area, таргети 48 px, типи клавіатур/автозаповнення, базові Web-Vitals, lazy зображень, темна тема.

• Code-split, content-visibility, офлайн + SW, Save-Data режим, ретраї/черги, відновлення стану, A11y-аудит.

• RUM-дашборди, аналіз трафіку/батареї, haptics, сценарії дозволів, поліпшення списків (віртуалізація), регулярні game-days мобільних мереж.

19) Міні-FAQ

Чи потрібне окреме «мобайл-меню»?
Так, але пріоритет - нижня навігація з 3-5 пунктами; гамбургер - для другорядного.

Як зменшити промахи по кнопках?
Збільште цілі до 48 px, додайте поля навколо, розведіть по вертикалі, використовуйте haptic на «успіх/помилку».

Офлайн обов'язковий?
Для критичних сценаріїв - так: кеш, черга дій і чесні підказки користувачеві.

Підсумок

Mobile-safe дизайн - це поєднання ергономіки торкань, обліку safe-area, продуктивності, доступності та стійкості до мереж/батареї. Дотримуйтесь чек-листів, вимірюйте Web-Vitals у реальних користувачів, поважайте приватність і системні налаштування - і ваш інтерфейс буде зручний і надійний на будь-якому мобільному пристрої.