Ein Leitfaden für Anfänger zum Erstellen und Senden einer HTML-E-Mail

Schnelles Pop-Quiz: Wie heißt die Sprache, die Webentwickler verwenden, um die Strukturen der Websites zu erstellen, die Sie täglich besuchen? Abgesehen von intelligenten und überklugen Antworten ist die Hypertext Markup Language (HTML) ein immergrüner Standard, der bei der Geburt des Internets vorhanden war. Dies gilt jedoch nicht nur für Webseiten. Ihr Posteingang ist ein fruchtbarer Boden für das HTML-E-Mail-Design.

Dies ist sinnvoll, wenn Sie bedenken, wie viele Bilder, GIFs, Videos und Markeninhalte Sie fast jede Stunde in Ihren E-Mails sehen. Während Sie eine Nur-Text-E-Mail anbieten könnten, bietet eine HTML-Version mehr Vorteile und gibt Ihnen mehr Möglichkeiten, sich und Ihr Unternehmen zu brandmarken und zu vermarkten.

In diesem Beitrag besprechen wir, wie Sie HTML-E-Mails erstellen und senden und warum Sie dies tun sollten. An einigen Stellen gehen wir eingehend darauf ein, wie Sie eine E-Mail codieren, aber Sie benötigen dieses Wissen nicht, um Ihre eigene zu erstellen.

Was ist eine HTML-E-Mail?

Die E-Mails, die Ihren Posteingang erreichen, können in zwei Varianten vorliegen:

• Klartext: Es ist fast ein Telegramm für die Moderne. Es gibt kein Styling oder minimale Formatierung, und der Empfänger sieht Wörter unter Ausschluss von allem anderen.
• HTML: Dies ist im Vergleich zu reinem Text ein Knaller, und es ist designlastig. Es verwendet HTML-Code, um eine E-Mail darzustellen, obwohl es, wie wir noch besprechen werden, nicht immer moderne Webstandards verwendet.

Beispielsweise erkennen Sie, ob Sie eine reine Text-E-Mail erhalten, da sie genau wie ein reines Textdokument aussieht. Im Gegensatz dazu sieht eine HTML-E-Mail fast genauso aus wie eine moderne Webseite (mit oder ohne ein paar Styling- und Formatierungsbedenken):

In den meisten Fällen strebt eine HTML-E-Mail nicht danach, die ultimative Interaktivität oder dynamisches Engagement zu bieten. Nochmals, es ist etwas, das wir später behandeln werden, aber HTML-E-Mail hinkt in Bezug auf die Standards hinter dem Web hinterher. Daher ist HTML eher ein designorientiertes Tool als eines, das dabei hilft, ein Erlebnis zu bieten. Dies wirft jedoch eine Frage auf: Warum sollten Sie HTML-E-Mails verwenden, wenn der einzige Grund visueller Natur ist? Wir werden versuchen, dies als nächstes zu beantworten.

Warum Sie HTML-E-Mail gegenüber der Formatierung von reinem Text verwenden sollten

Es kommt aus mehreren Gründen selten vor, dass Sie eine reine Text-E-Mail von einem Unternehmen sehen. Klarer Text ist jedoch nicht per se falsch , sondern bietet keinen der Vorteile der HTML-E-Mail-Formatierung. Zum Beispiel:

• Sie können die inhärenten visuellen Elemente verwenden, um die Aufmerksamkeit auf die verschiedenen Teile Ihres E-Mail-Inhalts zu lenken.
• Als Erweiterung ist eine HTML-E-Mail ein reichhaltiges Format zum Präsentieren Ihrer Inhalte. Das bedeutet, dass Sie die Elemente nutzen können, von denen Benutzer erwarten, dass sie mit ihnen interagieren, wie Bilder, Videos und mehr.
• In Kombination bieten Ihnen diese beiden Aspekte eine hervorragende Möglichkeit, Ihre Inhalte zu brandmarken, genau wie Sie es mit Ihrer Hauptwebsite tun würden.

