Anders als Webbrowser interpretieren E-Mail-Clients HTML auf ihre eigene Art und Weise, was sich auf das Layout, die Funktionalität und das Aussehen deiner E-Mails auswirkt.
Mit diesem Leitfaden möchte ich dir ein umfassendes Toolkit für HTML-Elemente an die Hand geben, mit dem du deine E-Mails für verschiedene Clients optimieren kannst. Ich werde auch auf CSS Bezug nehmen, aber der Schwerpunkt liegt auf HTML.
Übersicht der unterstützten HTML-Tags
In der Tabelle findest du eine Übersicht über die am häufigsten verwendeten Tags, ihre Funktionen und ihre Kompatibilität mit verschiedenen E-Mail-Clients. Klicke auf die Tags, um eine ausführlichere Erklärung und praktische Tipps zu erhalten.
HTML-Tag | Funktion | Gmail | Outlook | Apple Mail | Yahoo Mail | AOL | Thunderbird |
<b> | Fettgedruckter Text | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
<i> | Kursiver Text | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
<ahref=“”> | Hyperlink | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
<ul> | Ungeordnete Liste | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
<ol> | Geordnete Liste | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
<img> | Bild | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
<table> | Tabellenlayout | ✅ | Teilweise | ✅ | Teilweise | ✅ | ✅ |
<div> | Unterteilung für Inhalte auf Blockebene | ✅ | Teilweise | ✅ | ✅ | ✅ | ✅ |
<span> | Inline-Text-Styling | ✅ | Teilweise | ✅ | ✅ | ✅ | ✅ |
<form> | Formulare für Benutzereingaben | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
Universell unterstützte HTML-Tags: detaillierte Erklärungen
Im Folgenden findest du die Tags, die die Grundlage des E-Mail-Designs bilden und von den meisten E-Mail-Clients zuverlässig unterstützt werden. Ich habe sie nach ihrer Funktion kategorisiert; außerdem findest du kleine Codeschnipsel, die zeigen, wie die Tags verwendet werden sollen.
Grundlegende Textformatierung
Die folgenden Textformatierungs-Tags werden universell unterstützt.
- <b>: macht den Text innerhalb des Tags fett
<p>Dies ist eine <b>fette</b> Anweisung.</p> |
- <i>: macht den Text innerhalb des Tags kursiv
<p>Dies ist ein <i>kursives</i> Wort.</p> |
- <u>: fügt dem Text innerhalb des Tags eine Unterstreichung hinzu
<p>Dies ist ein <u>unterstrichenes</u> Wort.</p> |
- <p>: definiert einen Absatz eines Textes, wichtig um Texte in lesbare Blöcke zu gliedern
<p>Dies ist ein neuer Textabsatz in der E-Mail.</p> |
- <strong>: erzeugt eine starke Betonung; ähnlich wie <b>, aber semantisch bedeutsamer
<p>Dies ist eine <strong>starkeBetonung</strong> auf einem Punkt.</p> |
- <em>: ähnlich wie <i>, aber für eine subtile Betonung; du kannst damit Schlüsselwörter und Sätze elegant hervorheben
<p>Dies ist ein <em>betontes</em> Wort.</p> |
Zur Erinnerung: Die oben genannten Tags sind in Gmail, Outlook, Apple Mail, Yahoo und anderen Clients zuverlässig. Dein Styling bleibt auf diesen Plattformen einheitlich.
Links und Anker-Tags
Das <a href=””>Tag wird zwar universell unterstützt, aber es gibt ein paar Besonderheiten, auf die ich dich hinweisen möchte.
- Grundlegende Verwendung: Definiere den Hyperlink mit dem <a href=””>Tag und achte darauf, dass er die vollständige URL enthält, um Fehler zu vermeiden.
<p>Klicke<a href=”https://example.com”>hier</a>, um mehr zu erfahren.</p> |
- Gmail: unterstützt Inline-Styling innerhalb von Anker-Tags, sodass du das Aussehen von Links mit CSS anpassen kannst (z. B. Farbe, Textdekoration).
- Outlook: entfernt oft CSS-Stile aus Links, daher musst du die Textdekorationsfunktion direkt im Tag verwenden.
<a href=”https://example.com” style=”text-decoration: underline; color: #0000EE;”>Besuche unsere Website</a> |
- Apple Mail: Generell gilt für das Styling innerhalb von <a>-Tags, dass du bei Farben und Unterstreichungen flexibel bist.
Es ist wichtig, die Links auf verschiedenen Clients zu testen, da sich der Supportlevel ändern kann. Auf die Details gehe ich im Abschnitt “Best Practices” ein.
Geordnete und nicht geordnete Listen
Listen werden durchgängig unterstützt (sowohl <ol> als auch <ul>), aber beachte, dass die Abstände und Einrückungen variieren können. Hier sind grundlegende Beispiele.
- Nicht geordnete Listen
<ul> <li>ErsterEintrag</li> <li>ZweiterPunkt</li> <li>DrittesElement</li> </ul> |
- Geordnete Listen
<ol> <li>ErsterPunkt</li> <li>ZweiterPunkt</li> <li>DritterPunkt</li> </ol> |
Profi-Tipp: Outlook fügt manchmal zusätzliche Leerzeichen um Listenelemente hinzu. Wenn du CSS-Padding-Anpassungen mit dem <li>-Element verwendest, kannst du die Konsistenz des Layouts feinjustieren.
Bildunterstützung
Auch hier werden Bilder weitgehend unterstützt, aber bestimmte Attribute und das Verhalten von Bildern können variieren, insbesondere bei Outlook und Yahoo Mail.
- Hauptverwendung:
<img src=”https://example.com/image.jpg” alt=”Beschreibung des Bildes” width=”600″ height=”300″> |
Attribute:
- src: gibt die URL des Bildes an. Verwende absolute URLs, da relative Pfade normalerweise nicht korrekt geladen werden.
- alt: gibt einen alternativen Text für die Barrierefreiheit an; dies kann von unschätzbarem Wert sein, wenn deine Bilder nicht geladen werden können.
- width und height: Definiere die expliziten Abmessungen, um die Bildanzeige zu steuern und Größenprobleme mit Outlook zu vermeiden.
Client-spezifische Überlegungen:
- Outlook: Es kann sein, dass bestimmte Formatierungen oder Bilder ignoriert werden. Das passiert zum Beispiel bei max-width, was dazu führt, dass Bilder gestreckt erscheinen. Um dies zu vermeiden, solltest du die exakten Maße verwenden und dich nicht nur auf CSS verlassen, um die Reaktionsfähigkeit zu gewährleisten.
- Yahoo Mail: Die Unterstützung für benutzerdefiniertes Bildstyling ist begrenzt. Du musst die E-Mail-Vorlage gründlich testen, vor allem wenn sie Bilder mit Hintergründen oder Rahmen verwendet.
Tipp: Halte die Bilder in einer festen Breite oder verwende Pixelwerte statt Prozentangaben. So kannst du sicherstellen, dass die Bilder bei den meisten Clients gut dargestellt werden.
HTML-Tags mit eingeschränkter oder teilweiser Unterstützung
Teilweise unterstützte und eingeschränkt unterstützte Tags erfordern spezielle Workarounds, um die gewünschte Konsistenz zu erreichen. Ich gehe kurz auf die Grundstruktur, die Attribute, die Umgehungsmöglichkeiten usw. ein.
Tabellen
Auch wenn die Darstellung von Tabellen in E-Mail-Layouts üblich ist, kann sie variieren. Am deutlichsten sind die Unterschiede bei Google Mail und Outlook. Schau dir die Beispiele und Tipps an, um die genaue Kontrolle über die E-Mail-Struktur zu behalten.
- Grundlegende Tabellenstruktur:
<table width=”100%” cellpadding=”0″ cellspacing=”0″> <tr> <td>Zeile 1, Spalte 1</td> <td>Zeile 1, Spalte 2</td> </tr> <tr> <td>Reihe 2, Spalte 1</td> <td>Reihe 2, Spalte 2</td> </tr> </table> |
Attribute:
- width: Definiere eine feste Breite für Tabellen, um ein einheitliches Layout mit verschiedenen Clients zu erhalten.
- cellpadding und cellspacing: Achte darauf, dass du beide Attribute kontrollierst, sonst kann es sein, dass deine Abstände nicht stimmen.
Client-spezifische Tipps:
- Gmail unterstützt in der Regel Tabellen, kann aber Inline-CSS für Auffüllungen und Randanpassungen erfordern. Vermeide es außerdem, Tabellen zu tief zu verschachteln, um Darstellungsprobleme zu vermeiden.
- Outlook rendert Tabellen mit der Microsoft Word-Engine (ein Alptraum, wenn du mich fragst 😀 ), die CSS-basierte Layouts oft nicht berücksichtigt. Um die gewünschte Konsistenz zu erreichen, gibst du die Breite in den <td>-Tags an und vermeidest fortgeschrittenes CSS, um die Positionen innerhalb der Tabellen zu definieren.
Hier ist ein Beispiel für ein konsistentes Tabellen-Styling:
<table width=”100%” cellpadding=”10″ cellspacing=”0″ style=”border-collapse: collapse;”> <tr> <td style=”width: 50%; background-color: #f0f0f0;”>Spalte 1</td> <td style=”width: 50%; background-color: #cccccc;”>Spalte 2</td> </tr> </table> |
Eingabeelemente und Formulare
Formulare und andere Elemente werden nicht umfassend unterstützt, also vermeide es, sie direkt in deinen E-Mails zu verwenden. Aber es gibt natürlich immer einen Workaround; sieh dir die Details unten an.
- Nicht unterstützte Elemente: <form>, <input>, <button> und <textarea> funktionieren in der Regel nicht in Gmail, Outlook oder Yahoo Mail.
- Umgehung: Verwende einen Call-to-Action-Link und leite die Nutzer/innen auf eine Landing Pages, wo sie ein Formular ausfüllen können.
<p>Wir würden uns freuen, von dir zu hören! <a href=”https://example.com/feedback” target=”_blank”>Klick hier, um Feedback zu hinterlassen</a>.</p> |
Divs und Spans
Da die Tags <div> und <span> teilweise von verschiedenen Clients unterstützt werden, werden sie oft in Kombination mit Inline-Styles verwendet, um die Kompatibilität zu verbessern. Ich beschreibe die grundlegende Verwendung sowie einige Tipps und Tricks (hier gibt es wirklich keine Umgehung).
Grundlegende Verwendung:
- <div>: wird normalerweise für Elemente auf Blockebene verwendet und hilft dabei, verschiedene Abschnitte in einer E-Mail zu organisieren.
- <span>: Dies ist ein Inline-Container, der häufig für die Gestaltung bestimmter Textelemente verwendet wird.
- Inline-Styling: Wie bereits erwähnt, entfernen viele E-Mail-Clients das eingebettete und externe CSS, so dass Inline-Styling für diese Tags unerlässlich ist. ⬇️Check das beispielhafte Snippet zur Verwendung des <div>-Tags.
<div style=”background-color: #f0f0f0; padding: 10px;”> Dies ist ein div mit Hintergrundfarbe und padding. </div> <p>Dies ist ein <span style=”color: #ff0000;”>hervorgehobenes</span> Wort.</p> |
Client-spezifische Tipps:
- Outlook: Es kann sein, dass bestimmte Inline-Stile ignoriert werden; ich empfehle, für komplexere Layouts das <table>-Element zu verwenden.
- Responsive Design: Gmail und Apple Mail unterstützen Media-Queries, sodass es möglich ist, <span>- und <div>-Stile für mobile Geräte anzupassen. Allerdings kann die Reaktionsfähigkeit solcher E-Mails in Outlook unberechenbar sein. Um das zu vermeiden, verwende Fallback-Designs für komplexe Layouts.
Client-spezifische Überlegungen zur HTML-Darstellung
Hier erfährst du, wie du dein HTML für Gmail, Outlook, Apple Mail und andere gängige E-Mail-Clients anpassen kannst.
Gmail
Insgesamt unterstützt Gmail viele CSS- und HTML-Funktionen, aber der Client hat auch seine Tücken. Hier ist, was du beachten solltest.
- CSS: Gmail unterstützt grundlegendes Inline-CSS und einige Media-Queries. Allerdings werden externe und eingebettete Stile nicht immer zuverlässig dargestellt. Daher ist es am besten, wenn du dich auf Inline-Stile verlässt.
- Bekannte Gmail Rendering-Probleme:
- Bilder blockieren: Häufig werden Bilder in Google Mail standardmäßig blockiert, so dass die Nutzer/innen sie manuell aktivieren müssen. Füge den <img>-Tags einen Alt-Text hinzu, um die Zugänglichkeit von E-Mails zu gewährleisten, wenn die Bilder blockiert sind.
- Medienabfragen: Gmail unterstützt Medienabfragen auf dem Handy, aber nicht in Desktop-Anwendungen. Wende Media-Queries also nur für mobilspezifisches Styling an.
Outlook
Zur Erinnerung: Outlook nutzt die Rendering-Engine von Microsoft Word, was zu unerwarteten Problemen führen kann. Ich habe bereits ein paar Tipps gegeben, wie du diese Probleme lösen kannst, daher ist dieser Abschnitt eine erweiterte Zusammenfassung.
- CSS- und HTML-Einschränkungen: Outlook ignoriert normalerweise CSS-Eigenschaften wie margin, padding und float. Um dies zu umgehen, solltest du dich auf die <table>-Elemente für das Layout und die Attribute cell padding und cell spacing verlassen.
- Bilder: Wenn bei Bildern Breite und Höhe nicht angegeben sind, werden sie von Outlook wahrscheinlich falsch dargestellt. Stelle also sicher, dass du diese Attribute definierst.
Hier ist ein Codebeispiel für ein tabellenbasiertes Layout mit Zellauffüllung und Zellabstand.
<table width=”100%” cellpadding=”10″ cellspacing=”0″ style=”border-collapse: collapse;”> <tr> <td style=”background-color: #f0f0f0;”>Inhaltsbereich 1</td> <td style=”background-color: #cccccc;”>Inhaltsbereich 2</td> </tr> </table> |
Schnelle Tipps:
- Verwende Tabellen für Layouts aufgrund der begrenzten CSS-Unterstützung.
- Vermeide komplexe Layouts mit verschachtelten Tabellen.
- Teste die Entwürfe von E-Mail-Vorlagen mit der Desktop- und der Web-Version von Outlook – sie können unterschiedlich dargestellt werden.
Apple Mail und andere Clients
Apple Mail bietet wohl die beste Unterstützung für HTML und CSS und ist damit einer der zuverlässigsten E-Mail-Clients für fortgeschrittenes E-Mail-Design. Hier biete ich auch einige Tipps und Tricks für Yahoo, AOL und einige andere Clients an.
Apple Mail:
- Unterstützt Inline- und eingebettetes CSS sowie Media-Queries.
- Du kannst robuste HTML5-Elemente rendern und hast Farbverläufe, Animationen und Webfonts.
Wichtiger Hinweis: Auch wenn Apple Mail dies unterstützt, solltest du mit komplexem Styling, Webfonts und vor allem Animationen sparsam umgehen. Die Wahrscheinlichkeit ist groß, dass andere Clients sie nicht unterstützen, und sie können die Zustellrate von E-Mails beeinträchtigen, nicht nur die Barrierefreiheit.
Yahoo Mail:
- Unterstützt Inline-Stile und eingebettetes CSS. Einige erweiterte Eigenschaften wie display: flex werden jedoch möglicherweise nicht richtig dargestellt.
- Yahoo blockiert oder verzögert oft das Laden von Bildern, daher solltest du Alt-Text einfügen.
AOL und Thunderbird:
- Diese Clients bieten eine ähnliche HTML/CSS-Unterstützung wie Yahoo. Thunderbird bietet jedoch eine zuverlässigere Darstellung von eingebetteten und Inline-Styles.
- Generell solltest du fortgeschrittene Inline-Techniken vermeiden. Das Gleiche gilt für erweiterte CSS-Layouts wie Flexbox (gilt für Yahoo, AOL und Thunderbird).
Best Practices für die Verwendung von HTML-Tags in E-Mails
Eigentlich ist dieser ganze Artikel wie eine Liste von Best Practices. Deshalb möchte ich mich hier auf das Testen und das Mailtrap Email Testing Tool konzentrieren. Außerdem gebe ich dir Tipps, wie du mobilfreundliche Designs erstellen kannst.
E-Mail-Tests über verschiedene Clients hinweg
Ich empfehle immer ein Tool, das explizit die Unterstützung verschiedener E-Mail-Clients anzeigt und dir genaue Hinweise darauf gibt, welche Codezeilen problematisch sein könnten.
Mailtrap Email Testing ist ein solches Tool. Es ist Teil der Mailtrap Email Delivery Platform und eine E-Mail-Sandbox zum Prüfen von E-Mails in Staging-, Entwicklungs- und QA-Umgebungen.
Das Wichtigste ist, dass es Folgendes bietet:
- HTML/CSS-Check (mit Unterstützung des Percentile Clients und expliziten Hinweisen auf problematische Codezeilen)
![Html check with a market support score](https://us-wd.gr-cdn.com/blog/sites/5/2024/12/1140/html-check.png)
- Überprüfung des Punktestands von Spam
![Spam analysis for HTML emails](https://us-wd.gr-cdn.com/blog/sites/5/2024/12/1140/spam-score.png)
- E-Mail-Vorschau (Web, Mobile und Desktop)
![responsiveness checker for html emails](https://us-wd.gr-cdn.com/blog/sites/5/2024/12/1140/html-preview.png)
Wenn du viel testen musst oder mehrere Projekte hast, bietet Mailtrap Email Testing auch eine API für die QA Automation, mehrere Testeingänge, Benutzerverwaltung und das Testen von E-Mail-Vorlagen über eine API.
Für Mailtrap Email API/SMTP-Benutzer ermöglicht die API einen einfachen Übergang von Test- zu Produktionsanforderungen. Du kannst ein paar Zeilen Code ändern und deine Vorlagen verschicken, sobald du sicher bist, dass sie für die Empfänger bereit sind.
Mobile Reaktionsfähigkeit
Ich habe bereits einige Tricks für die mobile Reaktionsfähigkeit erwähnt. In diesem Abschnitt kombiniere ich sie und gebe dir einige praktische Tipps.
- Verwende Inline-Styling, um mobilfreundliche Eigenschaften wie Polsterung, Schriftgröße und Zeilenhöhe zu definieren.
- Du kannst Media Queries verwenden, um Layout, Schriftgröße und Bilder für mobile Bildschirme anzupassen. Vergiss aber nicht, dass Outlook diese nicht unterstützt, im Gegensatz zu Gmail und Apple Mail. Hier ist ein kurzes Beispiel.
<style> @media only screen and (max-width: 600px) { .responsive-text { font-size: 14px; padding: 10px; } } </style> <p class=”responsive-text” style=”font-size: 16px; padding: 20px;”>Dieser Absatz ist für Desktop und Mobile gestylt.</p> |
- Ein einspaltiges Layout lässt sich gut über verschiedene Geräte skalieren, deshalb solltest du es für mobile Geräte verwenden.
- Verwende größere Schriftarten und Schaltflächen, um die Zugänglichkeit und Lesbarkeit auf kleineren Bildschirmen zu verbessern. Achte auch auf die CTA-Trefferfläche und ihre Hierarchie; siehe die Richtwerte unten ⬇️
- Gmail: 36 x 48 Pixel
- Apple Mail: 48 x 48 Pixel
- Outlook: 26 x 34 Pixel
Fazit
Jetzt bist du mit allem ausgestattet, was du brauchst, um HTML-Tags in deinen E-Mails effektiv zu nutzen. Und ja, es ist eine sorgfältige Abwägung zwischen den allgemein unterstützten Tags, deinem Design und den Tags, die clevere Umgehungen erfordern.
Aber vergiss nicht, dass deine Arbeit nicht aufhört, wenn du eine gut zugängliche und zustellfähige Vorlage hast. Du musst deinen Ansatz immer wieder testen und verfeinern, denn E-Mail-Clients entwickeln sich ständig weiter.
FAQ: HTML-E-Mail-Tags
1. Was sind HTML-Tags in E-Mails?
- HTML-Tags sind Code-Schnipsel, die verwendet werden, um das Layout und das Design von E-Mails zu gestalten. Sie helfen dabei, Text zu formatieren, Bilder hinzuzufügen, Links einzufügen und das allgemeine Aussehen der E-Mail zu verbessern.
2. Warum sollte ich HTML-Tags in meinen E-Mails verwenden?
- HTML-Tags ermöglichen es dir, ansprechende und gut strukturierte E-Mails zu erstellen. Sie tragen dazu bei, dass deine E-Mails professionell aussehen und deine Nachricht klar und visuell ansprechend vermittelt wird.
3. Welche HTML-Tags sind für E-Mails am wichtigsten?
- Wichtige HTML-Tags für E-Mails sind unter anderem
<a>
für Links,<img>
für Bilder,<h1>
bis<h6>
für Überschriften,<p>
für Absätze, und<table>
für Tabellen. Diese Tags helfen dir, E-Mails effektiv zu strukturieren und zu gestalten.
4. Wie kann ich HTML-Tags in E-Mails richtig verwenden?
- Achte darauf, dass deine HTML-Tags korrekt und sauber geschrieben sind, um Darstellungsprobleme zu vermeiden. Verwende Inline-CSS, um sicherzustellen, dass dein Design auf verschiedenen Geräten und E-Mail-Clients gut aussieht.
5. Kann ich HTML-Tags in GetResponse verwenden?
- Ja, GetResponse bietet dir eine benutzerfreundliche Oberfläche zur Erstellung von E-Mails, in der du HTML-Tags verwenden kannst, um deine E-Mails individuell zu gestalten. Du kannst benutzerdefinierten HTML-Code in den E-Mail-Editor einfügen oder eine der vorgefertigten Vorlagen verwenden.