Mobile-Safe-Design

1) Mobile-safe Prinzipien

1. Thumb-first: Die Aktionsbereiche liegen innerhalb des Daumens (untere Navigation, FAB/primary rechts unten).
2. Touch-freundlich: Ziele ≥ 40-48 px mit Feldern; Entfernung ≥ 8-12 px.
3. Safe-Area nach Design: Berücksichtigung von Cut-Outs/Gestenzonen ('env (safe-area-inset-)').
4. Geschwindigkeit ist wichtiger als „Schönheit“: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Zurückhaltung: ein Minimum an Modalocs, ein Minimum an Formularen, ein Maximum an Autovervollständigungen.
6. Netze und Batterie: sparsamer Verkehr, Offline-Modus, kompetente Retrays.

2) Mesh, Breakpoints und Safe-Area

Breakpoints: ≤ 480 (mobil), 481-768 (Tablet vertikal), 769-1024 (Tablet horizontal).
Behälter mit max-width, flexible Karten 1-2 Spalten.
Untere Paneele ≥ 56 px, Reserve für gestische 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 und Interaktionen

Text: 16-18 px basic, interlinear 1. 4–1. 6, Zeilenlänge 40-70 Zeichen.
Buttons: Höhe 44-52 px, klarer Fokus/Asset/deaktiviert; Icon + Text, nicht nur Icon.
Gesten haben immer eine Alternative (Button/Menü/Hotspot).
Animationen sind auf 'transform/opacity' und respektieren 'prefers-reduced-motion'.

4) Formulare, Tastaturen und automatische Vervollständigung

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

Die Masken sind weich (wir zeigen das Format, aber wir brechen die Eingabe nicht).

5) Navigation und Bildschirmarchitektur

Untere Navigation (bis zu 5 Punkte) + Rückwärtsgeste.
Bis zu 3-5 Tips zur Zielaktion.
Vermeiden Sie „Hamburger“ für kritische Abschnitte; Tabs/segmented verwenden.
UI-Zustände: 'loading/empty/error/success' - explizit, mit Aktionen und Erklärungen.

6) Produktivität und Einsparungen

Code-Split und faule Widgets; Grafiken/Karten versenden wir „on demand“.
Kritische Ressourcen sind 'preload', der Rest ist 'defer '/' lazy'.
AVIF/WebP + Bilder 'srcset/sizes', 'loading =' lazy''.
Schriftarten: 1 variable WOFF2, 'font-display: swap', preload nur Haupt.
Caching und offline über Service Worker (PWA), 'stale-while-revalidate'.

7) Netzwerke, Offline und Retrays

3G-Freundlichkeit/hohe Latenz: Abfragebegrenzung, Batching, Jittered Backoff.
Offline-Bildschirm mit kritischem Datencache und Synchronisationswarteschlange.
Respektieren Sie die Datensparsamkeit: Client Hints/Save-Data → leichte Bilder, keine Auto-Videos.

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

8) Verfügbarkeit (A11y) auf Mobile

Volle Bedienbarkeit durch Tastatur/Schalter und lesbarer Fokus.
Kontrast ≥ WCAG AA, Alternativtext ('alt', 'aria-label').
Große Ziele und Pause Animationen; Gesten werden durch Schaltflächen dupliziert.
Für Diagramme - eine kurze Textzusammenfassung und eine Datentabelle.

9) Dunkles Thema, Helligkeit und Haptik

Ein dunkles Thema ist nicht nur eine Umkehrung; Überprüfen Sie Kontraste und Farbakzente.
Respektieren Sie das Systemthema ('prefers-color-scheme').
Haptik - dosiert (Erfolg/Fehler), abschaltbar.

10) Privatsphäre, Berechtigungen und Sicherheit

Berechtigungen nur im Moment des Wertes (Kamera → Scan des Dokuments).
Erklärung von „warum“ und Fallback ohne Erlaubnis.
WebAuthn/Biometrie statt Passwort; Passwort-Manager werden unterstützt.
Verstecken Sie empfindliche Felder beim Falten; Timeouts mit Warnung.

11) Push-Benachrichtigungen und Hintergrundaufgaben

Klare Wertszenarien, nicht häufig; ruhige Stunden.
One-tap unsubscribe und Präferenzzentrum.
Hintergrund Syncs - in kleinen Portionen, mit Batterie/Netzwerk Einschränkungen.

