Best Practices in der E-Mail-Erstellung

Moderne CSS-Techniken wie Flexbox oder Grid werden von vielen E-Mail-Program-men (v.a. Outlook) nicht unterstützt.

👉 Tabellen sind die einzige zuverlässige Möglichkeit, Spalten, Zeilen und Abstände zu strukturieren.

Anders als beim Webdesign werden div-Elemente in E-Mails oft nur unzureichend unterstützt.

👉 Eigenschaften wie „padding“, „margin“ oder „width“ werden möglicherweise ignoriert oder falsch interpretiert, was zu fehlerhaften Layouts führen kann.

E-Mail-Clients ignorieren häufig die Breite des body-Elements.

👉 Ohne festgelegte Pixelbreiten kann sich Ihr Layout unvorhersehbar ausdehnen, schrumpfen oder verschieben.

Best Practice: Verwenden Sie für jeden Inhaltsblock festgelegte Breiten (z. B. 600 px).

Prozentangaben können sich je nach Browser unterschiedlich verhalten.

👉 Ein Spaltenlayout im Verhältnis 50:50 wird möglicherweise plötzlich als 60:40 dargestellt – oder noch schlechter.

Best Practice: Verwenden Sie feste Pixelwerte für eine präzise Steuerung.

Selbst technisch korrekt aufgebaute E-Mails können je nach E-Mail-Client unterschiedlich dargestellt werden. Besonders Bilder, Hintergrundeffekte, Dark Mode und interaktive Elemente erfordern zusätzliche Aufmerksamkeit.

Viele E-Mail-Clients ignorieren Style-Blöcke teilweise oder gar vollständig.

👉 Wichtige Stile wie Schriftarten, Farben und Abstände müssen direkt in jedem HTML-Element festgelegt werden.

Sich in E-Mails auf vererbte Stile zu verlassen, ist riskant.

👉 Manche E-Mail-Clients geben Stile nicht korrekt von übergeordneten an untergeordnete Elemente weiter.

Randabstände gehören zu den unzuverlässigsten CSS-Eigenschaften im E-Mail-Design.

👉 Manche E-Mail-Clients ignorieren sie, andere überschreiben sie, manche fügen eigene Standard-Randabstände hinzu.

Best Practice:

• Legen Sie immer margin: 0; inline fest.
• Verwenden Sie lieber Innenabstände oder strukturierte Abstände zwischen den Tabellenzellen.

Standardmäßig stellen die meisten E-Mail-Clients Links zwangsläufig blau und unterstrichen dar.

👉 Dies kann die Konsistenz Ihres Designs beeinträchtigen.

Best Practice:

• Fügen Sie einen globalen Fallback hinzu, um das Erscheinungsbild von Links festzulegen.
• Überschreiben Sie bei Bedarf die Stile für bestimmte Links inline.

Zum Abschluss betrachten wir einige technische Details, die häufig über die tatsächliche Darstellungsqualität einer E-Mail entscheiden. Besonders Outlook-spezifische Besonderheiten, Buttons und mobile Optimierung sollten bereits während der Entwicklung berücksichtigt werden.

Bilder ohne feste Abmessungen können je nach Client sehr unterschiedlich dargestellt werden.

👉 Sie können gestreckt, übergroß oder extrem klein erscheinen.

Best Practice:
Legen Sie immer mindestens einen Wert für die Breite oder Höhe fest, idealerweise beides.

Die Unterstützung von Hintergrundbildern in E-Mail-Clients ist sehr inkonsistent, insbesondere in Outlook.

👉 Text, der über Bilder gelegt wird, ist oft unlesbar oder wird nicht richtig dargestellt.

Best Practice:
Integrieren Sie den Text nach Möglichkeit direkt in die Grafik selbst, anstatt HTML-Text über ein Bild zu legen.

Jeder E-Mail-Client handhabt den Dark Mode anders.

👉 Farben können sich automatisch umkehren, Hintergründe können sich ändern und Media-Queries werden oft ignoriert.

Best Practice:
Verwenden Sie starke Farbkontraste und einfache Designs, vermeiden Sie Hintergründe mit schlechtem Kontrast zu Elementen im Vordergrund und testen Sie Logos sowie Buttons in verschiedenen Clients.

Effekte wie :hover oder animierte Interaktionen werden in E-Mail-Umgebungen oft nicht unterstützt.

👉 Buttons und Links sollten immer funktionieren, ohne auf Interaktionseffekte angewiesen zu sein.

Best Practice:
Stellen Sie sicher, dass Inhalte, Buttons und Navigation auch ohne Hover-Effekte oder Animationen vollständig sichtbar und nutzbar bleiben.

bis jetzt haben wir die Grundlagen von E-Mail-Layouts, bewährte Verfahren für die Gestaltung und häufige visuelle Probleme behandelt. Zum Abschluss dieser Reihe konzentrieren wir uns auf einige Umsetzungsdetails, die einen großen Einfluss darauf haben, wie Ihre E-Mails in verschiedenen E-Mail-Clients dargestellt werden.

Hier sind vier wichtige Techniken, die jeder E-Mail-Entwickler kennen sollte:

Viele E-Mail-Clients entfernen das Padding aus a-Tags, wodurch ansprechend gestaltete Buttons zu einfachen Textlinks werden.

👉 Erstellen Sie Buttons mithilfe einer kleinen Tabellenstruktur und fügen Sie den Link darin ein.

Best Practice:
Verwenden Sie die Tabellenzelle (td), um Abstand, Hintergrundfarbe, Rahmen und Größe zu steuern. Das a-Tag sollte in erster Linie die Textformatierung enthalten.

Einige E-Mail-Clients, insbesondere Outlook, erkennen einen Link nur dann als klickbar, wenn ein gültiges href-Attribut vorhanden ist.

👉 Selbst Platzhalter-Links sollten eine korrekte URL oder zumindest ein # enthalten.

Best Practice:
Lassen Sie das href-Attribut beim Testen oder Erstellen von Vorlagen niemals leer.

Outlook ist nach wie vor einer der komplexesten E-Mail-Clients, da es Microsoft Word zur Darstellung von HTML nutzt.

👉 Standard-HTML und CSS verhalten sich oft anders als erwartet.

Best Practice:
Verwenden Sie Outlook-spezifische Wrapper und MSO-bedingte Kommentare, um sicherzustellen, dass Breiten, Abstände und Bilder einheitlich dargestellt werden.

Im Gegensatz zu modernen Websites passen sich tabellenbasierte E-Mail-Layouts nicht automatisch an kleinere Bildschirme an.

👉 Ohne Responsive Design sind E-Mails auf Mobilgeräten schwer lesbar.

Best Practice:
Verwenden Sie spezielle Klassen für mobile Geräte und Media Queries, um Spalten zu stapeln, die Größe von Inhalten anzupassen und die Lesbarkeit auf Smartphones zu verbessern.