Eine Anleitung für Anfänger zum Erstellen und Versenden von HTML-E-Mails

Schnelles Quiz: Wie heißt die Sprache, die Webentwickler verwenden, um die Strukturen der Webseiten zu erstellen, die du täglich besuchst? Abgesehen von cleveren Antworten ist die Hypertext Markup Language (HTML) ein immerwährender Standard, der schon bei den Anfängen des Internets dabei war. Das gilt aber nicht nur für Webseiten. Dein Posteingang ist ein fruchtbarer Boden für die Gestaltung von HTML-E-Mails.

Das macht Sinn, wenn du bedenkst, wie viele Bilder, GIFs, Videos und Markeninhalte du fast jede Stunde in deinen E-Mails siehst. Du könntest zwar eine reine Text-E-Mail anbieten, aber eine HTML-Version bietet mehr Vorteile und gibt dir mehr Möglichkeiten, dich und dein Unternehmen zu vermarkten.

In diesem Beitrag werden wir besprechen, wie du HTML-E-Mails erstellst und versendest und warum du das tun solltest. An einigen Stellen gehen wir darauf ein, wie du eine E-Mail programmierst, aber du brauchst dieses Wissen nicht, um deine eigene E-Mail zu erstellen.

Was ist eine HTML-E-Mail?

E-Mails, die in deinem Posteingang landen, gibt es in zwei Varianten:

• Klartext: Das ist fast ein Telegramm für das moderne Zeitalter. Es gibt kein Styling oder eine minimale Formatierung, und der Empfänger sieht nur die Wörter, nicht alles andere.
• HTML: Im Vergleich zu reinem Text ist das ein echter Knaller und sehr designlastig. Es verwendet HTML-Code, um eine E-Mail darzustellen, auch wenn er, wie wir noch sehen werden, nicht immer den modernen Webstandards entspricht.

Eine reine Text-E-Mail erkennst du zum Beispiel daran, dass sie genauso aussieht wie ein normales Textdokument. Im Gegensatz dazu sieht eine HTML-E-Mail fast genauso aus wie eine moderne Webseite (abgesehen von ein paar Styling- und Formatierungsproblemen):

In den meisten Fällen hat eine HTML-E-Mail nicht den Anspruch, das Nonplusultra an Interaktivität oder dynamischem Engagement zu bieten. Auch darauf werden wir später noch eingehen, aber HTML-E-Mails hinken dem Web in Bezug auf die Standards hinterher. HTML ist also eher ein designorientiertes Werkzeug als ein Hilfsmittel, um ein Erlebnis zu bieten. Das wirft allerdings eine Frage auf: Warum solltest du HTML-E-Mails verwenden, wenn der einzige Grund die Optik ist? Dieser Frage gehen wir als Nächstes nach.

Warum du HTML-E-Mails der reinen Textformatierung vorziehen solltest

Es kommt selten vor, dass du eine reine Text-E-Mail von einem Unternehmen erhältst, und zwar aus mehreren Gründen. Allerdings ist reiner Text nicht per se falsch, sondern bietet keine der Vorteile der HTML-E-Mail-Formatierung. Ein Beispiel:

• Du kannst die inhärenten visuellen Elemente nutzen, um die Aufmerksamkeit auf die verschiedenen Teile deines E-Mail-Inhalts zu lenken.
• Außerdem ist eine HTML-E-Mail ein umfangreiches Format für die Präsentation deiner Inhalte. Das bedeutet, dass du die Elemente nutzen kannst, die die Nutzerinnen und Nutzer erwarten, um sich mit ihnen zu beschäftigen, z. B. Bilder, Videos und mehr.
• Beides zusammen bietet dir eine hervorragende Möglichkeit, deine Inhalte zu vermarkten, genauso wie du es mit deiner Hauptwebseite tun würdest.

Die Entscheidung für eine HTML-E-Mail ist jedoch nicht so einfach, wie du denkst. Es gibt auch ein paar Nachteile zu beachten. Erstens musst du, genau wie bei der Gestaltung einer Webseite, die Erfahrungen der Nutzer/innen berücksichtigen. Dazu gehört nicht nur der Browser – viele Nutzer/innen ziehen es vor, E-Mails in einem speziellen Client zu lesen.