12) Bilder, Medien und Anpassungsfähigkeit

Placeholder mit den angegebenen Abmessungen → Null CLS.
Standardvideo ohne Autoplay, mit Untertiteln und Kontrollen; adaptive Bitraten.
Icons - Vektor (SVG) oder Sprite; Laden Sie keine Sätze von 1 MB.

13) Snippets und Einstellungen

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) Testplan (Minimum)

Geräte: 1 iOS + 1 Android (kleiner/mittlerer/großer Bildschirm), Porträt/Landschaft.
Netzwerke: offline, 3G, 4G (throttle); Save-Data aktivieren.
Verfügbarkeit: VoiceOver/TalkBack Skripte, Keyboard Pass, Kontrast.
Performance: Web-Vitals (RUM), Profiler; große Listen, Eingabe/Scrollen/Gesten.
Nachhaltigkeit: Rotation, Roll-up/Return, Prozesskilling → State Recovery.
Sicherheit: Berechtigungen, Session-Timeout, Verbergen privater Daten, Biometrie.

15) Mobile-safe Metriken

LCP/INP/CLS (p75, nur mobil).
Time-to-Action (bis zum primären Ziel-Klick).
Tap Accuracy (der Anteil falscher Tips von nahen Elementen).
Crash-freie Sitzungen/ANR-Rate (Apps/Webview).
Daten pro Sitzung und Battery Impact (Hintergrund/Vordergrund).
Opt-in/opt-out von Pelzen und Engagement.

16) Anti-Muster

Knöpfe 28-32 px, enge Listen, „Karten“ ohne Feld - Fehler.
Text 12-14 px auf hellgrauem Hintergrund.
Modalks über Modalks; Schließung nur mit einer Geste.
Autoplay Videos/Animationen auf 3G/Save-Data.
„Nur mit Geste“ -Funktionen, ohne Taste/Menü.
Nicht gemeldete Safe-Area → die Überlappung von Inhalten mit einem „Knall“ oder einem Swipe-Panel.

17) Bildschirm-Checkliste

• Targets ≥ 48 px, Einzüge ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Text ≥ 16 px, Kontrast AA, Fokus/Asset sichtbar
• Formulare: korrekt 'type/inputmode/autocomplete', autocomplete funktioniert
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (mobil)
• Lazy-Loading schwere Blöcke, Download-Listen
• Offline-Bildschirm, Retrays mit Backoff, Save-Data-Modus
• Flusen und Genehmigungen - auf Anfrage, mit Erklärung und Ablehnung
• Dunkles Thema und reduzierte Bewegung unterstützt
• Tests: iOS/Android, Portrait/Landschaft, 3G/offline, SR-Pass

18) Implementierungsplan (3 Iterationen)

• Raster und Safe-Area, 48 px Targets, Tastaturtypen/Autofill, Basic Web-Vitals, lazy images, dark theme.

• Code-Split, Content-Visibility, Offline + SW, Save-Data-Modus, Retrays/Queues, State Recovery, A11y-Audit.

• RUM-Dashboards, Verkehrs-/Batterieanalyse, Haptik, Auflösungsszenarien, Listenverbesserung (Virtualisierung), regelmäßige Spieltage von Mobilfunknetzen.

19) Mini-FAQ

Brauche ich ein separates „Mobile-Menü“?
Ja, aber die Priorität ist die untere Navigation mit 3-5 Punkten; Der Hamburger ist zweitrangig.

Wie kann man Knöpfe reduzieren?
Erhöhen Sie die Ziele auf 48 px, fügen Sie Felder um, verdünnen Sie vertikal, verwenden Sie haptic auf „Erfolg/Fehler“.

Ist Offline Pflicht?
Für kritische Szenarien ja: Cache, Aktionswarteschlange und ehrliche Hinweise an den Nutzer.

Ergebnis

Mobile-safe Design ist eine Kombination aus Touch-Ergonomie, Safe-Area-Berücksichtigung, Leistung, Verfügbarkeit und Netz-/Batteriestabilität. Folgen Sie Checklisten, messen Sie Web-Vitals von echten Benutzern, respektieren Sie die Privatsphäre und Systemeinstellungen - und Ihre Benutzeroberfläche ist auf jedem mobilen Gerät benutzerfreundlich und zuverlässig.