Die Entscheidung, eine HTML-E-Mail zu verwenden, ist jedoch nicht der perfekte Sturm, den Sie denken würden. Es gibt auch ein paar Nachteile zu beachten. Zunächst müssen Sie die Erfahrung des Benutzers berücksichtigen, genau wie beim Entwerfen einer Website. Dazu gehört möglicherweise nicht nur ein Browser – viele Benutzer ziehen es auch vor, E-Mails in einem dedizierten Client zu lesen.

Darüber hinaus müssen Sie auch einige der Datenschutz- und Sicherheitsprobleme berücksichtigen, die die Webentwicklung dominieren. Dies gilt insbesondere, wenn Sie JavaScript einbinden möchten, Sie ziehen Schriftarten von Drittanbietern und andere Aspekte ein.

Aus diesem Grund müssen Sie fast an mehr Fronten als im Internet mit Zugänglichkeits- und Standardkämpfen kämpfen. Es ist schwierig, eine HTML-E-Mail zu erstellen, die browser- und clientübergreifend funktioniert. Natürlich ist dies möglich, und wir werden den technischen Aspekt in einem späteren Abschnitt behandeln. Im Moment sollten Sie die verschiedenen Elemente Ihrer E-Mail festlegen und dann versuchen, sie zu implementieren.

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

Dieser Artikel wird wegen der inhärenten Ähnlichkeiten an einigen Stellen auf Webdesign verweisen. Ein Aspekt, der einen ähnlichen Workflow bietet, ist die Entscheidung über die Facetten und Abschnitte Ihrer HTML-E-Mail.

Ähnlich wie im Web gibt es einige Elemente, die für Ihre E-Mails praktisch nicht verhandelbar sind. Natürlich braucht man Inhalte. Hier sind einige typische Elemente zu beachten:

• Ihr Header ist wichtig, da dies der erste Eindruck ist, den Ihre E-Mail den Lesern vermittelt.
• Genau wie beim Webdesign ist es auch von Vorteil, darüber nachzudenken, welche Elemente „above the fold“ angezeigt werden.
• Der Body-Content ist entscheidend, denn dafür abonniert der Leser schließlich Ihre E-Mails.
• Die Fußzeile Ihrer HTML-E-Mail bietet Ihnen und Ihren Abonnenten ebenfalls viel Wert und kann ein unterbewertetes Element Ihrer E-Mails sein.

Hier gibt es einige Punkte, auf die wir noch eingehen können. Bedenken Sie zunächst, wie sehr Emojis unsere tägliche Internetnutzung durchdringen. Obwohl es sich nicht um ein reines HTML-Element handelt, kann die geschmackvolle Anwendung von Emojis Wunder für Ihren Inhalt bewirken, insbesondere für Ihren Header:

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

Berücksichtigung einiger typischer Praktiken für Ihre HTML-E-Mails

Es gibt viele Überschneidungen mit E-Mail-Marketing, wenn es um einige der optimalsten Praktiken geht, die Sie in Ihren Designs und Layouts verwenden werden. Es gibt eines, das Sie fast als nicht verhandelbares Element einbeziehen sollten: Ein doppeltes Opt-in.

Einer der größten E-Mail-Marketing-Hacks ist, dass Sie Ihre E-Mails zum Leser bringen möchten. Mit anderen Worten, stellen Sie ein Opt-in-Formular auf einer Website bereit, da dies eine große Konversionsrate hat. Es sollte jedoch nicht das einzige Mal sein, dass Sie um Bestätigung bitten. Es hat sich bewährt, auch ein zweites Opt-in als E-Mail zu versenden:

Dafür gibt es einige Gründe:

• Erstens baut es Vertrauen bei Ihren Lesern auf, weil Sie die ausdrückliche Erlaubnis erhalten, ihnen E-Mails zu senden.
• Als Erweiterung haben Sie auch eine ausdrückliche Zustimmung im Falle einer Spam-Empfehlung (dazu später mehr).
• Sie tragen dazu bei, E-Mail- und Spam-Missbrauch für andere zu stoppen, da diese sich ausdrücklich für ein Abonnement Ihrer E-Mails entscheiden müssen.