Außerdem musst du auch einige der Datenschutz- und Sicherheitsfragen berücksichtigen, die bei der Webentwicklung eine Rolle spielen. Das gilt vor allem, wenn du JavaScript einbinden willst, Schriftarten von Drittanbietern verwendest und andere Aspekte.

Aus diesem Grund musst du an fast noch mehr Fronten als im Web gegen Zugänglichkeit und Standards ankämpfen. Es ist schwierig, eine HTML-E-Mail zu erstellen, die browser- und clientübergreifend funktioniert. Natürlich ist es möglich, das zu tun, und wir werden den technischen Aspekt in einem späteren Abschnitt behandeln. Jetzt solltest du erst einmal die verschiedenen Elemente deiner E-Mail festlegen und dann versuchen, sie umzusetzen.

Die wesentlichen Elemente (und typischen Praktiken) einer HTML-E-Mail

In diesem Artikel wird an einigen Stellen auf das Webdesign Bezug genommen, da es hier viele Ähnlichkeiten gibt. Ein Aspekt, der einen ähnlichen Arbeitsablauf bietet, ist die Entscheidung über die Facetten und Abschnitte deiner HTML-E-Mail.

Ähnlich wie im Web gibt es einige Elemente, die für deine E-Mails praktisch nicht verhandelbar sind. Natürlich brauchst du Inhalte. Hier gibt es ein paar typische Elemente, die du beachten solltest:

• Deine Kopfzeile ist wichtig, denn sie ist der erste Eindruck, den deine E-Mail bei den Lesern hinterlässt.
• Genau wie beim Webdesign ist es auch hier von Vorteil, wenn du dir überlegst, welche Elemente oberhalb des Headers angezeigt werden.
• Der Hauptteil ist wichtig, denn schließlich ist er der Grund, warum die Leser/innen deine E-Mails abonnieren werden.
• Die Fußzeile deiner HTML-E-Mail bietet dir und deinen Abonnenten ebenfalls einen großen Nutzen und kann ein unterschätztes Element deiner E-Mails sein.

Es gibt ein paar Punkte, auf die wir näher eingehen können. Erstens, bedenke, wie sehr Emojis unsere tägliche Webnutzung durchdringen. Sie sind zwar kein strenges HTML-Element, aber der geschmackvolle Einsatz von Emojis kann Wunder für deinen Inhalt bewirken, vor allem für deine Überschrift:

Die Fußzeile ist auch der beste Platz für einige wichtige rechtliche Informationen. Zwei der größten Probleme im Zusammenhang mit E-Mails sind Spam und die Frage, ob eine E-Mail die richtigen Posteingänge erreicht (wenn überhaupt). Darauf werden wir in einem späteren Abschnitt eingehen, denn es ist ein wichtiger Bestandteil beim Erstellen und Versenden von HTML-E-Mails.

Überlege dir einige typische Praktiken für deine HTML-E-Mails

Es gibt viele Überschneidungen mit dem E-Mail-Marketing, wenn es um die optimale Gestaltung und das Layout deiner E-Mails geht. Es gibt eine, die du unbedingt einbauen solltest: Ein Double-Opt-In.

Einer der größten E-Mail-Marketing-Hacks ist, dass du deine E-Mails zum Leser bringen willst. Mit anderen Worten: Biete ein Opt-in-Formular auf einer Webseite an, denn das hat eine hohe Konversionsrate. Das sollte aber nicht das einzige Mal sein, dass du um eine Bestätigung bittest. Es ist eine gute Praxis, auch ein zweites Opt-in in Form einer E-Mail zu versenden:

Hierfür gibt es einige Gründe:

• Erstens schafft er Vertrauen bei deinen Lesern, weil du die ausdrückliche Erlaubnis bekommst, ihnen E-Mails zu schicken.
• Darüber hinaus hast du auch eine ausdrückliche Zustimmung im Falle einer Spam-Empfehlung (mehr dazu später).
• Du trägst dazu bei, E-Mail- und Spam-Missbrauch für andere zu verhindern, weil sie sich ausdrücklich für ein Abonnement deiner E-Mails entscheiden müssen.

