search Das Medium für diejenigen, die das Unternehmen neu erfinden

Eine Anleitung zum Erstellen Ihres HTML-Mailings

Eine Anleitung zum Erstellen Ihres HTML-Mailings

Von Jérémy Hasenfratz

Am 14. Dezember 2022

E-Mail ist nicht gleich E-Mail. Man unterscheidet zwischen einer Text-E-Mail und HTML-Mailing. Während es sich bei einer Text-E-Mail wirklich nur um eine Nachricht mit Text, ohne Formatierungen und besonderer Gestaltung handelt, ist eine HTML-E-Mail optisch besonders ansprechend und kreativ aufgearbeitet. Im E-Mail-Marketing setzen die Unternehmen klar auf HTML-Mailing, um das Interesse Ihrer Zielgruppe zu wecken. Worauf muss man achten und wie können Sie ganz einfach HTML-Mailing erstellen? Das erfahren Sie hier.

HTML-Mailing: Definition und Nutzen

HTML ist die Abkürzung für „HyperText Markup Language“ und steht für Formatierungsfunktionen für den Text und eine grafisch ansprechende Gestaltung durch Bilder und Grafiken, visuelle Strukturen und Verlinkungen. HTML-E-Mailing kann mit einer Website direkt in Ihrem Postfach verglichen werden. Während früher E-Mails nur als Textnachricht versendet wurden, ist das heute schon lange nicht mehr genug. Jedes Element der E-Mail ist genau durchdacht und hat eine spezifische Aufgabe und Funktion.

E-Mailing ist wie eine Weiterführung der Website und der Unternehmensidentität in die Postfächer der Kunden und muss demnach auch optisch dem Rest der Unternehmenskommunikation angepasst werden. Um die Aufbereitung der E-Mails zu optimieren, werden HTML-Mailing-Vorlagen erstellt. Gewisse Teile der E-Mails bleiben immer gleich und nur der Inhalt variiert und wird thematisch angepasst.

Ein Leitfaden zum Erstellen von HTML-Mailing

Schritt 1: Struktur festlegen

Grob strukturiert hat eine HTML-E-Mail einen Header (Kopfzeile), einen Body (Textkörper/ Inhalt) und am Ende einen Footer (Fußzeile). Dieser Aufbau erlaubt Ihnen, Ihre Inhalte in einer ansprechenden Reihenfolge für Ihre Kunden aufzubereiten und keine essenziellen Etappen bei der Erstellung von HTML-Mailing auszulassen.

Schritt 2: Header erstellen

Die Kopfzeile ist das erste Element Ihrer E-Mail, das der Empfänger sieht und ist demnach ausschlaggebend, ob Ihre E-Mail geöffnet wird oder nicht.

Informationen im Header

  • Absender
  • Empfänger
  • Betreff
  • Pre-Header
  • Datum
  • Informationen zum E-Mail-Übertragungsweg

Der Empfänger interessiert sich primär für die Standardinformationen wie Absender, Betreff und Pre-Header, die ihn in den Inhalt der E-Mail hineinführen und mit richtig gewählten Worten neugierig machen.

Öffnet der Empfänger die E-Mail, sieht er dann den 2. Teil des Headers in der E-Mail, dem Design Header. Meistens handelt es sich um das Logo der Marke, das optisch dem Design auf der Website entspricht. Wenn Sie sich an das Corporate Design halten, wirkt das wie eine Erweiterung der Website und vermittelt Vertrautheit. Es wird empfohlen, das Bild in einem PNG-Format zu verwenden. Sie können an dieser Stelle weitere Informationen integrieren, aber bedenken Sie, dass Sie Ihre Kunden nicht mit einer Reizüberflutung überfordern sollten. Der visuelle Header wird zum festen Bestandteil Ihrer E-Mail und ein vertrautes Erkennungsmerkmal für Ihre Empfänger.

Schritt 3: Inhalt erstellen

Der Inhalt variiert von E-Mail zu E-Mail. Hier ist Kreativität in Bezug auf die Themen sowie die optische Gestaltung gefragt. In diesem Bereich können Sie die Funktionen von HTML wirkungsvoll integrieren. Bewegte Bilder, farbliche Akzente, Videos, Textformatierungen, Grafiken usw. Zudem werden alle Elemente verlinkt und der Inhalt mit klaren Handlungsaufforderungen (Call-to-Action) ausgestattet. Die Texte sind kurz, knackig und aussagekräftig, ausgewählte Schlüsselwörter ziehen die Blicke der Empfänger an, aber letztendlich sind es die visuellen Elemente wie Bilder und Grafiken, die die Kunden in Ihren Bann ziehen. Mit einem kurzen Blick wird entschieden, ob Links geklickt werden oder nicht, eine E-Mail, die optisch nicht ansprechend ist, hat ganz klar schlechte Karten.