Da Sie bei einem Double-Opt-in eine E-Mail an die betreffende Adresse senden, ist dies der beste Weg, um die E-Mail-Adresse zu validieren.

Es gibt noch ein paar andere bewährte Praktiken, die Sie berücksichtigen sollten. Die folgenden sind jedoch eher optional, da Sie fantastische Ergebnisse erzielen, aber es wird Zeiten geben, in denen Sie diese Richtlinien nicht befolgen möchten:

• Ihre Betreffzeile sollte perfekt sein und Ihre E-Mail-Inhalte sollten auf den Punkt gebracht werden. Angesichts des Aufkommens und der heutigen Dominanz des mobilen Surfens ist dies besonders wichtig.
• Apropos, Sie sollten sicherstellen, dass Ihre HTML-E-Mail auf kleineren Bildschirmen reibungslos gelesen werden kann – das heißt, keine ausladenden Banner oder übergroßen Logos.
• Wenn Sie in jede E-Mail einen starken Call-to-Action (CTA) einfügen, haben Sie gute Chancen auf eine bessere Benutzerinteraktion.
• Tracking ist ein umstrittenes Thema, aber dies hilft Ihnen zu verstehen, was Ihre Benutzer tun, wenn Sie ihnen eine E-Mail senden. Einige Anbieter bieten standardmäßig eine solide Reihe von Analysen an.

Genauso wichtig wie die Präsentation und Einrichtung Ihrer E-Mail ist die Erstellung von Design und Layout. In den nächsten Abschnitten sehen wir uns an, wie man eine HTML-E-Mail erstellt, und schließen dann mit einigen Tipps zum Versenden ab.

Der technische Ansatz zum Erstellen einer HTML-E-Mail

Wenn Sie Erfahrung in der Webentwicklung haben, werden Sie zweifellos HTML5 als Auszeichnungssprache verwenden. Dies ist eine Welt, die sich von früheren Instanzen von HTML und XHTML unterscheidet, und beinhaltet eher eine Trennung zwischen Gestaltung (von der es praktisch null gültige Elemente gibt) und Struktur.

Als Beispiel für Letzteres bietet HTML5 eine Reihe verschiedener Tags, um Inhaltsbereiche Ihrer Website zu definieren.

E-Mail-HTML ist jedoch ein anderes Biest, da es etwas hinter der Zeit zurückbleibt. Daher sollten Sie all diese alten HTML4-Tabellen und das Inline-Styling verwenden, um Ihr Layout zu erstellen. Warum das so ist, müssen Sie mit den Entwicklern von E-Mail-Clients besprechen, da diese häufig die HTML-E-Mail ändern, wenn sie in Ihren Posteingang gelangt. Eine der häufigsten Handlungen ist das Entfernen von CSS und JavaScript aus E-Mails (unter anderem aus Sicherheitsgründen).

Das bedeutet, dass Sie Ihren HTML-E-Mails eine andere Möglichkeit bieten müssen, Stile hinzuzufügen – Inline ist die einzige Option für Kompatibilität. Apropos Kompatibilität, das ist eine wichtige Überlegung. Sie müssen ein einzigartiges Design mit den Möglichkeiten des E-Mail-Clients des Endbenutzers in Einklang bringen. Daher gibt es einige andere technische Überlegungen, die Sie beachten sollten:

• Die Verwendung von Systemschriftarten anstelle von Schriftarten eines Drittanbieters erspart Ihnen eine HTTP-Anfrage, lädt die E-Mail für den Benutzer schnell und liefert obendrein eine konsistent aussehende E-Mail.
• Sie könnten sogar noch weiter gehen und eine Nur-Text-Version Ihrer E-Mail für diejenigen bereitstellen, die keine HTML-E-Mails in ihrem Client anzeigen können. Viele Websites bieten aus diesem Grund und als Backup eine HTML-Version an, auf die Sie online zugreifen können.
• Alt-Text ist für HTML-E-Mails genauso wichtig wie für das Web. Verwenden Sie daher Alt-Text überall dort, wo Sie ein Bild zu Ihren Inhalten hinzufügen, um die Barrierefreiheit zu gewährleisten.