Weil du bei einem Double Opt-in eine E-Mail an die betreffende Adresse schickst, ist dies die beste Methode, um die E-Mail-Adresse zu bestätigen.

Es gibt noch ein paar andere gute Praktiken, die du beachten solltest. Die folgenden sind jedoch eher optional, denn du wirst fantastische Ergebnisse erzielen, aber es wird Zeiten geben, in denen du diese Richtlinien nicht befolgen willst:

• Deine Betreffzeile sollte perfekt sein, und der Inhalt deiner E-Mail sollte auf den Punkt kommen. Angesichts des Aufkommens und der Dominanz des mobilen Surfens ist dies besonders wichtig.
• Apropos, du solltest darauf achten, dass deine HTML-E-Mails auch auf kleineren Bildschirmen problemlos gelesen werden können – das bedeutet, dass du keine übergroßen Banner oder Logos einbindest.
• Wenn du in jeder E-Mail eine aussagekräftige Handlungsaufforderung (Call to Action, CTA) einbaust, hast du gute Chancen auf eine bessere Beteiligung der Nutzer/innen.
• Tracking ist ein umstrittenes Thema, aber es hilft dir zu ergründen, was deine Nutzer/innen tun, wenn du ihnen eine E-Mail schickst. Bei einigen Anbietern gehören solide Analysefunktionen zum Standard.

Genauso wichtig wie die Art und Weise, wie du deine E-Mail präsentierst und einrichtest, ist das Design und Layout. In den nächsten Abschnitten gehen wir darauf ein, wie du eine HTML-E-Mail erstellst, und geben dir abschließend einige Tipps zum Versenden von E-Mails.

Die technische Herangehensweise an die Erstellung einer HTML-E-Mail

Wenn du etwas Erfahrung in der Webentwicklung hast, wirst du zweifellos HTML5 als Auszeichnungssprache verwenden. Diese Sprache unterscheidet sich deutlich von den früheren HTML- und XHTML-Versionen und trennt stärker zwischen Styling (von dem es praktisch keine gültigen Elemente gibt) und Struktur.

Ein Beispiel für Letzteres: HTML5 bietet eine Reihe verschiedener Tags, mit denen du die Inhaltsbereiche deiner Webseite definieren kannst.

E-Mail-HTML ist jedoch etwas anderes, denn es ist nicht mehr zeitgemäß. Deshalb musst du alle alten HTML4-Tabellen und Inline-Styling verwenden, um dein Layout zu erstellen. Warum das so ist, musst du mit den Entwicklern der E-Mail-Clients besprechen, denn sie verändern die HTML-E-Mail oft, wenn sie in deinem Posteingang ankommt. Eine der häufigsten Maßnahmen ist das Entfernen von CSS und JavaScript aus den E-Mails, unter anderem aus Sicherheitsgründen.

Das bedeutet, dass du einen anderen Weg finden musst, um deine HTML-E-Mails zu gestalten – aus Kompatibilitätsgründen ist Inline die einzige Option. Apropos Kompatibilität: Das ist ein wichtiger Punkt. Du musst ein einzigartiges Styling mit den Möglichkeiten des E-Mail-Clients des Endnutzers in Einklang bringen. Daher gibt es noch ein paar andere technische Überlegungen, die du beachten solltest:

• Die Verwendung von Systemschriftarten anstelle von Drittanbieter-Schriftarten erspart dir eine HTTP-Anfrage, lädt die E-Mail für den Nutzer schnell und sieht zudem einheitlich aus.
• Du kannst sogar noch weiter gehen und eine reine Textversion deiner E-Mail für diejenigen bereitstellen, die HTML-E-Mails in ihrem Client nicht anzeigen können. Viele Webseiten bieten eine HTML-Version an, auf die du online zugreifen kannst, sowohl aus diesem Grund als auch als Backup.
• Alt-Text ist für HTML-E-Mails genauso wichtig wie für das Internet. Verwende daher überall dort, wo du ein Bild in deinen Inhalt einfügst, einen Alt-Text, um die Zugänglichkeit zu gewährleisten.

