Was ist eine HTML-E-Mail? Definition, Format und Best Practices

Definition

💡 HTML-E-Mail: E-Mails, die in HyperText Markup Language codiert sind und mit denen Sie Formatierungen, Bilder, Farben und Links hinzufügen können. Im Grunde ist das der Unterschied zwischen einem langweiligen Textdokument und einer tatsächlich gestalteten Nachricht. HTML-E-Mail bietet Formatierungs- und semantische Auszeichnungsmöglichkeiten, die in Klartext nicht verfügbar sind.

Warum HTML-E-Mail wichtig ist

Klartext-E-Mails bestehen nur aus Text. Keine Farben, keine Bilder, nicht einmal Fett- oder Kursivschrift. HTML-E-Mails sind alles andere.

HTML-E-Mails haben Farbe, Stil, Bilder und manchmal Multimedia, ähnlich wie Webseiten, die in den E-Mail-Posteingang von Menschen zugestellt werden. Das bedeutet, dass Sie Ihre Marke widerspiegeln, Ihr Logo verwenden und Schaltflächen hinzufügen können, auf die Menschen tatsächlich klicken können. Sie können die visuellen Elemente gezielt einsetzen, um die Aufmerksamkeit auf die verschiedenen Teile Ihres E-Mail-Inhalts zu lenken, und Elemente nutzen, mit denen Nutzer erwartungsgemäß interagieren, etwa Bilder und Videos.

Die meisten Unternehmen versenden heute HTML-E-Mails. Laut Umfragen von Online-Marketing-Unternehmen ist die Nutzung von HTML-fähigen E-Mail-Clients inzwischen nahezu universell: Weniger als 1 Prozent geben an, nur Text-Clients zu verwenden. Ihre Kunden erwarten gestaltete E-Mails, und Klartext kann unprofessionell oder veraltet wirken. Das signalisiert, dass Sie Ihre Kommunikation nicht ernst nehmen.

Aber HTML ist nicht automatisch besser. Es gibt Kompromisse. HTML-E-Mails sind größer, laden langsamer und können in verschiedenen E-Mail-Clients fehlerhaft dargestellt werden. Außerdem lösen sie Spam-Filter häufiger aus als Klartext.

Wie HTML-E-Mails funktionieren

Wenn Sie eine HTML-E-Mail senden, schicken Sie im Grunde eine Mini-Webseite in den Posteingang einer Person.

Der E-Mail-Designer schreibt HTML-Code, ähnlich wie beim Erstellen einer Webseite, definiert die Struktur mit HTML und gestaltet sie mit CSS. Sie fügen Bilder hinzu, formatieren Text und erstellen Layouts. Wenn der Empfänger die E-Mail dann öffnet, liest sein E-Mail-Client diesen HTML-Code und rendert ihn so, wie ein Browser eine Webseite anzeigen würde.

Hier liegt der Haken: Es gibt Hunderte verschiedener Dienste und Apps, die Menschen zum Lesen ihrer E-Mails verwenden, wie Gmail, Yahoo! und Outlook, und jeder Dienst stellt HTML und CSS etwas anders dar. Was in Gmail perfekt aussieht, kann in Outlook kaputtgehen. Was auf dem Desktop funktioniert, kann auf dem Smartphone versagen.

Deshalb sind viele E-Mail-Server so konfiguriert, dass sie automatisch eine Klartextversion einer Nachricht erzeugen und zusammen mit der HTML-Version versenden, unter Verwendung von Content-Type: multipart/alternative. Wenn das HTML nicht gerendert werden kann, greift der E-Mail-Client auf Klartext zurück. So sind Sie in jedem Fall abgesichert.

HTML vs. Klartext

Sie haben zwei Optionen:

HTML-E-Mails geben Ihnen die volle Kontrolle über das Design. Farben, Schriftarten, Bilder, anklickbare Schaltflächen, Layouts, die zu Ihrer Website passen. HTML ist das beste Format, wenn Sie Nachrichten erstellen möchten, die wie klassische Dokumente aussehen, mit verschiedenen Schriftarten, Farben sowie Aufzählungs- und Nummerierungslisten, und wenn Sie Bilder innerhalb Ihrer Nachricht anzeigen möchten. Perfekt für Newsletter, Marketingkampagnen und markengerechte Kommunikation.

Klartext-E-Mails sind auf das Wesentliche reduziert. Nur Text, kein Styling, keine eingebetteten Links. Das Klartextformat unterstützt weder fett oder kursiv formatierten Text noch farbige Schriftarten oder andere Textformatierungen und auch keine Anzeige von Bildern innerhalb der Nachricht. Weniger aufregend, klar, aber sie funktionieren überall. Sie wirken außerdem persönlicher und weniger werblich, weshalb manche Menschen sie für den direkten Eins-zu-eins-Austausch bevorzugen.