Es gibt einen technischen Aspekt einer HTML-E-Mail, über den Sie mehr nachdenken sollten, da er die Grenze zwischen Inline-Styling, CSS und anderen Faktoren überschreiten kann. Lassen Sie uns kurz auf „Bedingungen“ eingehen.

Bedingungen verwenden

Ein Überbleibsel von HTML-E-Mails, die früher im Toolkit eines älteren HTML-Webentwicklers enthalten waren, sind Bedingungen. Hier geben Sie an, welcher Browser ein bestimmtes Code-Snippet verwendet.

Ehrlich gesagt ist dies fast immer ein Microsoft-basiertes Problem. Für Webentwickler war der Internet Explorer (IE) der Dämonen-Browser-Spawn. Für HTML-E-Mails ist es jedoch Outlook. Zwischen den verschiedenen Versionen sehen Sie möglicherweise, dass Ihr Styling auf eine Weise gerendert wird, die Sie nicht erwartet haben.

Aus diesem Grund können Sie Ihrem Code Bedingungsblöcke hinzufügen und diese Elemente definieren. Beispielsweise können Sie sowohl auf Word-basierte als auch auf IE-basierte Versionen von Outlook abzielen.

Erstes Wort:

 <!--[if mso]>

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

 <![endif]-->

Für Internet Explorer verwenden Sie ein anderes Tag:

 <!--[if (IE)]>

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

 <![endif]-->

Wenn der Browser, auf den Sie abzielen, auf WebKit basiert (z. B. Apple Safari, der PlayStation-Browser, der Kindle von Amazon usw.), können Sie eine Medienabfrage verwenden, um ein bestimmtes Design bereitzustellen:

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

Dadurch haben Sie eine etwas bessere Möglichkeit, Ihre HTML-E-Mail an die Anzeige des Endbenutzers anzupassen. Im Großen und Ganzen ist das HTML-Styling für E-Mails nicht perfekt, aber unter der Haube jedes E-Mail-Clients steckt genug Grunzen, um Ihnen dabei zu helfen, einige beeindruckende Layouts zu erstellen.

Ihre Optionen zum Erstellen von HTML-E-Mails

Ungeachtet dessen, was wir bereits besprochen haben, haben Sie eine Reihe flexibler Optionen, mit denen Sie HTML-E-Mails erstellen können. Beispielsweise können Sie mit einem netten Texteditor und HTML von Grund auf neu erstellen.

Es gibt jedoch andere Optionen, die wir in Betracht ziehen können:

• Sie können einen dedizierten Dienst wie eine E-Mail-Marketing-App verwenden, um Ihre E-Mails zu erstellen. Viele Apps bieten einen visuellen Builder, geben Ihnen aber auch die Möglichkeit, Ihren eigenen Code zu schreiben und Ihre eigene Vorlage zu erstellen.
• Apropos, Sie könnten eine Vorlage für Ihre HTML-E-Mails herunterladen. Dies ist einem WordPress-Theme sehr ähnlich, da es eine Basis für den Rest Ihres Designs bietet. Von dort aus können Sie es nach Ihren Wünschen anpassen. Es ist ein guter Mittelweg zwischen den Codierungs- und Bauoptionen.

Später werden wir unsere E-Mail mit HTML erstellen. Lassen Sie uns jedoch vorher einen Blick auf einige der E-Mail-Dienstanbieter werfen, die Sie möglicherweise in Betracht ziehen sollten, unabhängig von der von Ihnen gewählten Methode zum Erstellen Ihrer E-Mails.

3 E-Mail-Dienstanbieter, die sich perfekt zum Erstellen von HTML-E-Mails eignen

Da der Schwerpunkt dieses Beitrags auf der Erstellung von HTML-E-Mails liegt, müssen wir nicht zu sehr in die Tiefe gehen, wenn es um E-Mail-Dienstanbieter geht. Trotzdem gibt es einige, die Sie wahrscheinlich in Betracht ziehen werden.

Wir können sie nicht alle abdecken, also werden wir drei der beliebtesten erwähnen. Runden wir sie ab.