Es gibt einen technischen Aspekt einer HTML-E-Mail, über den du dir mehr Gedanken machen solltest, da er sich im Spannungsfeld zwischen Inline-Styling, CSS und anderen Faktoren bewegen kann. Lass uns kurz über die „Conditionals“ sprechen.

Verwendung von Conditionals

Ein Überbleibsel von HTML-E-Mails, das früher zum Werkzeugkasten älterer HTML-Webentwickler/innen gehörte, sind die Conditionals. Damit legst du fest, welcher Browser einen bestimmten Codeschnipsel verwenden soll.

Um ehrlich zu sein, ist dies fast immer ein Problem von Microsoft. Für Webentwickler war der Internet Explorer (IE) die dämonische Browserausgeburt. Für HTML-E-Mails hingegen ist es Outlook. Zwischen den verschiedenen Versionen kann es vorkommen, dass dein Styling auf eine Weise dargestellt wird, die du nicht erwartet hast.

Deshalb kannst du Bedingungsblöcke in deinen Code einfügen und diese Elemente definieren. So kannst du zum Beispiel sowohl die Word- als auch die IE-basierte Version von Outlook ansprechen.

Erstens: Word:

<!--[if mso]>

Dies ist für Word-basierte Versionen von Outlook:

<![endif]-->

Für den Internet Explorer verwendest du ein anderes Tag:

<!--[if (IE)]>

Dies ist für IE-basierte Versionen von Outlook:

<![endif]-->

Wenn der Browser, auf den du abzielst, WebKit-basiert ist (z. B. Apple Safari, der PlayStation-Browser, Amazons Kindle usw.), kannst du eine Medienabfrage verwenden, um ein bestimmtes Styling zu erreichen:

.html-email-webkit {
  display: none;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  ..html-email-webkit {
    display: block !important;
  }
}

So kannst du deine HTML-E-Mail etwas besser an die Anzeige des Endnutzers anpassen. Im Großen und Ganzen ist das HTML-Styling für E-Mails nicht perfekt, aber jeder E-Mail-Client bietet genug Möglichkeiten, um beeindruckende Layouts zu erstellen.

Deine Optionen für die Erstellung von HTML-E-Mails

Wie bereits erwähnt, hast du eine Reihe flexibler Möglichkeiten, um HTML-E-Mails zu erstellen. Du kannst zum Beispiel mit einem schönen Texteditor und HTML von Grund auf neu erstellen.

Es gibt aber auch noch andere Optionen, die wir in Betracht ziehen können:

• Du könntest einen speziellen Dienst, wie z. B. eine E-Mail-Marketing-App, zur Erstellung deiner E-Mails nutzen. Viele Apps bieten einen visuellen Builder, geben dir aber auch die Möglichkeit, deinen eigenen Code zu schreiben und deine eigene Vorlage zu erstellen.
• Apropos, du könntest eine Vorlage für deine HTML-E-Mails herunterladen. Das ist ähnlich wie ein WordPress-Theme, da es eine Basis für den Rest deines Designs bietet. Von dort aus kannst du sie nach deinen Wünschen anpassen. Es ist ein guter Mittelweg zwischen den Codierungs- und den Bauoptionen.

Später werden wir unsere E-Mail mit HTML erstellen. Zuvor wollen wir uns aber noch einige E-Mail-Anbieter ansehen, die du unabhängig von der gewählten Methode zur Erstellung deiner E-Mails in Betracht ziehen solltest.

3 E-Mail-Dienstleister, die sich perfekt für die Erstellung von HTML-E-Mails eignen

Da wir uns in diesem Beitrag auf die Erstellung von HTML-E-Mails konzentrieren, müssen wir nicht allzu sehr ins Detail gehen, wenn es um E-Mail-Dienstleister geht. Trotzdem gibt es ein paar, die du wahrscheinlich in Betracht ziehen wirst.

Wir können nicht alle aufzählen, also werden wir drei der beliebtesten Anbieter erwähnen. Wir fassen sie zusammen.

1. Mailchimp

