Mobile-safe design

1) Mobile-safe principles

1. Thumb-first: zones of action - within the thumb (bottom navigation, FAB/primary from the right below).
2. Touch-friendly: targets ≥ 40-48 px with fields; distance ≥ 8-12 px.
3. Safe-area by design: we take into account cutouts/gesture zones ('env (safe-area-inset-)').
4. Speed ​ ​ is more important than "beauty": LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (p75).
5. Restraint: minimum modals, minimum forms, maximum autocomplete.
6. Networks and battery: economical traffic, offline mode, competent retrays.

2) Grid, breakpoints and safe-area

Breakpoints: ≤ 480 (mobile), 481-768 (vertical tablet), 769-1024 (horizontal tablet).
Containers with max-width, flexible cards 1-2 columns.
Lower panels ≥ 56 px, stock for gesture navigation.

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) Text, buttons and interactions

Text: 16-18 px base, line-to-line 1. 4–1. 6, line length 40-70 characters.
Buttons: height 44-52 px, clear focus/asset/disabled; icon + text, not only icon.
Gestures always have an alternative (button/menu/hot spot).
Animations are on 'transform/opacity' and respect 'prefers-reduced-motion'.

4) Forms, keyboards and autocomplete

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" />

The masks are soft (we show the format, but do not break the input).
Autocap/autocorrect by meaning (' autocapitalize =" sentences' off" ').
Hints/errors next to the field and are available for the screensaver ('aria-descripedby').

5) Navigation and screen architecture

Bottom navigation (up to 5 points) + "back" gesture.
Up to 3-5 taps to the target action.
Avoid "hamburger" for critical sections; use/segmented tabs.
UI states: 'loading/empty/error/success' - explicit, with actions and explanations.

6) Performance and savings

Code-split and lazy widgets; charts/cards load "on demand."

Critical resources - 'preload', the rest - 'defer '/' lazy'.
AVIF/WebP images +' srcset/sizes', 'loading =" lazy"'.
Fonts: 1 variable WOFF2, 'font-display: swap', preload only basic.
Caching and offline via Service Worker (PWA), 'stale-while-revalidate'.

7) Networks, offline and retrays

3G/high latency friendliness: request limit, butching, jittered backoff.
Offline screen with critical data cache and synchronization queue.
Respect the data economy: Client Hints/Save-Data → light images, no auto-video.

js const saveData = navigator. connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator. connection?.effectiveType);
if (saveData         slow) enableLiteMode () ;//less heavy resources

8) Availability (A11y) on mobile

Full keyboard/switch control and readable focus.
Contrast ≥ WCAG AA, alternative text ('alt', 'aria-label').
Large targets and pause animations; gestures are duplicated with buttons.
For diagrams - a short text summary and a data table.

9) Dark theme, brightness and haptics

The dark theme is not just an inversion; check contrasts and color accents.
Respect the system theme ('prefers-color-scheme').
Haptics - dosed (success/error), the ability to disable.

10) Privacy, permits and security

Permissions only at the moment of value (camera → document scan).
Explanation of "why" and fallback without permission.
WebAuthn/biometrics instead of password; password managers are supported.
Hide sensitive fields when folding; warning timeouts.

11) Push notifications and background tasks

Clear value scenarios, not frequent; quiet hours.
One-tap unsubscribe and preference center.
Background bruises - in small portions, with battery/network restrictions.

12) Images, media and adaptability

Size-specified placeholder → zero CLS.
Video by default without autoplay, with subtitles and controls; adaptive bitrates.
Icons - vector (SVG) or sprite; Do not load 1MB sets.

13) Snippets and settings

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) Test plan (minimum)

Devices: 1 iOS + 1 Android (small/medium/large screen), portrait/landscape.
Networks: offline, 3G, 4G (throttle); enable Save-Data.
Availability: VoiceOver/TalkBack scripts, keyboard pass, contrast.
Performance: Web-Vitals (RUM), profiler; large lists, typing/scrolling/gestures.
Stability: rotation, folding/return, killing the process → restoring the state.
Security: permissions, session timeout, hiding private data, biometrics.

15) Mobile-safe metrics

LCP/INP/CLS (p75, mobile only).
Time-to-Action (before the primary target click).
Tap Accuracy (share of false taps of close elements).
Crash-free sessions/ANR rate (applications/webview).
Data per session and Battery impact.
Opt-in/opt-out fluff and engagement.

16) Anti-patterns

Buttons 28-32 px, dense lists, "cards" without a field - misses.
Text 12-14 px on a light gray background.
Modals over modals; closing by gesture only.
Autoplay video/animations on 3G/Save-Data.
Gesture-only features, no button/menu.
Unaccounted for safe-area → overlapping content with "bangs" or a swipe panel.

17) Screen checklist

• Targets ≥ 48 px, indents ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Text ≥ 16 px, contrast AA, focus/asset visible
• Forms: correct 'type/inputmode/autocomplete', autocomplete works
• LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (mobile)
• Lazy-loading heavy blocks, downsampling lists
• Offline screen, retray with backoff, Save-Data mode
• Fluffs and permits - on demand, with explanation and refusal
• Dark theme and reduced-motion supported
• Tests: iOS/Android, portrait/landscape, 3G/offline, SR pass

18) Implementation plan (3 iterations)

• Grid and safe-area, 48 px targets, keyboard types/autocomplete, basic Web-Vitals, lazy images, dark theme.

• Code-split, content-visibility, offline + SW, Save-Data mode, retray/queues, state recovery, A11y audit.

• RUM boards, traffic/battery analysis, haptics, permission scripts, list improvement (virtualization), regular game days of mobile networks.

19) Mini-FAQ

Do I need a separate "mobile menu"?
Yes, but the priority is bottom navigation with 3-5 points; hamburger - for the secondary.

How to reduce button misses?

Increase goals to 48 px, add fields around, spread vertically, use haptic for "success/error."

Offline required?
For critical scenarios, yes: cache, queue of actions and honest prompts to the user.

Total

Mobile-safe design is a combination of touch ergonomics, safe-area accounting, performance, availability, and grid/battery resistance. Follow checklists, measure Web-Vitals with real users, respect privacy and system settings - and your interface will be convenient and reliable on any mobile device.