1. Mailchimp

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

• Es enthält viele typische Funktionen, die Sie in vielen anderen ähnlichen Apps finden.
• Es gibt jede Menge Unterstützung, wenn es um die Förderung eines Unternehmens geht, wie z. B. Marketingautomatisierung, Tools zur Zielgruppenverwaltung und mehr.
• Sie verfügen über eine erstklassige Suite kreativer Tools, mit denen Sie HTML-E-Mails erstellen können.

Letzteres wollen wir uns hier natürlich anschauen. Der Kreativassistent ist eine Möglichkeit für Mailchimp, mehr über Ihre Marke zu erfahren und Sie beim Erstellen und Personalisieren Ihrer E-Mails zu unterstützen. Sie können auch Apps von Drittanbietern wie Adobe Photoshop verbinden, um Ihnen beim Erstellen der perfekten E-Mail zu helfen.

Melden Sie sich für den Newsletter an

Möchten Sie wissen, wie wir unseren Traffic um über 1000 % gesteigert haben?

Schließen Sie sich über 20.000 anderen an, die unseren wöchentlichen Newsletter mit WordPress-Insidertipps erhalten!

Abonniere jetzt

Es ist auch einfach, mit vorhandenem HTML zu arbeiten, insbesondere wenn Sie den Classic Builder von Mailchimp verwenden. Unabhängig davon haben Sie Möglichkeiten, HTML-Vorlagen zu importieren, wenn Sie sie benötigen.

Mailchimp verwendet eine komplizierte Mischung aus monatlichen Abonnementstufen und der Anzahl der Kontakte, um einen Endpreis zu ermitteln. Wir würden vorschlagen, dass kleine Unternehmen einen Plan von etwa 35 US-Dollar pro Monat benötigen, bis zu 2.500 Kontakte. Sie müssen jedoch den besten Plan für Sie basierend auf den Funktionen, die Sie benötigen, und der Anzahl der Kontakte, die Sie an Bord bringen werden, recherchieren.

2. AWeber

Für einige stellt AWeber die Spitze des E-Mail-Marketings dar. Es ist eine fantastische und leistungsstarke Plattform und enthält einen wohl fokussierteren Funktionsumfang als Mailchimp.

Es enthält eine Reihe wesentlicher Funktionen, die Sie zum Senden von E-Mails benötigen:

• Die Möglichkeit, Nachrichten, Kampagnen und mehr zu automatisieren und zu planen.
• Sie verfügen über großartige Organisationstools wie Abonnenten-Tagging und -Segmentierung.
• Mit AWeber können Sie auch den Inhalt automatisieren, den Sie für Ihre E-Mails erstellen. So können Sie beispielsweise Blogposts mit minimalem Aufwand in Mailings umwandeln.

Wenn es um die Erstellung Ihrer E-Mails geht, hat AWeber ein paar Tricks im Ärmel. Es verwendet einen visuellen Drag-and-Drop-Builder und enthält eine Bibliothek mit benutzerdefinierten Vorlagen, um Ihnen den Einstieg zu erleichtern. Darüber hinaus können Sie AWeber mit Ihrem Canva-Konto verbinden und letzteres verwenden, um Ihre E-Mails zu gestalten.

Es gibt auch einen dedizierten HTML-Editor, was bei Mailchimp nicht der Fall ist. Sie erhalten dies sogar im kostenlosen Kontingent von AWeber. Apropos, die Preisgestaltung ist hier einfacher. Sie zahlen etwa 25 US-Dollar pro Monat für bis zu 2.500 Kontakte.

3. Ständiger Kontakt

Constant Contact ist ein Ausreißer, wenn es um E-Mail-Dienstleister geht, aber es ist eher eine Geheimwaffe. Es bietet eine fantastische Auswahl an Features und Funktionen und lässt Sie bei Bedarf auch mit HTML arbeiten.

Ähnlich wie AWeber konzentriert sich Constant Contact auf E-Mail-Marketing gegenüber anderen geschäftsorientierten Bereichen. Als solches hat es ein Feature-Set, das Ihnen gefallen wird:

