Design mobile-safe

1) Principi Mobile-safe

1. Thumb-first - Le zone sono all'interno del pollice (navigazione in basso, FEB/primary a destra in basso).
2. Touch-friendly: obiettivi 40-48 px con campi; Distanza 8-12 px.
3. Safe-area by design - Prendiamo in considerazione i tagli/le zone gestuali ('env (safe-area-inset-)').
4. La velocità è più importante della bellezza, LCP 2. 5 c, INP da 200 mc, CLS da 0. 1 (p75).
5. Moderazione: minimo modaletti, minimo moduli, massimo completamento automatico.
6. Rete e batteria: traffico economico, modalità offline, retrai corretti.

2) Griglia, breakpoint e safe-area

Breakpoint: ≤ 480 (mobile), 481-768 (tablet verticale), 769-1024 (tablet orizzontale).
Contenitori max-width, schede flessibili 1-2 colonne.
I pannelli inferiori sono 56 px, la scorta è sotto la navigazione.

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) Testo, pulsanti e interazioni

Testo: 16-18 px base, stringa 1. 4–1. 6, lunghezza della riga 40-70 caratteri.
Pulsanti: altezza 44-52 px, attivo/attivo/disabled chiaro; icone + testo, non solo icone.
I gesti hanno sempre un'alternativa (pulsante/menu/punto caldo).
Le animazioni sono su «form/opacity» e rispettano «preferers-reduced-motion».

4) Moduli, tastiere e completamento automatico

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

Le maschere sono morbide (il formato viene visualizzato, ma non si rompe l'input).

5) Navigazione e architettura delle schermate

Navigazione inferiore (fino a 5 punti) + segno indietro.
Fino a 3-5 tappe prima dell'azione di destinazione.
Evitare «hamburger» per sezioni critiche; Usa tab/segmented.
Stati UI: «loading/empty/error/success» sono chiari, con azioni e spiegazioni.

6) Prestazioni e risparmi

Code-split e widget pigri; grafici/mappe carichiamo «su richiesta».
Le risorse critiche sono «pratoad», il resto è «defer »/« lazy».
Immagini "+" srcset/sizes "," loading = "lazy" ".
Caratteri: 1 variabile WOFF2, 'font-display: swap', pratoad solo di base.
Cache e offline tramite Service Worker (PWA), stale-while-revalidate.

7) Reti, offline e retrai

Cordialità a 3G/ritardo elevato: limite di richieste, batching, jittered backoff.
Schermata offline con cache di dati critici e in coda di sincronizzazione.
Rispetto del risparmio dei dati: Client Hints/Save-Data per immagini leggere, senza video automatici.

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

8) Disponibilità (A11y) sul mobile

Controllo completo con tastiera/interruttori e attivazione di lettura.
Contrasto di WCAG AA, testo di alternative ('alt', 'aria-label').
Grandi target e pausa animazione; i gesti sono duplicati da pulsanti.
Per i diagrammi, un breve riepilogo di testo e una tabella dati.

9) Tema scuro, luminosità e haptics

Il tema oscuro non è solo un'inversione; controlla i contrasti e gli accenti di colore.
Rispettare l'argomento di sistema («preferers-color-scheme»).
Haptics - dosato (successo/errore), la possibilità di disattivare.

10) Privacy, autorizzazioni e sicurezza

Autorizzazioni solo nel momento del valore (fotocamera scansionata del documento).
Spiegazione del perché e del fallback senza autorizzazione.
WebAuthn/biometria al posto della password; i gestori delle password sono supportati.
Nascondere i campi sensibili durante la contrazione; timeout di avvertimento.

11) Notifiche e attività di sfondo

Scenari di valore chiari, non parziali; Orologio tranquillo.
One-tap unsubscribe e centro preferenze.
I picchi di sfondo sono piccole porzioni, con limiti di batteria/rete.

12) Immagini, media e adattabilità

Placeholder con dimensioni specificate → CLS zero.
Video predefinito senza scheda automatica, con sottotitoli e controlli; bitrate adattivi.
Icone - Vettore (SVG) o sprite; non caricare set da 1 MB.

13) Snippet e impostazioni

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-piano (minimo)

Dispositivi: 1 iOS + 1 Android (piccolo/medio/grande schermo), ritratto/paesaggio.
Reti offline, 3G, 4G (throttle) Abilita Save-Data.
Disponibilità: script VoiceOver/TalkBack, tastiera, contrasto.
Perfomance: Web-Vitals (RUM), profilatore; grandi elenchi, input/scroll/gesti.
Resilienza: rotazione, riduzione/restituzione, omicidio del processo, ripristino dello stato.
Sicurezza: permessi, timeout della sessione, informazioni private nascoste, biometria.

15) Metriche Mobile-safe

LCP/INP/CLS (p75, mobile-solo).
Time-to-Action (prima del click di destinazione primario).
Tap Accuracy (quota di false tappe di elementi ravvicinati).
Crash-free sessions/ANR rate (applicazioni/web).
Data per sessione e Battery impatto (sfondo/primo piano).
Opt-in/opt-out cannoni e engagement.

16) Anti-pattern

Pulsanti 28-32 px, elenchi serrati, «mappe» senza campo - errori.
Testo 12-14 px su sfondo grigio chiaro.
Modalk sopra i modali; Chiudere con un solo gesto.
Video/animazioni automatiche su 3G/Save-Data.
Funzioni «solo con un gesto», senza un pulsante/menu.
Le safe-area non registrate → la sovrapposizione del contenuto con una frangia o un pannello swipe.

17) Assegno-foglio schermo

• Target 48 px, 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Testo ≥ 16 px, contrasto AA, attivo/attivo visibile
• Moduli: corretti 'type/inputmode/autocomplete', completamento automatico
• LCP ≤ 2. 5 c, INP da 200 mc, CLS da 0. 1 (mobile)
• Lazy-loading blocchi pesanti, downsampling elenchi
• Schermata offline, retrai backoff, modalità Save-Data
• Pashi e autorizzazioni - su richiesta, con spiegazione e rifiuto
• Tema scuro e reduced-motion supportati
• Test: iOS/Android, ritratto/paesaggio, 3G/offline, passaggio SR

18) Piano di implementazione (3 iterazioni)

• Griglia e safe-area, target 48 px, tipi di tastiera/completamento automatico, Web-Vitals base, lazy immagini, tema scuro.

• Code-split, content-visibility, offline + SW, modalità Save-Data, retrai/code, ripristino dello stato, controllo A11y.

• Dashboard RUM, analisi del traffico/batteria, haptics, script di risoluzione, miglioramento degli elenchi (virtualizzazione), giochi-days regolari di reti mobili.

19) Mini FAQ

È necessario un menu mobile separato?
Sì, ma la priorità è la navigazione inferiore con 3-5 punti; hamburger per il secondario.

Come ridurre gli errori dei pulsanti?
Aumentare gli obiettivi a 48 px, aggiungere campi intorno, esplorare verticalmente, utilizzare haptic per «successo/errore».

Offline è obbligatoria?
Per gli script critici, sì: cache, coda di azioni e suggerimenti corretti all'utente.

Totale

Mobile-safe design è una combinazione di tangenti ergonomici, contabilità safe-area, prestazioni, disponibilità e resistenza alle reti/batteria. Seguire i fogli di assegno, misurare il Web-Vitals negli utenti reali, rispettare la privacy e le impostazioni di sistema - e la tua interfaccia sarà conveniente e affidabile su qualsiasi dispositivo mobile.