Conception mobile-sécurisée

1) Principes de sécurité mobile

1. Thumb-first : les zones d'action sont à l'intérieur du pouce (navigation inférieure, BOU/primary à droite en bas).
2. Touch-friendly : cibles ≥ 40-48 px avec champs ; distance ≥ 8-12 px.
3. Safe-area by design : on prend en compte les découpes/zones gestuelles ('bou (safe-area-inset-)').
4. La vitesse est plus importante que la « beauté » : LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Modération : minimum de modales, minimum de formes, maximum d'auto-remplissage.
6. Réseaux et batterie : trafic économique, mode hors ligne, retraits qualifiés.

2) Grille, breakpoints et zone de sécurité

Breakpoints : ≤ 480 (mobile), 481-768 (tablette verticale), 769-1024 (tablette horizontale).
Conteneurs avec max-width, cartes flexibles 1-2 colonnes.
Panneaux inférieurs ≥ 56 px, stock pour la navigation gestuelle.

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) Texte, boutons et interactions

Texte : 16-18 px base, interligne 1. 4–1. 6, longueur de la ligne 40-70 caractères.
Boutons : hauteur 44-52 px, focus clair/atout/disabled ; icône + texte, pas seulement icône.
Les gestes ont toujours une alternative (bouton/menu/point chaud).
Les animations sont sur « bou/opacity » et respectent « prefers-reduced-motion ».

4) Formulaires, claviers et remplissage automatique

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

Les masques sont doux (nous montrons le format, mais nous ne cassons pas l'entrée).

5) Navigation et architecture des écrans

Navigation inférieure (jusqu'à 5 points) + geste « retour ».
Jusqu'à 3-5 tapas avant l'action ciblée.
Évitez le « hamburger » pour les sections critiques ; utiliser des tabs/segmentés.
États UI : 'loading/empty/error/success' est explicite, avec des actions et des explications.

6) Performance et économie

Code-split et widgets paresseux ; graphiques/cartes expédiées « sur demande ».
Les ressources critiques sont 'preload', le reste est 'defer '/' lazy'.
Images AVIF/WebP +' srcset/sizes', 'loading = » lazy ».
Polices : 1 WOFF2 variable, 'font-display : swap', preload uniquement.
Mise en cache et hors ligne via Service Worker (PWA), 'stale-while-revalidate'.

7) Réseaux, hors ligne et retraits

Amabilité à 3G/haute latence : limite de demandes, batch, jittered backoff.
Écran hors ligne avec cache de données critiques et file d'attente de synchronisation.
Respect des économies de données : Client Hints/Save-Data → images faciles, sans auto-vidéo.

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

8) Disponibilité (A11y) sur mobile

Contrôle complet avec clavier/interrupteurs et focus de lecture.
Contraste ≥ WCAG AA, texte des variantes ('alt', 'aria-label').
Grands targets et pauses d'animation ; les gestes sont dupliqués par des boutons.
Pour les diagrammes, un bref résumé texte et un tableau de données.

9) Thème sombre, luminosité et haptics

Le thème obscur n'est pas seulement l'inversion ; vérifiez les contrastes et les accents de couleur.
Respecter le thème système ('prefers-color-scheme').
Haptics - dosé (succès/erreur), possibilité de désactiver.

10) Confidentialité, permis et sécurité

Résolutions uniquement dans le moment de la valeur (caméra → scan du document).
Explication du « pourquoi » et fallback sans permission.
WebAuthn/biométrie au lieu du mot de passe ; Les managers des mots de passe sont soutenus.
Cacher les champs sensibles lors de la réduction ; Taimauts avec avertissement.

11) Notifications push et tâches d'arrière-plan

Des scénarios de valeur clairs, pas fréquents ; des heures tranquilles.
One-tap unsubscribe et centre de préférences.
Les bleus de fond sont de petites portions, avec des restrictions sur la batterie/réseau.

12) Images, médias et adaptabilité

Placeholder avec des tailles spécifiées → CLS nul.
Vidéo par défaut sans auto-play, avec sous-titres et contrôles ; les débits adaptatifs.
Les icônes sont un vecteur (SVG) ou un sprite ; n'expédiez pas de kits de 1 Mo.

13) Snappets et réglages

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) Plan d'essai (minimum)

Appareils : 1 iOS + 1 Android (petit/moyen/grand écran), portrait/paysage.
Réseaux : hors ligne, 3G, 4G (throttle) ; activer Save-Data.
Disponibilité : scripts VoiceOver/TalkBack, passe clavier, contraste.
Performance : Web-Vitals (RUM), profileur ; grandes listes, entrées/scroll/gestes.
Durabilité : rotation, réduction/retour, mise à mort du processus → rétablissement de l'état.
Sécurité : permissions, session temporelle, dissimulation de données privées, biométrie.

15) Métriques Mobile-safe

LCP/INP/CLS (p75, mobile uniquement).
Time-to-Action (jusqu'au clic cible primaire).
Tap Accuracy (proportion de faux tapes d'éléments proches).
Crash-free sessions/ANR rate (applications/webview).
Data per session et Battery impact (fond/avant-plan).
Opt-in/opt-out canons et engagement.

16) Anti-modèles

Boutons 28-32 px, listes denses, « cartes » sans champ - échecs.
Texte 12-14 px sur fond gris clair.
Modeleuses sur les modeles ; fermeture uniquement par geste.
Auto-play vidéo/animations sur le 3G/Save-Data.
Fonctions « gestuelles seulement », sans bouton/menu.
L'espace de sécurité non comptabilisé → le chevauchement du contenu par une frange ou un panneau de balayage.

17) Chèque écran

• Targets ≥ 48 px, tirets ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Texte ≥ 16 px, contraste AA, focus/atout visible
• Formulaires : correct 'type/inputmode/autocoplete', auto-remplissage fonctionne
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (mobile)
• Lazy-loading des blocs lourds, downsampling des listes
• Écran hors ligne, retraits avec backoff, Save-Data mode
• Pushi et permis - sur demande, avec explication et refus
• Le thème obscur et le mouvement réduit sont soutenus
• Tests : iOS/Android, portrait/paysage, 3G/hors ligne, passage SR

18) Plan de mise en oeuvre (3 itérations)

• Grille et zone de sécurité, targets 48 px, types de clavier/remplissage automatique, Web-Vitals de base, images lazy, thème sombre.

• Code-split, content-visibility, hors ligne + SW, mode Save-Data, retrai/files d'attente, restauration d'état, audit A11y.

• RUM-dashboards, analyse du trafic/batterie, haptics, scripts d'autorisation, amélioration des listes (virtualisation), jeux réguliers des réseaux mobiles.

19) Mini-FAQ

Ai-je besoin d'un « menu mobile » distinct ?
Oui, mais la priorité est la navigation inférieure avec 3-5 points ; le hamburger est pour le secondaire.

Comment réduire les erreurs sur les boutons ?
Augmentez vos objectifs à 48 px, ajoutez des champs autour, explorez verticalement, utilisez haptic pour « succès/erreur ».

Hors ligne obligatoire ?
Pour les scénarios critiques, oui : cache, file d'action et conseils honnêtes à l'utilisateur.

Total

Mobile-safe design est une combinaison d'ergonomie tactile, de prise en compte de la zone de sécurité, de performance, de disponibilité et de résistance aux réseaux/batteries. Suivez les checklists, mesurez Web-Vitals auprès des utilisateurs réels, respectez la vie privée et les paramètres système - et votre interface sera conviviale et fiable sur n'importe quel appareil mobile.