• Sie verfügen über Tools zur Verwaltung von Kundenlisten und Funktionen zur Marketingautomatisierung.
• Es gibt umfangreiche Reporting-Möglichkeiten.
• Sie können Anzeigenprogramme von Facebook, Instagram und Google integrieren.
• Es gibt viele Möglichkeiten, neue Abonnenten für Ihre Listen zu gewinnen und zu engagieren.

Die Designfunktionalität von Constant Contact ist ebenfalls gut. Sie können eine Vorlage auswählen und mit einem visuellen Editor arbeiten, um das gesamte Design zu erstellen. Sie können jedoch auch mit HTML arbeiten – manchmal auf fortgeschrittene Weise im Vergleich zu anderen Tools.

Die Preise sind auch angemessen. Sie zahlen 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 Sie zum Erstellen einer HTML-E-Mail benötigen

Bevor Sie mit dem Erstellen Ihrer HTML-E-Mails beginnen, müssen Sie einige Tools und Fähigkeiten zur Hand haben. Hier ist, was Sie arrangieren sollten, bevor Sie mit den Knöcheln knacken und beginnen:

• Sie sollten einen Code-Editor verwenden, den Sie bequem finden, da er Sie während des Prozesses unterstützen muss. Wenn Sie nicht wissen, welches Sie auswählen sollen, entscheiden sich viele Benutzer für Visual Studio Code, obwohl Klammern für diese spezielle Aufgabe ideal wären. Wir werden Onivim2 verwenden, einen Editor im Vim-Stil, der auf der zentralen VS-Code-Infrastruktur basiert.
• Sie benötigen zwar HTML-Kenntnisse, aber nicht die gleichen Kenntnisse wie ein moderner Webentwickler (obwohl dies Ihren Interessenten nicht schadet).
• Du brauchst eine Möglichkeit, 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 möchten Sie in Zukunft eine davon verwenden.
• Sie benötigen auch einen E-Mail-Anbieter, da Sie eine Möglichkeit benötigen, Ihre fertige HTML-E-Mail zu senden.

Wenn dies alles vorhanden ist, können Sie einen Texteditor öffnen und beginnen. Als Nächstes führen wir den Prozess durch, um eine einfache HTML-E-Mail zu erstellen.

So erstellen Sie eine HTML-E-Mail von Grund auf neu

Bevor wir beginnen, ist es erwähnenswert, dass wir keinen dedizierten Dienst wie Mailchimp oder AWeber verwenden werden. Stattdessen erstellen wir von Grund auf eine einfache Vorlage, die Sie überall dort importieren können, wo Sie sie benötigen.

Wir werden den Prozess in einige verschiedene Abschnitte aufteilen, denn obwohl eine HTML-E-Mail einfach relativ zu einer Website ist, gibt es noch viel zu beachten.

1. Erstellen Sie die Grundlage für Ihre HTML-E-Mail

Es ist eine gute Idee, mit dem Skelett Ihrer E-Mail-Vorlage zu beginnen. Dies folgt einigen typischen Praktiken für HTML im Allgemeinen:

 <!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 passieren einige Dinge, die wir erwähnen sollten. Zuerst spezifizieren wir einen „Doctype“ für Transitional XHTML 1.0, was unter E-Mail-Entwicklern gängige Praxis ist. Von dort spezifizieren wir einen XML-Namensraum, der später wichtig wird.

Sie werden auch einige Meta-Tags bemerken, und diese definieren den Zeichensatz und wie der Browser den folgenden HTML-Code in seinem Ansichtsfenster rendern soll.

Der Rest des Skeletts ist einfach – es gibt die Title- und Body-Tags, die wir als Nächstes verwenden werden.

2. Fügen Sie die Struktur für Ihre E-Mail-Vorlage hinzu

Wenn Sie auf unsere Diskussion darüber zurückblicken, welche HTML-Tags verwendet werden sollen, werden Sie sich daran erinnern, dass wir <div> oder andere typische Strukturelemente nicht verwenden möchten. Stattdessen möchten wir Tabellen verwenden, da dies in E-Mail-Clients und -Diensten gut gerendert wird.