Bei Microsoft-Konten können Sie auswählen, wie Sie Ihre E-Mails erhalten in Ihrem Posteingang.

Eignet sich hervorragend für Verkaufsschreiben und Updates, und wenn Sie als Vertriebsmitarbeiter Eins-zu-eins-E-Mail-Korrespondenz führen, sind Klartext-E-Mails wahrscheinlich besser. Aber für das meiste Marketing? HTML gewinnt.

HTML-E-Mails erstellen

Je nachdem, wie sicher Sie im Technischen sind, haben Sie verschiedene Möglichkeiten.

Selbst programmieren. Wenn Sie HTML und CSS beherrschen, können Sie den Code von Grund auf selbst schreiben. Denken Sie nur daran, dass das Erstellen einer E-Mail in HTML spezialisiert ist und nicht genau dem Erstellen einer Webseite entspricht. E-Mail-Clients sind deutlich weniger nachsichtig als Browser. Sie müssen Tabellen für das Layout verwenden (ja, wirklich), Inline-CSS statt externer Stylesheets einsetzen und in mehreren Clients testen.

Verwenden Sie einen Drag-and-Drop-Builder. Die meisten E-Mail-Service-Provider wie Mailchimp, Constant Contact oder Campaign Monitor bieten visuelle Editoren an. Sie ziehen Textblöcke, Bilder und Schaltflächen hinein, und das Tool erzeugt das HTML für Sie. Keine Programmierung erforderlich.

Beginnen Sie mit einer Vorlage. Nehmen Sie eine vorgefertigte HTML-E-Mail-Vorlage von einem Dienst wie Litmus oder Email on Acid und passen Sie sie dann mit Ihren eigenen Inhalten und Ihrem Branding an. Schneller als alles von Grund auf zu erstellen, mit mehr Kontrolle als ein Drag-and-Drop-Editor.

Ganz gleich, welchen Ansatz Sie verwenden, Sie müssen trotzdem sicherstellen, dass Ihre E-Mails auf unterschiedliche Auflösungen reagieren und mit verschiedenen E-Mail-Clients funktionieren. Testen Sie alles, bevor Sie an Ihre gesamte Liste senden.

Best Practices für HTML-E-Mails

Entwerfen Sie zuerst für Mobilgeräte. Mehr als die Hälfte aller E-Mails wird auf Smartphones geöffnet. Da die mobile Nutzung inzwischen die Nutzung auf Desktop-PCs und Laptops überholt hat, ist es wichtiger denn je, Ihre E-Mails für Mobilgeräte zu gestalten. Verwenden Sie einspaltige Layouts, große Tippflächen für Schaltflächen und gut lesbare Schriftgrößen ohne Zoomen.

Halten Sie es einfach. Übertreiben Sie es nicht mit dem Design. Vergessen Sie bei der Entwicklung einer HTML-E-Mail nicht die Einfachheit, machen Sie Ihre Arbeit nicht unnötig kompliziert, und bleiben Sie besser bei einer zweispaltigen Variante. Weniger Elemente bedeuten schnellere Ladezeiten und weniger Dinge, die kaputtgehen können.

Verwenden Sie Inline-CSS. Das head-Tag, das zur Aufnahme von CSS-Stilregeln für ein gesamtes HTML-Dokument verwendet wird, wird nicht gut unterstützt und manchmal vollständig entfernt, weshalb Inline-Style-Deklarationen de facto zum Standard geworden sind.

Testen Sie in verschiedenen Clients. Gmail, Outlook, Apple Mail, Yahoo und mobile Clients stellen alles unterschiedlich dar. Sie können versuchen, Ihre E-Mails an verschiedene Konten zu senden, die mit unterschiedlichen E-Mail-Clients verbunden sind, oder E-Mail-Testtools verwenden, um den Prozess zu vereinfachen. Dienste wie Litmus und Email on Acid sind darauf spezialisiert.

Fügen Sie eine Klartext-Ausweichversion hinzu. Senden Sie immer sowohl HTML- als auch Klartext-Versionen in derselben E-Mail. Wenn HTML fehlschlägt, erhalten Empfänger Ihre Nachricht trotzdem.

Achten Sie auf Ihre Dateigröße. HTML-E-Mail ist größer als Klartext. Schwere Bilder und aufgeblähter Code verlangsamen das Laden und können Spam-Filter auslösen. Halten Sie die gesamte E-Mail-Größe nach Möglichkeit unter 100 KB.

Verlassen Sie sich nicht nur auf Bilder. Einige E-Mail-Clients blockieren Bilder standardmäßig. Ihre Nachricht sollte auch ohne sie noch verständlich sein. Verwenden Sie Alt-Text für alle Bilder.

HTML-E-Mail

Inhaltsverzeichnis