Dieser E-Mail-Dienstleister ist eine Standardlösung – für viele ist es fast eine spontane Entscheidung. Mailchimp ist in den Augen vieler der Goldstandard unter den E-Mail-Marketing-Apps, und dafür gibt es eine Menge guter Gründe:

• Es enthält viele typische Funktionen, die du in vielen anderen ähnlichen Apps findest.
• Es gibt jede Menge Unterstützung, wenn es darum geht, ein Unternehmen zu vermarkten, z. B. Marketing-Automatisierung, Tools zur Verwaltung der Zielgruppe und mehr.
• Du hast eine erstklassige Suite von Kreativwerkzeugen, die dir bei der Erstellung von HTML-E-Mails helfen.

Natürlich wollen wir uns hier mit letzterem befassen. Mit dem Kreativassistenten lernt Mailchimp deine Marke kennen und hilft dir bei der Erstellung und Personalisierung deiner E-Mails. Du kannst auch Apps von Drittanbietern wie Adobe Photoshop einbinden, um dir bei der Erstellung der perfekten E-Mail zu helfen.

Es ist auch ganz einfach, mit vorhandenem HTML zu arbeiten, besonders wenn du den Classic Builder von Mailchimp verwendest. Trotzdem hast du die Möglichkeit, HTML-Vorlagen zu importieren, wenn du sie brauchst.

Mailchimp verwendet eine komplizierte Mischung aus monatlichen Abo-Stufen und der Anzahl der Kontakte, um einen Endpreis zu ermitteln. Wir gehen davon aus, dass kleine Unternehmen einen Tarif von etwa 35 US-Dollar pro Monat für bis zu 2.500 Kontakte benötigen. Du musst jedoch den besten Tarif für dich herausfinden, der auf den von dir benötigten Funktionen und der Anzahl der Kontakte basiert, die du voraussichtlich an Bord bringen wirst.

2. AWeber

Für manche ist AWeber die Krönung des E-Mail-Marketings. Es ist eine fantastische und leistungsstarke Plattform, die wohl einen größeren Funktionsumfang als Mailchimp bietet.

AWeber enthält eine Reihe von wichtigen Funktionen, die du zum Versenden von E-Mails brauchst:

• Die Möglichkeit, Nachrichten, Kampagnen und mehr zu automatisieren und zu planen.
• Du hast großartige Organisationstools, wie z. B. die Möglichkeit, Abonnenten zu markieren und zu segmentieren.
• Mit AWeber kannst du auch die Inhalte automatisieren, die du für deine E-Mails erstellst. So kannst du zum Beispiel Blogbeiträge mit minimalem Aufwand in Mailings verwandeln.

Wenn es um die Erstellung deiner E-Mails geht, hat AWeber ein paar Tricks in petto. Es verwendet einen visuellen Drag-and-Drop-Builder und enthält eine Bibliothek mit benutzerdefinierten Vorlagen für den Anfang. Außerdem kannst du AWeber mit deinem Canva-Konto verbinden und dieses für die Gestaltung deiner E-Mails nutzen.

Außerdem gibt es einen eigenen HTML-Editor, was bei Mailchimp nicht der Fall ist. Diesen bekommst du sogar in der kostenlosen Version von AWeber. Apropos, die Preisgestaltung ist hier unkomplizierter. Du zahlst etwa 25 US-Dollar pro Monat für bis zu 2.500 Kontakte.

3. Constant Contact

Constant Contact ist ein Ausreißer unter den E-Mail-Anbietern, aber es ist eher eine Geheimwaffe. Er bietet eine fantastische Bandbreite an Funktionen und Funktionalitäten und lässt dich auch mit HTML arbeiten, wenn du es brauchst.

Ähnlich wie AWeber konzentriert sich Constant Contact auf E-Mail-Marketing und nicht auf andere geschäftsorientierte Bereiche. Als solches hat es einen Funktionsumfang, der dir gefallen wird:

• Du hast Tools zur Verwaltung von Kundenlisten und Funktionen zur Marketingautomatisierung.
• Es gibt umfangreiche Berichtsoptionen.
• Du kannst Werbeprogramme von Facebook, Instagram und Google integrieren.
• Es gibt viele Möglichkeiten, neue Abonnenten für deine Listen zu gewinnen.