Alles beginnt mit einem einfachen Satz von <table>-Tags innerhalb des Körpers:

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

Das Attribut, das wir innerhalb des <table>-Tags setzen, hilft Screenreadern, den darin enthaltenen Text zu parsen, also ist es gut für die Zugänglichkeit.

Von hier aus müssen Sie Ihrer Tabelle neue Zeilen und Spalten hinzufügen, um die HTML-E-Mail-Vorlage zu erstellen. Wie Sie dies tun, liegt bei Ihnen, aber es ist gut, mit einer Basis aus Kopf-, Fuß- und Körperabschnitten zu beginnen. Wir werden sie hier der Kürze halber nicht wiederholen, aber wir werden sie im weiteren Verlauf erwähnen.

Die gute Nachricht ist, dass Sie Ihrer Tabelle weiterhin neue Zeilen hinzufügen können, wenn Sie weitere Abschnitte hinzufügen müssen. Von hier aus sollten Sie jedoch mit der Einführung von Styling und anderen Elementen beginnen.

3. Fügen Sie Styling für Ihre Elemente hinzu

Das Schöne an HTML ist, dass es nahezu unabhängig von Ihrem Styling ist. Das Markup ist einfach, aber die Stile, die Sie anwenden, sind es möglicherweise nicht. Hier erwachen Ihre HTML-E-Mails zum Leben.

Als Richtlinie während des Entwerfens fügen wir dem <head> ein <style>-Tag hinzu, um einen allgemeinen Rahmen anzuzeigen:

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

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

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

Wir werden auch etwas Zentrierung hinzufügen und zusätzliche Polsterung aus unseren verschiedenen Abschnittszellen entfernen:

 <tr> <td align="center">Header </td> </tr>

Wenn Sie sich das in Ihrem Browser ansehen, sieht es nicht nach viel aus:

Von hier aus können Sie Ihre E-Mail-Vorlage jedoch mithilfe von Tabellen und Styling-Tags weiterentwickeln. Zum Beispiel haben wir einen Hero-Abschnitt für unsere Kopfzeile erstellt und die Fußzeile und den Text erweitert:

Sie werden wahrscheinlich eine bessere und passendere Vorlage für Ihre Bedürfnisse erstellen, aber mit verschachtelten Tabellen und einigen grundlegenden HTML-Kenntnissen können Sie eine ansprechende und benutzerdefinierte HTML-E-Mail-Vorlage erstellen, die ins Schwarze trifft.

4. Testen Sie Ihre E-Mail

Bevor Sie fertig sind, sollten Sie Ihre E-Mail testen, um sicherzustellen, dass sie auf verschiedenen Geräten gut wiedergegeben wird. Es gibt ein paar verschiedene Dienste, die hier helfen können.

Beispielsweise enthält Email on Acid eine vollständige Checkliste vor der Bereitstellung, damit Sie sicherstellen können, dass Ihre Vorlage keine Probleme verursacht:

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

Sie müssen sich für ein Konto anmelden, um den Dienst nutzen zu können, aber die Nutzung ist unkompliziert. Sie nutzen die Funktion zur Vorschau von E-Mails in einer Reihe verschiedener Browser und auf verschiedenen Geräten.

Mailgun bietet auch einen fantastischen Service, der an sein Hauptangebot anknüpft. Über die Benutzeroberfläche können Sie E-Mail-Clients, Browser und mehr testen. Darüber hinaus können Sie Elemente wie Betreffzeilen testen, um sicherzustellen, dass Ihre Öffnungsraten hoch bleiben.

Sobald Sie Ihre E-Mail jedoch getestet haben, müssen Sie sicherstellen, dass sie im Posteingang des Empfängers ankommt. Im letzten Abschnitt werden wir dies mehr besprechen.

Senden einer HTML-E-Mail: Was Sie wissen müssen