Schritt 4: Bilder und Grafiken integrieren

Der große Unterschied zwischen Text-E-Mails und HTML-Mailing sind die Bilder und Grafiken, die in den E-Mail-Inhalt integriert werden können. Das Erlebnis des Empfängers ist nicht zu vergleichen mit einer reinen Text-E-Mail. Beim HTML-Mailing werden die Sinne stimuliert, es werden Emotionen geweckt und mit bewegten Bildern und Elementen die Neugierde und die Begeisterung geweckt. Eine optisch ansprechende E-Mail macht Lust und animiert die Leser und Leserinnen zu handeln und zu klicken.

Grundsätzlich ist zu beachten, dass HTML-E-Mails neben den Texten auch HTML-Code, Bilder und Grafiken und Formatierungsanweisungen enthalten und dadurch sehr groß sind. Die Datenmenge ist um einiges größer als bei Text-E-Mails, wodurch die Übertragung langsamer wird und es zu technischen Problemen bei E-Mail-Servern führen kann. Beachten Sie bei der Implementierung von Bildern und Grafiken, die Größe der einzelnen Elemente zu komprimieren, ohne die Qualität bei der Auflösung zu verlieren.

Schritt 5: Footer erstellen

Als letzter Teil Ihrer HTML-E-Mail müssen Sie sich noch um Ihren Footer kümmern. Dieser Teil wird auch als E-Mail-Signatur bezeichnet und enthält Pflichtangaben wie das Impressum und Informationen, die noch einen Mehrwert für den Empfänger haben. Normalerweise wird der Footer einmal erstellt und ist dann Teil jeder versendeten E-Mail.

Pflichtangaben:

  • Impressum

    Egal ob Privatperson oder Firma, jeder, der einen Newsletter oder Ähnliches versendet, muss Angaben zur Person/Firma, Adresse, Kontaktinfos, Registernummer usw. angeben.

  • Die Möglichkeit, sich von der Verteiler-Liste entfernen zu lassen
    Laut der Datenschutz-Grundverordnung (DSGVO) muss dem Empfänger die Möglichkeit gegeben werden, sich jederzeit einfach und schnell vom Newsletter abzumelden.

Mögliche Zusatzangaben:

  • Angaben zu Ihrer Marke wie Werbebotschaften oder Fakten zum Unternehmen
  • Informationen zu Ihrem Kundenservice und wie dieser erreicht werden kann
  • Die Social-Media-Kanäle Ihres Unternehmens am besten mit den bekannten Grafiken von Instagram, Facebook, Twitter und Co.
  • Ein Hinweis zu den FAQs auf Ihrer Website mit einem direkten Link

Tipps beim HTML-Mailing

Der Aufbau Ihrer HTML-E-Mail ist klar und Sie wissen, worauf es bei der Erstellung ankommt, also kann eigentlich fast nichts mehr schief gehen. Bedenken Sie aber auch noch die folgenden Tipps:

  • Setzen Sie auf eine E-Mailing-Software

    Um das volle Potenzial von HTML-Mailing im E-Mail-Marketing auszunutzen, sollten Sie auf eine E-Mailing-Software setzen. Finden Sie den richtigen Partner für Ihr Unternehmen und basteln Sie nicht mit Programmen wie InDesign und Photoshop herum. Eine E-Mailing-Software ist mit Kosten verbunden, sie verspricht aber auch Qualität, Hilfestellung und eine Performance-Evaluation.

  • Personalisieren Sie Ihre E-Mails
    HTML-Mailing dreht sich um die visuelle Aufbereitung Ihrer E-Mail-Inhalte für Ihre Zielgruppe. Das Design und die Optik haben einen hohen Stellenwert, vergessen Sie aber nicht, dass die Empfänger trotzdem besonders auf personalisierte E-Mails und individuelle Anreden reagieren. Die Empfänger fühlen sich durch eine direkte Anrede wertgeschätzt und gut behandelt. Auch Ihr Unternehmen bekommt eine menschliche Seite, auf die positiv reagiert wird.

  • Optimieren Sie Ihre E-Mail-Vorlage für das Smartphone
    In der heutigen digitalisierten Welt hat fast jeder ein Smartphone und das auch ständig bei sich. Wir können zu jeder Zeit unsere E-Mails lesen und diese auf unseren Smartphones konsultieren. Die Darstellung Ihrer E-Mail-Inhalte muss auf die mobile Version angepasst werden. Besonders beim HTML-Mailing braucht es eine E-Mail-Vorlage für die Darstellung am Computer und eine E-Mail-Vorlage für das Smartphone.

  • Test-Emails verschicken
    HTML-Mailing ist mit einem großen kreativen Aufwand verbunden, der mit viel Konzeption und Einfallsreichtum verbunden ist. Es wäre schade, wenn durch technische Fehler die Darstellung der Elemente nicht so beim Empfänger ankommt wie gewollt. Im schlimmsten Fall sind die Bilder und Textblöcke nicht nur verschoben, sondern die HTML-Codes scheinen in der E-Mail auf. Um diesem „Worst-Case-Szenario“ vorzubeugen, versenden Sie bitte unbedingt eine Test-E-Mail an sich selbst. Dadurch können Sie die Darstellung Ihrer HTML-Mail überprüfen und etwaige Fehler korrigieren, bevor die E-Mail an den gesamten E-Mail-Verteiler versendet wird.

