- © 2026 Mailsoftly Inc. The name "Mailsoftly" and the Mailsoftly logo are registered trademarks of Mailsoftly Inc.
Von Esma Calis · Zuletzt aktualisiert: 2026-09-17Ihre Abonnenten entscheiden innerhalb von zwei Sekunden, ob eine E-Mail ihre Aufmerksamkeit verdient. Diese Entscheidung fällt fast vollständig über das Design. Die Betreffzeile bringt die Öffnung, doch Layout, Typografie und visuelle Hierarchie entscheiden, ob jemand über den sichtbaren Bereich hinaus weiterliest.
Diese 15 Best Practices für E-Mail-Design zeigen, was 2026 tatsächlich funktioniert: getestet über Milliarden von Sendungen, geprüft in Rendering-Engines von Apple Mail bis Outlook und nachweislich gut für die Klickrate, sobald Sie sie konsequent anwenden. Zu jeder Regel gehört der konkrete Schwellenwert oder Messwert, der gutes Design vom Bauchgefühl trennt.
Ob Sie gerade Ihr erstes Newsletter-Design aufbauen oder Kampagnen optimieren, die bereits gut laufen: Diese Regeln geben Ihnen einen Rahmen, den Sie sofort anwenden können, ohne Ihr komplettes Vorlagensystem neu zu bauen.
Das Wichtigste in Kürze
E-Mail-Design ist nicht nur Ästhetik. Gmail, Yahoo und Microsoft nutzen Engagement-Signale wie Scrolltiefe, Klickrate und die Zeit bis zum Löschen als Eingangsgrößen für ihre Spam-Filter. Eine E-Mail, die mobil schlecht dargestellt wird, landet schneller im Papierkorb, und das signalisiert dem Postfachanbieter geringe Qualität. Auf Dauer schwächt schwaches Design Ihre Absenderreputation.
Laut dem State-of-Email-Report von Litmus erreichen E-Mails, die responsive Designprinzipien befolgen, eine um 15% höhere Click-to-Open-Rate als Layouts mit fester Breite. Die Rendering-Landschaft ist zersplittert, es existieren über 90 Kombinationen aus E-Mail-Client und Gerät. Jede Designentscheidung muss deshalb den kleinsten gemeinsamen Nenner berücksichtigen und auf modernen Clients trotzdem gut aussehen.
Die folgenden Regeln sind in fünf Kategorien gegliedert: Layout, Typografie, Bilder, CTAs und fortgeschrittene Techniken. Jede davon löst eine konkrete Rendering- oder Engagement-Hürde.
Mehrspaltige Layouts brechen in mobilen Clients, die keine Media Queries unterstützen, und dazu zählen nach wie vor mehrere Android-Mail-Apps und ältere Outlook-Versionen. Eine einspaltige Struktur sorgt dafür, dass Ihre Inhalte unabhängig von der Bildschirmbreite korrekt untereinander stehen. Das ist der wirksamste Hebel im E-Mail-Design für mobile Lesbarkeit.
Wenn Ihr Inhalt Elemente nebeneinander braucht, etwa Produktvergleiche, arbeiten Sie mit einem Stacking-Ansatz: zwei Spalten auf dem Desktop, die ab 480 px zu einer einzigen Spalte zusammenfallen. Verlassen Sie sich nie auf horizontales Scrollen.
Der 600-px-Standard existiert, weil die Rendering-Engine von Outlook (auf Word-Basis) breitere E-Mails unvorhersehbar behandelt und die meisten Vorschaufenster am Desktop E-Mails ungefähr in dieser Breite anzeigen. Wenn Sie Ihre Container-Tabelle auf maximal 600 px setzen, erhalten Sie in jedem Client eine gleichmäßige Darstellung ohne horizontale Scrollbalken.
Weißraum ist kein leerer Raum, sondern ein Gestaltungselement, das den Blick führt. Nutzen Sie 24 bis 32 px Abstand zwischen Inhaltsblöcken und 16 px zwischen zusammengehörenden Elementen. So entstehen klare visuelle Gruppen, die Ihre E-Mail scanbar machen, ohne den Leser zu überfordern.
Spam-Filter stufen E-Mails ab, die überwiegend aus Bildern mit wenig Text bestehen. Ein Verhältnis von 60% Text zu 40% Bild hält Sie von bildlastigen Spam-Auslösern fern und lässt trotzdem starke visuelle Kommunikation zu. Dieses Verhältnis sorgt außerdem dafür, dass Ihre Botschaft ankommt, wenn Bilder blockiert werden, und genau das ist in vielen Unternehmens-Clients die Standardeinstellung.
Eigene Webfonts laden in E-Mail-Clients uneinheitlich. Outlook ignoriert sie vollständig. Gmail auf dem Smartphone lädt sie mal, mal nicht. Verlässlich ist nur ein Font-Stack, der mit Ihrer Wunschschrift beginnt und auf Systemschriften zurückfällt:
Diese Stacks decken macOS, Windows, iOS und Android ohne Rendering-Überraschungen ab. Wenn Ihre Marke eine eigene Schrift nutzt, binden Sie diese über @font-face in einem <style>-Block innerhalb von <head> ein. Clients, die das unterstützen, zeigen sie an, alle anderen fallen sauber auf die Ersatzschrift zurück.
Auf mobilen Bildschirmen zwingt alles unter 16 px zum Zoomen. Apples Human Interface Guidelines empfehlen 17 px als kleinste lesbare Textgröße. Mit 16 px im E-Mail-Fließtext erreichen Sie gute Lesbarkeit, ohne die überlangen Zeilen, die größere Schriftgrade in Desktop-Breiten mit sich bringen.
Die Zeilenhöhe sollte im Fließtext bei 1,5 bis 1,6 liegen. Dieser Abstand verhindert gedrängte Zeilen auf kleinen Bildschirmen und erhöht das Lesetempo auf allen Geräten.
Verwenden Sie eine H1 für die Hauptbotschaft der E-Mail, in der Regel die Hero-Headline, H2 für Abschnittswechsel und H3 für Unterpunkte. Diese Hierarchie wirkt nicht nur optisch: Screenreader nutzen Überschriftenebenen, damit sehbeeinträchtigte Nutzer durch E-Mail-Inhalte navigieren können. Wer Ebenen überspringt, also von H1 direkt zu H3, zerstört diese Navigation.
| H1 | 28 bis 36 px | Eine pro E-Mail |
| H2 | 22 bis 26 px | Abschnittsüberschriften |
| H3 | 18 bis 20 px | Unterabschnitte |
| Fließtext | mind. 16 px | Zeilenhöhe 1,5 bis 1,6 |
ALT-Texte bedienen drei Zielgruppen: Screenreader-Nutzer, die das Bild nicht sehen, Abonnenten, deren Client Bilder standardmäßig blockiert, und E-Mail-Clients, die den ALT-Text als Platzhalter anzeigen, solange das Bild lädt. Jedes Bild in Ihrer E-Mail braucht einen beschreibenden, knappen ALT-Text, der den Zweck des Bildes vermittelt, nicht nur „Bild“ oder „Banner“.
Bei rein dekorativen Bildern ohne Informationswert setzen Sie ein leeres ALT-Attribut (alt=""), damit Screenreader sie überspringen, statt kontextlos „Bild“ anzusagen.
Das Gesamtgewicht einer E-Mail beeinflusst die Ladezeit, besonders in Mobilfunknetzen. Jedes Bild sollte unter 200 KB bleiben, die gesamte E-Mail (HTML plus Bilder) unter 800 KB. Gmail schneidet E-Mails ab 102 KB HTML ab. Bilder extern zu hosten und zu optimieren entscheidet also mit darüber, ob Abonnenten Ihre vollständige Nachricht sehen.
Nutzen Sie moderne Formate, wo sie unterstützt werden: WebP liefert bei gleicher Qualität 25 bis 35% kleinere Dateien als JPEG. Für Clients ohne WebP-Unterstützung hinterlegen Sie JPEG oder PNG als Fallback. Werkzeuge wie der E-Mail-Editor von Mailsoftly optimieren Bilder automatisch beim Hochladen.
Eine E-Mail, die ausschließlich aus Bildern ohne echten Textinhalt besteht, löst Spam-Filter massiv aus. Abgesehen von der Zustellbarkeit sind reine Bild-E-Mails vollkommen unzugänglich, sobald Bilder blockiert werden, und für Screenreader-Nutzer wertlos. Bringen Sie Kernbotschaft und CTA immer als echten Text unter und setzen Sie Bilder unterstützend ein, nicht als Ersatz für Ihre Inhalte.
Entscheidungsmüdigkeit ruiniert Klickraten. Wer mehrere konkurrierende CTAs anbietet, bekommt von Abonnenten am Ende gar keine Reaktion. Jede E-Mail braucht eine klare Hauptaktion, also genau das eine, was der Leser tun soll. Sekundäre Links dürfen in Navigation oder Fußbereich stehen, doch das visuelle Gewicht der E-Mail sollte auf einen Button zulaufen.
Wenn Ihre E-Mail wirklich mehrere Aktionen braucht, etwa bei einem Produkt-Digest, bauen Sie eine klare visuelle Hierarchie: Ein CTA dominiert, die übrigen ordnen sich über kleinere Größe, hellere Farbe oder reine Textlinks unter.
Apple und Google nennen beide 44 px als kleinste komfortable Touch-Fläche für mobile Oberflächen. Ihre CTA-Buttons müssen dieses Maß in Höhe und Breite erreichen. Mobil wird ein Button, der am Desktop passend wirkt, ärgerlich klein. Mit mindestens 44 px Höhe und 24 px horizontalem Innenabstand lässt er sich zuverlässig antippen, ohne Fehlklicks.
Der Standard WCAG 2.1 AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text- und Hintergrundfarbe. Das gilt für den Text auf Ihrem CTA-Button gegenüber der Buttonfläche und für die Buttonfläche gegenüber dem E-Mail-Hintergrund. Zu wenig Kontrast bedeutet: Ihr CTA verschwindet für Abonnenten mit Sehbeeinträchtigung und wirkt auf dunkel eingestellten Bildschirmen ausgewaschen.
Über 80% der iPhone-Nutzer und ein wachsender Anteil der Android- und Desktop-Nutzer haben den Dark Mode aktiviert. E-Mail-Clients gehen unterschiedlich damit um: Apple Mail invertiert Farben aggressiv, Gmail auf Android greift deutlich zurückhaltender ein. Ihr E-Mail-Design muss beide Szenarien abdecken.
Die wichtigsten Punkte für E-Mail-Design im Dark Mode:
@media (prefers-color-scheme: dark) und passenden Meta-Tags für Clients, die das unterstützen.Barrierefreiheit in E-Mails geht über ALT-Texte hinaus. Jede Information, die Sie visuell transportieren, braucht eine Entsprechung im Text. Dazu zählen: farbcodierte Statusanzeigen (Beschriftung ergänzen), Infografiken (Textzusammenfassung anbieten), Icons als Navigation (aria-label oder Text ergänzen) und Diagramme (die wichtigsten Datenpunkte als Text mitliefern).
Weltweit leben rund 2,2 Milliarden Menschen mit einer Form von Sehbeeinträchtigung. Barrierefreies E-Mail-Design ist keine Kür: Es vergrößert Ihre erreichbare Zielgruppe und verbessert die Erfahrung häufig für alle, auch für Abonnenten, die E-Mails über langsame Verbindungen oder bei hellem Sonnenlicht lesen.
Diese Regeln wirken als System. Ein einspaltiges Layout (Regel 1) macht Ihre Typografie-Hierarchie (Regel 7) wirksamer, weil Leser linear scannen. Komprimierte Bilder (Regel 9) laden schneller und verschaffen Ihrem CTA (Regel 11) mehr Zeit, gesehen zu werden, bevor der Abonnent weiterzieht. Dark-Mode-Tauglichkeit (Regel 14) sorgt dafür, dass Ihre sorgfältig gewählten Kontrastverhältnisse (Regel 13) auch nachts funktionieren.
Am schnellsten setzen Sie diese Regeln um, wenn Sie mit einer Vorlage starten, die sie bereits erfüllt. Der Drag-and-drop-E-Mail-Editor von Mailsoftly erzwingt standardmäßig mobil-responsive Layouts, saubere Bildkomprimierung, lesbare Schriftgrößen und touchfreundliche Buttons. Sie kümmern sich um den Inhalt, die Plattform übernimmt die Best Practices im E-Mail-HTML automatisch.
600 Pixel sind die Standard-Höchstbreite im E-Mail-Design. Diese Breite wird in der Word-basierten Rendering-Engine von Outlook korrekt dargestellt, passt bequem in das Vorschaufenster von Gmail und bietet genug horizontalen Raum für gut lesbare einspaltige Inhalte am Desktop. Mobil skaliert die E-Mail automatisch auf die Breite des Viewports, sobald Sie prozentuale Breiten innerhalb eines Containers mit Maximalbreite verwenden.
Nutzen Sie ein Testwerkzeug wie Litmus oder Email on Acid und prüfen Sie Ihre E-Mail vor dem Versand in über 90 Kombinationen aus Client und Gerät. Testen Sie mindestens manuell in Gmail (Web und mobil), Apple Mail, Outlook (Desktop) und einem Android-Client. Achten Sie besonders auf die Darstellung im Dark Mode, auf das Verhalten bei blockierten Bildern und auf die Größe der CTA-Buttons. Schicken Sie Testmails an echte Postfächer, statt sich nur auf Vorschauwerkzeuge zu verlassen, denn zwischen Vorschau und tatsächlicher Zustellung treten Unterschiede auf.
Halten Sie einzelne Bilder unter 200 KB und das Gesamtgewicht der E-Mail unter 800 KB. Für Hero-Bilder über die volle Breite einer 600 px breiten E-Mail erstellen Sie die Datei mit 1200 px Breite (2x für Retina-Displays) und zeigen sie über HTML-Breitenattribute mit 600 px an. Nutzen Sie JPEG für Fotos (Qualität 70 bis 80%), PNG für Grafiken mit Transparenz und GIF für einfache Animationen unter 1 MB. Verzichten Sie auf Bilder breiter als 1200 px, denn sie bringen optisch nichts und verlängern die Ladezeit deutlich.
Ja. Neben der ethischen Verpflichtung, Inhalte für die weltweit 2,2 Milliarden Menschen mit Sehbeeinträchtigung zugänglich zu machen, funktionieren barrierefreie E-Mails für alle besser. Eine saubere Überschriftenstruktur hilft jedem beim Scannen. Ausreichender Kontrast verbessert die Lesbarkeit in heller Umgebung. ALT-Texte liefern Kontext, solange Bilder noch laden. Viele Maßnahmen der Barrierefreiheit, etwa echter Text statt Textbildern, verbessern zusätzlich die Zustellbarkeit, weil sie Ihr Verhältnis von Text zu Bild gesund halten.
Part of: E-Mail-Marketing
Ready to boost your email marketing?
Send beautiful, targeted emails that convert. Free plan available, paid plans from $15 a month.
Try Mailsoftly FreeKeine Kreditkarte nötig