Ein Vorteil der Nutzung eines E-Mail-Marketing-Dienstes, den wir noch nicht erwähnt haben, ist der Umgang mit dem rechtlichen Aspekt des E-Mail-Versands. Das ist wichtig, denn wenn Sie hier etwas falsch machen, werden Sie den Empfänger nicht nur nicht erreichen, sondern sich selbst in Schwierigkeiten bringen.

Ein E-Mail-Marketing-Service hat bereits eine gute Arbeitsbeziehung mit den Organisationen, die mit Spam und verwandten Facetten des E-Mail-Versands umgehen. Daher ist es oft eine gute Idee, eine davon auszuwählen, wenn Sie sich keine Sorgen über die Zustellung von Spam machen möchten.

Es gibt jedoch ein paar Tipps, die wir Ihnen unabhängig von der von Ihnen verwendeten Plattform geben können:

• Stellen Sie sicher, dass Sie alle Richtlinien des CAN-SPAM-Gesetzes befolgen, insbesondere wenn sich Ihre Hauptzielgruppe in den USA befindet. Natürlich haben verschiedene Länder ihre eigenen gesetzlichen Richtlinien.
• Schließen Sie ein doppeltes Opt-in für Abonnenten ein. Hier bitten Sie sie, ein Abonnement zu bestätigen, senden aber auch eine zweite Bestätigung. Dies schützt Sie und den Abonnenten, wenn später eine Spam-Anfrage oder Datenschutzanfrage eingeht.

Zustellbarkeit ist ein Schlüsselelement Ihrer E-Mails, und darauf gehen wir ausführlich in einem anderen Artikel ein. Dieses Konzept ist jedoch eine Mischung aus mehreren Aspekten, wie z. B. der Verwendung von gutem Code, dem Einholen der richtigen Berechtigungsstufe und mehr.

Dies knüpft an eine andere Facette an – Ihre Sendepunktzahl. Dies ist vergleichbar mit einem Kredit-Score und ist letztendlich ein Maß für Ihren Ruf. Es gibt hier ein paar verschiedene Komponenten, die das Ganze ausmachen:

• Die Absprungrate Ihrer Website.
• Die Anzahl der Beschwerden, die Ihre Website in Bezug auf die von Ihnen gesendeten E-Mails erhält.
• Die Reputation Ihrer IP-Adresse.
• Ihre Domain-Namen-Signatur.

Letzteres bezieht sich auf Ihre DomainKeys Identified Mail (DKIM) und das Sender Policy Framework (SPF). Darüber hinaus können Sie die Reputation Ihrer IP durch Dienste wie SenderScore oder IPQualityScore überprüfen.

Wenn Sie sich zunächst für den richtigen SMTP-Anbieter (Simple Mail Transport Protocol) entscheiden, können Sie einige dieser Kästchen auf einen Schlag abhaken. Ähnlich wie Ihre Wahl der E-Mail-Marketing-Lösung wird dieser Service verstehen, was Sie brauchen, um Ihre Zustellbarkeit hoch zu halten und auf der richtigen Seite der Macht zu sein.

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

In diesem Leitfaden erfahren Sie, wie Sie HTML-E-Mails erstellen und versenden. Klicken Sie hier, um zu twittern

Zusammenfassung

E-Mail ist noch lange nicht am Ende. Daher ist die Verwendung von E-Mail für Ihre eigenen Bedürfnisse – wie Werbung und Marketing – eine fantastische und kostengünstige Möglichkeit, potenzielle Abonnenten, Benutzer und Kunden zu erreichen.

Während Sie eine spezielle HTML-Vorlage kaufen könnten, ist das Erstellen Ihrer eigenen HTML-E-Mails nicht so schwierig. Es könnte Ihr Weg zum Erfolg sein, wenn Sie eine bestimmte Vision im Sinn haben. Sie müssen jedoch Ihre alten HTML-Tricks wie Bedingungssätze und verschachtelte Tabellen herausholen. Das HTML-E-Mail-Design ist noch nicht auf dem Niveau des modernen Webdesigns, aber trotzdem kann man mit wenig viel erreichen.

Müssen Sie HTML-E-Mails erstellen und wenn ja, welche Fragen haben Sie? Lassen Sie es uns im Kommentarbereich unten wissen!