Kurz zusammengefasst

HTML-Mailing ist ein klarer Bestandteil von erfolgreichem E-Mail-Marketing und ein wichtiges Werkzeug für Kundenbindung und Umsatzsteigerung. Überlegen Sie sich vorab genau, welche Inhalte Sie aufbereiten möchten und wie Sie diese durch HTML-Codes, Formatierungen und bewegte Bilder darstellen möchten. Und während HTML-Mailing der Kreativität viel Platz lässt, sollten auch hier die Grundlagen des E-Mail-Marketings befolgt werden – kurze, präzise Texte, Call-to-Action, eine Betreffzeile, die neugierig macht, Inhalte, die auf die Zielgruppe abgestimmt sind usw.

Mit all diesen Informationen im Hinterkopf geht es dann an die Umsetzung einer übersichtlichen und gut strukturierten HTML-E-Mail. Beginnen Sie mit einer ansprechenden Kopfzeile, die das Interesse weckt und dem Empfänger Informationen über den Absender gibt. Der Inhalt wird durch HTML-Codes und Formatierungen aufgewertet und ansprechend dargestellt. Besonders der Einsatz von Bildern und Grafiken zeigt Wirkung bei den Empfängern. Alle Elemente werden verlinkt und sind durch Links mit der Website verbunden, denn im E-Mail-Marketing geht es um Öffnungs- und Klickraten. Den Abschluss macht der Footer, der in jeder E-Mail gleich ist. Hier findet man rechtliche Hinweise und Informationen mit Mehrwert für den Empfänger. Oft werden an dieser Stelle die Social-Media-Kanäle des Unternehmens mit Bildern, Informationen zum Kundenservice und Links zu den FAQs eingefügt.

Bei der Erstellung von HTML-Mailing sollten Sie sich an das Corporate Design Ihres Unternehmens halten. Übernehmen Sie Logos, Markenbotschaften und Farbpaletten von Ihrer Website und Ihrem Kommunikationsmaterial und passen Sie Ihre E-Mails entsprechend an. Homogenität und eine eindeutige Identifizierung mit Ihrem Unternehmen wirken authentisch und professionell und geben den Kunden Sicherheit, dass es sich hierbei um eine offizielle E-Mail von Ihrem Unternehmen handelt und es kein Spam oder Phishing ist.

Jérémy Hasenfratz

Jérémy Hasenfratz, Analytics & Paid Acquisition Manager, Appvizer

Seit meinem Einstieg bei Appvizer 2020 als Praktikant engagiere ich mich leidenschaftlich für die Auswahl optimaler Lösungen, um den Alltag von Unternehmen zu erleichtern. Diese Leidenschaft führte mich zum Marketing Manager Germany und schließlich 2023 zum Analytics and Paid Acquisition Manager, wo ich meine Expertise weiter vertiefe.

Education: HEC Liège - Universität Hohenheim. Published works and citations: Un voyage au-delà de la réalité : l'influence de la réalité virtuelle sur les expériences de marque et les intentions de visite dans le tourisme, available on MatheO. Expertise: SEM (SEO, SEA, SMA, SMO), Brand Experience, Traffic Management, Lead Generation, Analytics.