Auch die Designfunktionen von Constant Contact sind gut. Du kannst eine Vorlage auswählen und mit einem visuellen Editor das gesamte Design erstellen. Du kannst aber auch mit HTML arbeiten – manchmal sogar auf fortgeschrittene Weise im Vergleich zu anderen Tools.

Auch die Preise sind angemessen. Du zahlst etwa 35 US-Dollar pro Monat für den Core-Plan und 2.500 Kontakte oder 70 US-Dollar für den Plus-Plan.

Was du für die Erstellung einer HTML-E-Mail brauchst

Bevor du mit der Erstellung deiner HTML-E-Mails beginnst, brauchst du ein paar Werkzeuge und Kenntnisse. Hier ist, was du besorgen solltest, bevor du dich auf die Socken machst:

• Du solltest einen Code-Editor verwenden, mit dem du dich wohl fühlst, denn er muss dich während des Prozesses unterstützen. Wenn du nicht weißt, welchen du wählen sollst, entscheiden sich viele Nutzer für Visual Studio Code, obwohl Brackets für diese Aufgabe ideal wäre. Wir werden Onivim2 verwenden, einen Editor im Stil von Vim, der auf der Infrastruktur von VS Code basiert.
• Du brauchst zwar HTML-Kenntnisse, aber nicht das gleiche Wissen wie ein moderner Webentwickler (obwohl das nicht schaden kann).
• Du brauchst eine Möglichkeit, um deine E-Mails zu testen – MailHog ist eine Lösung, die wir an anderer Stelle im Kinsta-Blog vorstellen.
• Wir werden zwar keine vorgefertigte Vorlage verwenden, aber vielleicht willst du ja in Zukunft eine davon nutzen.
• Außerdem brauchst du einen E-Mail-Anbieter, denn du musst deine fertige HTML-E-Mail irgendwie verschicken können.

Wenn du das alles beisammen hast, kannst du einen Texteditor öffnen und loslegen. Als Nächstes gehen wir den Prozess durch, um eine einfache HTML-E-Mail zu erstellen.

Wie man eine HTML-E-Mail von Grund auf erstellt

Bevor wir beginnen, solltest du wissen, dass wir keinen speziellen Dienst wie Mailchimp oder AWeber nutzen werden. Stattdessen werden wir eine einfache Vorlage von Grund auf erstellen, die du überallhin importieren kannst.

Wir werden den Prozess in mehrere Abschnitte unterteilen, denn obwohl eine HTML-E-Mail einfach mit einer Webseite zu vergleichen ist, gibt es dennoch eine Menge zu beachten.

1. Erstelle die Grundlage für deine HTML-E-Mail

Es ist eine gute Idee, mit dem Grundgerüst deiner E-Mail-Vorlage zu beginnen. Dabei werden einige typische Vorgehensweisen für HTML im Allgemeinen befolgt:

<!DOCTYPE PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
  </head>
  <body>
  </body>
</html>

Hier gibt es ein paar Dinge, die wir erwähnen sollten. Zunächst geben wir einen „Doctype“ für Transitional XHTML 1.0 an, was unter E-Mail-Entwicklern üblich ist. Danach geben wir einen XML-Namensraum an, der später wichtig sein wird.

Außerdem gibt es einige Meta-Tags, die den Zeichensatz festlegen und bestimmen, wie der Browser das folgende HTML in seinem Fenster darstellen soll.

Der Rest des Skeletts ist einfach: Es gibt die title- und body-Tags, die wir als Nächstes verwenden werden.

2. Füge die Struktur für deine E-Mail-Vorlage hinzu

Wenn du dich an unsere Diskussion über die zu verwendenden HTML-Tags erinnerst, wirst du dich daran erinnern, dass wir kein <div> oder andere typische Strukturelemente verwenden wollen. Stattdessen wollen wir Tabellen verwenden, da diese in E-Mail-Clients und -Diensten gut dargestellt werden.

Alles beginnt mit einer einfachen Reihe von <table>-Tags innerhalb des Textkörpers:

<body>
  <table role="presentation">
    <tr>
      <td>
      </td>
    </tr>
  </table>
