Mobile E-Mail

Definition: Mobile E-Mail bezeichnet die Optimierung von E-Mail-Marketing-Kampagnen für die Darstellung, Lesbarkeit und Bedienbarkeit auf Smartphones und Tablets. 60–70 % aller E-Mails werden heute auf mobilen Geräten geöffnet (Litmus-Daten 2024), was Mobile-optimiertes Design zur Pflicht macht. Kernanforderungen: einspaltiges Layout (max. 600px Breite), Schriftgröße mindestens 16px für Fließtext, CTA-Buttons mindestens 44×44 pt (Apple HIG) / 48×48 dp (Material Design), Preheader-Text optimiert (zeigt nach Betreff in mobiler Inbox), Bilder mit Alt-Text (viele Clients laden Bilder nicht automatisch) und kurze prägnante Texte. Spezifische Mobile-E-Mail-Herausforderungen: unterschiedliche Darstellung in Gmail (Android), Apple Mail (iOS), Outlook (iOS/Android) und Dark Mode. Deep Links in E-Mails: für App-Nutzer direkt zum relevanten Screen in der App statt in den Browser.

Erläuterung

Mobile E-Mail-Leser sind oft in Bewegung, abgelenkt und scannen statt zu lesen. Konsequenz: die wichtigste Information und der primäre CTA müssen in der ersten Bildschirmhöhe erscheinen («above the fold» auf Mobile ≈ 500–600px) ohne Scrollen. E-Mails die nur auf Desktop getestet wurden und dann auf iPhone dargestellt werden erzeugen häufig Darstellungsfehler: mehrspaltige Layouts kollabieren, Text wird zu klein, Buttons zu schmal zum Tippen.

Design und Layout

Einspaltiges Layout: Max. 600px Gesamtbreite; auf Smartphones: skaliert auf Gerätebreite (320–428px); keine mehrspaltige Struktur die auf Mobile kollabiert; fluid oder responsive via Media Queries; Hybrid-Ansatz: Desktop zweispaltig, Mobile einspaltig via @media (max-width: 600px)
Typografie: Fließtext: mindestens 16px; Headlines: 22–28px; Zeilenhöhe (line-height): 1.5 für Fließtext; kein Text unter 13px (absolut unleserlich auf Mobile); Schriftart: websichere Fonts (Arial, Georgia) oder mit Fallback; kein justify-Text (schlechte Lesbarkeit auf schmalen Screens)
CTA-Buttons: Mindestgröße 44×44pt (iOS) / 48×48dp (Android); besser: volle Breite auf Mobile (width: 100% im Mobile-Breakpoint); ausreichend Padding (16px vertikal, 32px horizontal); klarer Kontrast: Button-Farbe vs. Hintergrund; Text kurz: «Jetzt kaufen» statt «Klicken Sie hier um das Produkt zu kaufen»; max. 2 CTAs pro E-Mail
Bildoptimierung: 2× Auflösung für Retina-Displays (100×100 px Bild bei 50×50 display); Alt-Text für alle Bilder (viele Mobile-Clients laden Bilder nicht automatisch); Bilder unter 100KB: schnelle Ladezeit auch bei mobilem Datennetz; WebP wenn Client unterstützt; kein Text in Bildern (unleserlich wenn Bilder geblockt)

Preheader und Subject-Line

Preheader-Text: Vorschautext nach Betreff in mobiler Inbox; sichtbar: 40–90 Zeichen je nach Client und Gerät; Gmail: Betreff + Preheader sichtbar; Apple Mail: häufig Preheader prominent; unterschätzte Öffnungsrate-Hebel; Inhalt: Ergänzung zum Betreff, kein Duplikat; versteckter Preheader-Text via HTML-Tricks für Desktop-Clients die ihn nicht anzeigen
Subject-Line für Mobile: Unter 50 Zeichen sichtbar auf Mobile (ohne Abschneiden); Emoji vorsichtig einsetzen (teils Client-Abhängig); A/B-Testing: immer Betreff und Preheader zusammen testen; Personalisierung: [Vorname] erhöht Öffnungsrate statistisch; Dringlichkeit: «Nur noch 24h» – aber nur wenn wahr
Dark Mode: Apple Mail, Gmail (Android) und Samsung Mail: Dark Mode aktiv; weiße Hintergründe werden invertiert; Logos mit transparentem Hintergrund: können auf Dark Background verschwinden; Lösung: separate Dark-Mode-Styles via @media (prefers-color-scheme: dark); Test: Litmus, Email on Acid unterstützen Dark-Mode-Preview

Testing und Deep Links

E-Mail-Client-Testing: Top-Clients DACH: Apple Mail iOS (35–40 %), Gmail Android (20–25 %), Outlook iOS/Android (10–15 %), Samsung Mail (5–10 %); jeder Client rendert CSS unterschiedlich; Litmus oder Email on Acid: Testing auf 70+ Clients in einer Vorschau; Mindest-Test: Apple Mail iOS, Gmail iOS/Android, Outlook iOS vor jeder Kampagne
Deep Links für App-Nutzer: E-Mail-CTA kann für App-Nutzer direkt in App öffnen statt Browser; Universal Link (iOS) / App Link (Android) in E-Mail-Button; Branch oder AppsFlyer OneLink: erkennt ob App installiert → öffnet App oder Browser; für Warenkorb-Abbruch-E-Mails: direkt zum verlassenen Warenkorb in App; erhöht E-Mail-CVR für App-Nutzer signifikant (bessere UX als Mobile Browser)
Versandzeit-Optimierung: Mobile-Öffnungszeiten: morgens (7–9 Uhr) und mittags (12–13 Uhr) beim Pendeln/Mittagspause; abends (20–22 Uhr) bei entspannter Nutzung; AB-Test: versenden Sie an 20 % der Liste zu verschiedenen Zeiten → gewinnende Zeit für 80 % nutzen; Klaviyo/Braze: Smart Send Time basiert auf individuellem Öffnungsverhalten

Praxistipp: Testen Sie jede E-Mail vor dem Versand auf mindestens 3 Clients: Apple Mail iOS, Gmail Android und Outlook iOS – das deckt 65–70 % Ihrer DACH-Empfänger ab. Platzieren Sie den primären CTA innerhalb der ersten 500px (above the fold auf Mobile) ohne Scrollen – viele mobile Leser tappen auf den CTA oder löschen die E-Mail bevor sie scrollen. Aktivieren Sie Deep Links für App-Nutzer: wenn Sie einen Warenkorb-Abbruch-Flow haben und 30 % Ihrer Empfänger die App installiert haben, können Deep Links die CVR dieser Gruppe um 30–50 % steigern.