</body>

Das Attribut, das wir im <table>-Tag setzen, hilft Screenreadern, den Text zu analysieren, und ist daher gut für die Barrierefreiheit.

Von hier aus musst du neue Zeilen und Spalten zu deiner Tabelle hinzufügen, um die HTML-E-Mail-Vorlage zu erstellen. Wie du das machst, ist dir überlassen, aber es ist gut, wenn du mit einer Basis aus Kopf-, Fuß- und Textabschnitten beginnst. Der Kürze halber wiederholen wir sie hier nicht, aber wir werden sie im weiteren Verlauf erwähnen.

Die gute Nachricht ist, dass du weiterhin neue Zeilen zu deiner Tabelle hinzufügen kannst, wenn du weitere Abschnitte brauchst. Ab hier solltest du jedoch anfangen, Styling und andere Elemente einzuführen.

3. Füge Styling für deine Elemente ein

Das Schöne an HTML ist, dass es fast unabhängig von der Gestaltung ist. Das Markup ist einfach, aber die Stile, die du anwendest, sind es vielleicht nicht. Hier wirst du sehen, wie deine HTML-E-Mail zum Leben erwacht.

Als Anhaltspunkt für die Gestaltung fügen wir einen <style>-Tag in den <head> ein, um einen allgemeinen Rahmen anzuzeigen:

<style>
  table, td {border:2px solid #000000 !important;}
</style>

Zunächst stellen wir sicher, dass im Textkörper oder in der Haupttabelle (die hier als Textkörper fungiert, da einige E-Mail-Clients diesen Tag entfernen) kein unerwarteter Leerraum vorhanden ist:

<body style="margin:0;padding:0;">
  <table role="presentation" style="width:100%;border-collapse:collapse;border:0;border-spacing:0;background:#ffffff;">
</body>

Außerdem fügen wir eine Zentrierung hinzu und entfernen alle zusätzlichen Füllungen aus den Zellen der einzelnen Abschnitte:

<tr>
  <td align="center" style="padding:0;">Header
  </td>
</tr>

Wenn du dir das in deinem Browser ansiehst, sieht es nicht nach viel aus:

Von hier aus kannst du deine E-Mail-Vorlage mit Hilfe von Tabellen und Styling-Tags weiter ausbauen. Wir haben zum Beispiel einen Heldenabschnitt für unsere Kopfzeile erstellt und die Fußzeile und den Textkörper erweitert:

Du wirst wahrscheinlich eine bessere und passendere Vorlage für deine Bedürfnisse erstellen, aber mit verschachtelten Tabellen und einigen grundlegenden HTML-Kenntnissen kannst du eine ansprechende und individuelle HTML-E-Mail-Vorlage erstellen, die ins Schwarze trifft.

4. Teste deine E-Mail

Bevor du fertig bist, solltest du deine E-Mail testen, um sicherzustellen, dass sie auf verschiedenen Geräten gut dargestellt wird. Es gibt verschiedene Dienste, die dir dabei helfen können.

Email on Acid zum Beispiel enthält eine umfassende Checkliste, mit der du sicherstellen kannst, dass deine Vorlage keine Probleme verursacht:

Litmus-Benutzer/innen werden PutsMail kennen, aber es ist für alle zugänglich:

Um den Dienst nutzen zu können, musst du dich für ein Konto anmelden, aber es ist ganz einfach zu bedienen. Du kannst die Funktion nutzen, um E-Mails in verschiedenen Browsern und auf verschiedenen Geräten zu überprüfen.

Mailgun bietet außerdem einen fantastischen Service, der mit seinem Hauptangebot zusammenhängt. Über die Schnittstelle kannst du E-Mail-Clients, Browser und vieles mehr testen. Außerdem kannst du Elemente wie Betreffzeilen testen, um sicherzustellen, dass deine Öffnungsraten hoch sind.

Sobald du deine E-Mail getestet hast, musst du sicherstellen, dass sie auch im Posteingang des Empfängers ankommt. Im letzten Abschnitt gehen wir näher darauf ein.

Versenden einer HTML-E-Mail: Was du wissen musst

Ein Vorteil eines E-Mail-Marketingdienstes, den wir noch nicht erwähnt haben, ist, wie er den rechtlichen Aspekt des E-Mail-Versands handhabt. Das ist wichtig, denn wenn du hier etwas falsch machst, erreichst du nicht nur keinen Empfänger, sondern bringst dich auch in Schwierigkeiten.

Ein E-Mail-Marketingdienst hat bereits gute Beziehungen zu den Organisationen, die sich mit Spam und anderen Aspekten des E-Mail-Versands befassen. Daher ist es oft eine gute Idee, sich für einen dieser Dienste zu entscheiden, wenn du dir keine Sorgen um den Versand von Spam machen willst.

Es gibt jedoch ein paar Tipps, die unabhängig von der Plattform, die du nutzt, wichtig sind:

• Achte darauf, dass du alle Richtlinien des CAN-SPAM-Gesetzes befolgst, vor allem, wenn sich dein Hauptzielpublikum in den USA befindet. Natürlich haben andere Länder ihre eigenen gesetzlichen Richtlinien.
• Füge ein Double-Opt-In für deine Abonnenten ein. Das bedeutet, dass du sie bittest, ein Abonnement zu bestätigen, aber auch eine zweite Bestätigung sendest. Das schützt dich und den Abonnenten, wenn es später eine Spam-Anfrage oder eine Anfrage zum Datenschutz gibt.

Die Zustellbarkeit ist ein Schlüsselelement deiner E-Mails, das wir in einem anderen Artikel ausführlich behandeln. Dieses Konzept setzt sich jedoch aus mehreren Aspekten zusammen, wie z. B. der Verwendung von gutem Code, dem Einholen der richtigen Genehmigungen und vielem mehr.

Das hängt mit einem weiteren Aspekt zusammen – deinem Sende-Score. Dieser ist vergleichbar mit einem Kreditscore und misst letztlich deinen Ruf. Hier gibt es verschiedene Komponenten, die das Ganze ausmachen:

• Die Absprungrate deiner Website.
• Die Anzahl der Beschwerden, die deine Website im Zusammenhang mit den von dir verschickten E-Mails erhält.
• Der Ruf deiner IP-Adresse.
• Die Signatur deines Domainnamens.

Letzteres bezieht sich auf deine DomainKeys Identified Mail (DKIM) und Sender Policy Framework (SPF). Darüber hinaus kannst du die Reputation deiner IP über Dienste wie SenderScore oder IPQualityScore überprüfen.

Wenn du von Anfang an den richtigen SMTP-Anbieter (Simple Mail Transport Protocol) wählst, kannst du einige dieser Punkte auf einen Schlag abhaken. Ähnlich wie bei der Wahl deiner E-Mail-Marketinglösung wird dieser Dienst wissen, was du brauchst, um deine Zustellbarkeit hoch zu halten und auf der richtigen Seite der Mächtigen zu stehen.

Mailgun ist eine Lösung, die wir bereits erwähnt haben, und sie könnte ideal sein. Es gibt aber auch andere Anbieter wie Mailjet, Sendinblue und sogar den eigenen Dienst von Gmail.

Zusammenfassung

Die E-Mail ist noch lange nicht am Ende. Deshalb ist die Nutzung von E-Mails für deine eigenen Bedürfnisse – wie Werbung und Marketing – eine fantastische und kostengünstige Möglichkeit, potenzielle Abonnenten, Nutzer und Kunden zu erreichen.

Du kannst zwar eine spezielle HTML-Vorlage kaufen, aber es ist gar nicht so schwer, deine eigenen HTML-E-Mails zu erstellen. Das könnte der Weg zum Erfolg sein, wenn du eine bestimmte Vision im Kopf hast. Allerdings musst du dafür deine alten HTML-Tricks anwenden, wie z. B. Konditionierungen und verschachtelte Tabellen. Das HTML-E-Mail-Design ist noch nicht auf dem Niveau des modernen Webdesigns, aber du kannst mit wenig viel erreichen.

Musst du auch HTML-E-Mails erstellen, und wenn ja, welche Fragen hast du? Lass es uns im Kommentarbereich unten wissen!