Wenn Sie eine E-Mail mit einem Drag-and-Drop- oder modulbasierten Tool erstellen, generieren Sie de facto eine HTML-E-Mail.
Als Marketingspezialist bzw. -spezialistin haben Sie wahrscheinlich schon einmal HTML-E-Mails mit reinen Text-E-Mails verglichen und festgestellt, dass beide Arten unterschiedliche Vorteile haben.
HTML-E-Mails sind nicht per se besser als reine Text-E-Mails – in verschiedenen Situationen können beide Arten Teil einer erfolgreichen E-Mail-Marketingkampagne sein.
In diesem Artikel erfahren Sie, wie Sie mit der Erstellung von HTML-E-Mails beginnen können – unabhängig davon, wie viel Erfahrung Sie haben und wie gut Sie sich mit der Programmierung auskennen. Zusätzlich erhalten Sie einige kostenlose Vorlagen zur freien Verwendung.
Nur-Text-E-Mails vs. HTML-E-Mails
Es gibt zwei Haupttypen von E-Mails, die Sie senden und empfangen können: reine Text-E-Mails (die genau das sind, wonach sie klingen: Jede E-Mail, die nur einfachen Text ohne Formatierung enthält) und HTML-E-Mails, die mit HTML und Inline-CSS formatiert und gestaltet werden.
HTML-E-Mails sind leicht zu erkennen: Die meisten der gestylten Multimedia-Marketing-E-Mails in Ihrem Posteingang sind HTML-E-Mails. Hier sehen Sie, wie eine HTML-E-Mail auf der Frontseite aussieht.
See the Pen HTML Email Template from HubSpot by HubSpot (@hubspot) on CodePen.
Wie man eine HTML-E-Mail erstellt
Die gute Nachricht gleich zu Beginn: Sie müssen keine Programmierkenntnisse haben, um eine HTML-E-Mail zu erstellen.
Die meisten Tools zum Erstellen und Versenden von E-Mails (z. B. HubSpot) bieten vorformatierte, gleich einsatzbereite HTML-Vorlagen, mit denen Sie sofort E-Mails gestalten können – ohne jemals auf den eigentlichen Code im Backend zugreifen zu müssen. Wenn Sie im E-Mail-Editor Änderungen vornehmen, werden diese automatisch in das Endprodukt kodiert.
E-Mail-Erstellungstools dieser Art sind eine ideale Option, wenn Sie keinen E-Mail-Designer oder -Designerin in Ihrem Team haben, aber dennoch professionell aussehende Marketing-E-Mails versenden möchten.
Apropos: Denken Sie darüber nach, eine benutzerdefinierte E-Mail-Signatur zu erstellen, um Ihren E-Mails einen professionellen Touch zu verleihen? Mit dem E-Mail-Signatur-Generator von HubSpot können Sie ebenfalls CTA-Schaltflächen einfügen, um den Empfängern und Empfängerinnen einen letzten Anreiz zu geben, sich durchzuklicken.
Pro-Tipp: Benötigen Sie Hilfe in Sachen E-Mail-Content? Mit dem HubSpot-Kampagnenassistenten können Sie mit nur wenigen Klicks einen individuellen ersten Entwurf Ihrer E-Mail erstellen.
Sie möchten eine HTML-E-Mail von Grund auf neu erstellen?
Wenn Sie mit HTML vertraut sind und mehr direkte Kontrolle über den Code Ihrer E-Mails haben möchten, können Sie mit den meisten E-Mail-Tools HTML-Dateien direkt importieren und als benutzerdefinierte E-Mail-Vorlagen verwenden.
Im Internet gibt es eine Vielzahl kostenloser HTML-E-Mail-Vorlagen (einige davon stelle ich weiter unten vor). Wenn Sie sich mit HTML-Dateien auskennen, ist es in der Regel recht einfach, die Vorlage an das E-Mail-Erstellungstool Ihrer Wahl anzupassen.
Wenn Sie lernen möchten, wie man eine HTML-E-Mail-Vorlage von Grund auf neu erstellt, müssen Sie über fortgeschrittene HTML-Kenntnisse verfügen (oder mit einem Entwickler bzw. einer Entwicklerin zusammenarbeiten, der oder die über diese verfügt).
Da eine komplette Neuerstellung einer HTML-E-Mail recht aufwändig sein kann, empfehle ich, mit einem Entwickler oder einer Entwicklerin zusammenzuarbeiten oder stattdessen eine vorgefertigte HTML-E-Mail-Vorlage zu verwenden.
Entwickeln Sie eine HTML-E-Mail speziell für HubSpot?
Wenn Sie wissen möchten, wie Sie eine HTML-E-Mail-Vorlage speziell für die Verwendung in HubSpot erstellen, müssen Sie sicherstellen, dass Sie die erforderlichen HubL-Tokens einfügen (diese gewährleisten, dass Ihre E-Mails angepasst werden können und mit den CAN-SPAM-Gesetzen konform sind).
Eine vollständige Anleitung zur Codierung von HubSpot-spezifischen HTML-E-Mail-Vorlagen finden Sie hier. Alternativ dazu können Sie auch unseren einfachen „what you See is what you get"-E-Mail-Editor verwenden.
Kostenlose E-Mail-Marketing-Software
Ohne Kreditkarte verfügbar. Einfach loslegen.
- Öffnungs- und Klickraten Ihrer E-Mails steigern
- E-Mails automatisch für die Lesenden anpassen
- Alles selbständig erledigen
- KI-Funktionen zum Schreiben von Inhalten
Bewährte Praktiken für HTML-E-Mails
- Stellen Sie sicher, dass Ihre HTML-E-Mails für verschiedene Bildschirmgrößen und Geräte geeignet sind.
- Achten Sie darauf, dass Ihr Styling in verschiedenen E-Mail-Clients funktioniert.
- Achten Sie darauf, wie lange Ihre HTML-E-Mails zum Laden benötigen.
- Planen Sie (so weit wie möglich) Unstimmigkeiten mit dem Endbenutzenden ein.
- Führen Sie gründliche Tests durch.
Nachdem Sie nun die Grundlagen der Entwicklung einer HTML-E-Mail verstanden haben, möchte ich nun einige wichtige Best Practices besprechen, die Sie beachten sollten.
Unabhängig von der Methode, mit der Sie die Erstellung einer HTML-E-Mail-Vorlage erlernen möchten, werden diese bewährten Verfahren dazu beitragen, das Design, die Benutzerfreundlichkeit und die Zustellbarkeit Ihrer E-Mails zu verbessern.
1. Stellen Sie sicher, dass Ihre HTML-E-Mails für verschiedene Bildschirmgrößen und Geräte geeignet sind.
Wie Ihre E-Mail im Posteingang eines Nutzers oder einer Nutzerin aussieht, hängt von einer Vielzahl von Faktoren ab.
Einer der größten und offensichtlichsten Faktoren ist die Bildschirmgröße des Geräts, auf dem die E-Mail aufgerufen wird.
Eine E-Mail, die auf einem Desktop erstaunlich gut aussieht und gut formatiert ist, kann sich auf einem Smartphone-Bildschirm leicht in ein Gewirr aus unleserlichem, sich überschneidendem Text und Bildern verwandeln.
Um sicherzustellen, dass Ihre HTML-E-Mails auf einem breiten Spektrum von Bildschirmgrößen so aussehen, wie Sie es beabsichtigt haben, sollten Sie Ihr Layout einfach und übersichtlich halten.
Wenn Sie anfangen, komplexere Elemente wie mehrere Spalten und schwebende Bilder hinzuzufügen, wird es schwieriger, das Format Ihrer E-Mail für verschiedene Bildschirmgrößen zu übersetzen.
Wenn Sie sich dazu entschließen, ein komplexeres Layout zu entwickeln, sollten Sie sich Gedanken darüber machen, wie die Elemente für die verschiedenen Bildschirmgrößen neu angeordnet werden können.
Wenn Ihre E-Mail beispielsweise auf dem Desktop mehrspaltig angezeigt wird, funktioniert diese Struktur auf dem Handy nicht: Sie müssen Media-Queries verwenden, um zu definieren, wie die Elemente auf den verschiedenen Bildschirmgrößen angezeigt werden sollen.
Schauen wir uns diese Vorlage von HubSpot an. Sie können sehen, wie das Bild und der Inhalt das Layout verändern, wenn es auf verschiedenen Bildschirmen angezeigt wird.
Was mir daran gefällt: Die Fähigkeit, die Vorlage durch die Brille des Nutzenden zu betrachten. So können Sie erkennen, was das Interesse der Nutzenden weckt, damit sie klicken oder sich anmelden.
Denken Sie daran, dass die Entwicklung wirklich responsiver HTML-E-Mails weit über die Struktur und das Format Ihrer Nachricht hinausgeht. Machen Sie sich Gedanken darüber, wie Ihre E-Mail auf den verschiedenen Geräten wahrgenommen wird.
Achten Sie auch darauf, dass Ihre Schriftarten auf dem Handy genauso gut lesbar sind wie auf dem Desktop. Verwenden Sie mobilfreundliche Schaltflächen oder CTAs (Call-to-Actions) anstelle von verlinktem Text (haben Sie schon einmal versucht, auf dem Handy auf eine kleine Zeile mit verlinktem Text zu tippen? Das ist gar nicht so einfach).
2. Stellen Sie sicher, dass Ihr Design für verschiedene E-Mail-Clients geeignet ist.
Ein weiterer wichtiger Faktor, der sich stark darauf auswirkt, wie Ihre HTML-E-Mails in den Posteingängen Ihrer Abonnenten und Abonnentinnen erscheinen, ist der E-Mail-Client, mit dem die Nachricht geöffnet wird.
Jeder E-Mail-Client lädt E-Mails etwas anders, sodass eine E-Mail, die in Gmail auf eine bestimmte Weise aussieht, in Outlook wahrscheinlich anders dargestellt wird.
Wenn Sie wissen, wie die meisten gängigen E-Mail-Clients bestimmte HTML- und CSS-Elemente laden, können Sie zum Glück ein ziemlich einheitliches Erscheinungsbild in den Posteingängen der verschiedenen Benutzer und Benutzerinnen schaffen.
Es geht vor allem darum zu wissen, welche nicht unterstützten Tags zu vermeiden sind und sich entsprechend anzupassen.
In diesem umfassenden Leitfaden wird erläutert, wie die gängigsten E-Mail-Clients (einschließlich Gmail und mehrere Versionen von Outlook) verschiedene Stilelemente unterstützen und darstellen.
Falls Sie sich fragen, wie es aussehen wird: HubSpot arbeitet mit mehreren E-Mail-Clients zusammen, um sicherzustellen, dass Sie sich der Vorschau Ihrer E-Mail sicher sein können.
3. Achten Sie darauf, wie lange Ihre HTML-E-Mails zum Laden brauchen.
Die Ladezeit Ihrer E-Mail kann sehr wohl den Unterschied zwischen der Gewinnung neuer Kundschaft und dem Verlust frustrierter Abonnenten und Abonnentinnen ausmachen.
Es kann zwar verlockend sein, die verschiedenen Gestaltungsoptionen und Möglichkeiten, die HTML-E-Mails zur Einbindung visueller Elemente bieten, zu nutzen – aber all das bringt nichts, wenn Ihre E-Mail dadurch zu lange zum Laden braucht.
Achten Sie bei der Gestaltung Ihrer HTML-E-Mail auf den Ladevorgang – vor allem, wenn jemand Ihre Nachricht morgens in der U-Bahn mit einer schwachen Datenverbindung öffnet.
Im Folgenden finden Sie ein paar Dinge, die Sie beachten können, um die Ladezeit zu verbessern:
Verwenden Sie Bilder sparsam
Auf diese Weise verstärken Sie die Botschaft, die Sie den Abonnenten und Abonnentinnen vermitteln wollen. Verwenden Sie immer einen Bildkompressor (wie compressor.io oder tinypng.com), um die Dateigröße so weit wie möglich zu reduzieren. Die meisten Bildkompressoren können die Dateigröße eines Bildes ohne Qualitätseinbußen erheblich reduzieren, sodass dieser zusätzliche Schritt die visuelle Integrität Ihrer E-Mail nicht beeinträchtigt.
Verwenden Sie Standard-Webschriftarten
Benutzerdefinierte Schriftarten eignen sich hervorragend, um eine Landing Page aufzupeppen – doch Ihrer E-Mail können sie eine zusätzliche Komplexitätsebene hinzufügen. Wie bereits erwähnt, gehen alle E-Mail-Clients unterschiedlich mit Stilelementen um. Und das gilt insbesondere für Schriftarten.
Um auf Nummer sicher zu gehen, sollten Sie Standard-Webschriftarten verwenden und überprüfen, ob der E-Mail-Client, den die meisten Ihrer Abonnenten und Abonnentinnen verwenden, eine bestimmte Schriftart unterstützt.
Versuchen Sie einen HTML-Minifier
Ein HTML-Minifier (wie Toptal und smallseotools.com) entfernt automatisch Code, der in einer HTML-Datei nicht benötigt wird. Sich wiederholende, zusätzliche Elemente werden entfernt, aber die eigentliche Darstellung Ihrer E-Mail sollte gleich bleiben (überprüfen Sie dies aber immer).
Jede Codezeile wirkt sich auf die Ladezeit einer E-Mail aus. Wenn Sie sich also die Zeit nehmen, überflüssigen Code zu entfernen, kann sich das positiv auf die Ladezeit auswirken.
Hier ist der Code, mit dem ich meine E-Mail-Vorlage erstellt habe. Sehen Sie, wie viel Junk-Code Smallseotools entfernt hat:
Quelle: Screenshot smallseotools.com
Das hat mich nicht nur davor bewahrt, unnötige Codezeilen zu importieren, sondern auch die Ladezeit der E-Mail insgesamt zu verbessern.
Quelle: Screenshot smallseotools.com
Konzentrieren Sie Ihre Nachricht auf ein einziges Ziel
Die beste Möglichkeit, die Ladezeit von E-Mails zu verkürzen, besteht darin, die Menge der Inhalte zu reduzieren. Dies mag offensichtlich erscheinen – aber zu viele Marketingfachleute versuchen, zu viele Inhalte in ihre E-Mails zu packen.
Das führt nicht nur zu einer unangenehmen Benutzererfahrung (niemand möchte einen Roman in E-Mail-Form lesen), sondern kann auch die Ladezeit in die Höhe treiben und die Benutzenden dazu bringen, Ihre E-Mail nicht weiterzulesen. Halten Sie es einfach – Ihre Nutzer und Nutzerinnen werden es Ihnen danken.
4. Planen Sie (so weit wie möglich) Unstimmigkeiten bei den Endbenutzenden ein.
Die Bildschirmgröße und der E-Mail-Client sind nicht die einzigen Faktoren, die die Darstellung Ihrer HTML-E-Mail im Posteingang Ihrer Abonnenten und Abonnentinnen beeinflussen können.
Elemente wie die Version des E-Mail-Clients, das Betriebssystem, die individuellen Benutzereinstellungen, die Sicherheitssoftware und die Frage, ob Bilder automatisch geladen werden, können sich alle auf das Laden Ihrer E-Mail auswirken.
Wie Sie sich anhand dieser umfangreichen Liste wahrscheinlich denken können, würde der Versuch, alle diese Faktoren zu berücksichtigen (jedes Mal, wenn Sie eine E-Mail senden), wahrscheinlich ausreichen, um Sie dazu zu bringen, Ihren Computer quer durch den Raum zu werfen. Aber Sie müssen diesen Variablen nicht völlig hilflos gegenüberstehen – Sie müssen nur ein wenig vorausplanen.
Ziehen Sie in Erwägung, eine Webpage-Version Ihrer E-Mail zu erstellen
Dies ist sozusagen eine Art Ausfallsicherung für Ihre E-Mail.
Wenn Ihre liebevoll gestaltete E-Mail aus irgendeinem Grund – beispielsweise wegen eines der vielen oben genannten Faktoren – beim Öffnen durch einen Abonnenten oder eine Abonnentin ein absolutes Chaos darstellt, hat dieser oder diese zumindest die Möglichkeit, auf „Als Webseite anzeigen“ zu klicken, um die E-Mail so zu sehen, wie Sie es beabsichtigt haben.
Da Stilelemente in Webbrowsern viel konsistenter dargestellt werden als in E-Mail-Clients, haben Sie viel mehr Kontrolle über die Website-Version Ihrer Nachricht. In HubSpot gibt es eine Option, die Sie aktivieren können, um automatisch eine Website-Version zu erstellen.
Erstellen Sie eine reine Text-Version Ihrer E-Mail
Eine reine Text-Version ist genau das, wonach es klingt – eine alternative Variante Ihrer HTML-E-Mail, die komplett im Klartext dargestellt wird. Das Hinzufügen einer reinen Textversion Ihrer HTML-E-Mail ist wichtig, da einige E-Mail-Clients und Benutzereinstellungen HTML nicht laden können (oder wollen).
Ist dies der Fall, sucht der Client nach einer alternativen Version Ihrer HTML-E-Mail im Klartext, die er für den Benutzenden lädt. Ist eine solche nicht vorhanden, könnte dies dem E-Mail-Server des Empfangenden signalisieren, dass dieser sich bei Ihrer Nachricht um Spam handelt – oder um eine potenziell gefährliche Nachricht.
Die meisten E-Mail-Tools wie HubSpot stellen automatisch eine Klartextversion bereit, die angezeigt wird, wenn der E-Mail-Server des Empfängers oder der Empfängerin dies verlangt. Hier sehen Sie ein Beispiel, wie es auf dem Desktop aussieht:
Wenn Sie jedoch eine HTML-E-Mail von Grund auf neu programmieren, müssen Sie eine sogenannte Multipart-MIME-Nachricht erstellen.
Eine mehrteilige MIME-Nachricht ist eine E-Mail, die sowohl eine reine Text- als auch eine HTML-Version derselben E-Mail enthält. Die reine Textversion wird angezeigt, wenn der E-Mail-Client oder das Sicherheitssystem des Empfangnden keine HTML-E-Mails zulässt.
Dieser Vorgang erfordert fortgeschrittene Programmierkenntnisse, weshalb ich in diesem Fall empfehle, mit einem Entwickler oder einer Entwicklerin zusammenzuarbeiten.
Stellen Sie sicher, dass Ihre E-Mail auch dann noch Sinn macht, wenn die Bilder nicht geladen werden
Einige Nutzende haben das automatische Laden von Bildern deaktiviert, was bedeutet, dass sie Ihre E-Mail ohne Bilder sehen, wenn sie sie öffnen.
Verlassen Sie sich daher nicht ausschließlich auf Bilder, um die Bedeutung Ihrer Nachricht zu vermitteln und fügen Sie den Bildern zwingend einen Alt-Text hinzu. Der Alt-Text wird auch dann geladen, wenn die Bilder nicht geladen werden, sodass Ihre Abonnenten und Abonnentinnen eine allgemeine Vorstellung davon bekommen können, was die Bilder beinhalten.
5. Führen Sie gründliche Tests durch.
Schließlich müssen Sie Ihre HTML-E-Mails in jeder Phase der Entwicklung testen, um sicherzustellen, dass sie auf verschiedenen E-Mail-Clients, Betriebssystemen und Gerätetypen funktionieren.
Warten Sie nicht bis zum Ende des Prozesses, um Ihre E-Mail zu testen: Das Testen während des Prozesses ist der beste Weg, um Inkonsistenzen zwischen verschiedenen E-Mail-Clients zu erkennen und sicherzustellen, dass Sie einheitliche Erfahrungen für Ihre Empfänger und Empfängerinnen schaffen.
Einige E-Mail-Tools (z. B. HubSpot) bieten In-App-Tests in ihren E-Mail-Buildern an, um den Prozess zu vereinfachen.
Wenn Sie von Grund auf neu arbeiten, können Sie ein Tool wie HTML Email Check verwenden, um eine bessere Vorstellung davon zu bekommen, wie Ihre E-Mail in verschiedenen E-Mail-Clients und auf Geräten aussehen wird.
Mit demselben Code wie zuvor habe ich die Darstellung der E-Mail auf verschiedenen Geräten überprüft. So konnte ich mir ein besseres Bild davon machen, was meine Abonnenten sowie Abonnentinnen sehen – und ich musste nicht einmal auf die kostenpflichtige Version upgraden.
Quelle: Screenshot HTML Code Check
Kostenlose E-Mail-Marketing-Software
Ohne Kreditkarte verfügbar. Einfach loslegen.
- Öffnungs- und Klickraten Ihrer E-Mails steigern
- E-Mails automatisch für die Lesenden anpassen
- Alles selbständig erledigen
- KI-Funktionen zum Schreiben von Inhalten
Einfache und kostenlose HTML-E-Mail-Vorlagen
Es gibt eine überwältigende Anzahl von HTML-E-Mail-Vorlagen im Internet, wie Sie unten sehen können. Sie unterscheiden sich in Qualität, Reaktionsfähigkeit und Preis.
Ich habe eine Auswahl kostenloser HTML-E-Mail-Vorlagen zusammengestellt, die ein ansprechendes Benutzererlebnis bieten. Bitte lesen Sie sich vor der Verwendung die Bedingungen für jede einzelne Vorlage durch.
1. HTML-E-Mail-Vorlage für Produktwerbung von HubSpot
Ganz gleich, ob Sie ein neues Produkt auf den Markt bringen oder einfach nur für Ihr bestehendes Angebot werben möchten: Diese E-Mail-Vorlage ist ein hervorragender Startpunkt.
Diese Vorlage, die in der kostenlosen Marketing-Hub-Version enthalten ist, bietet viel Raum für individuelle Anpassungen. Mit einem intuitiven Drag-and-Drop-Editor können Sie ganz einfach Bilder, Text und Schaltflächen hinzufügen. Sie können außerdem sicher sein, dass die von Ihnen entworfenen Vorlagen auf jedem Gerät vollständig responsiv sind.
Der Hauptvorteil dieser Vorlage ist, dass sie mit allen anderen Marketing-Hub-Tools gebündelt ist. Außerdem stehen Ihnen weitere Vorlagen zur Auswahl – Sie müssen sich nicht auf diese Option beschränken.
Der Drag-and-Drop-E-Mail-Editor ist ein weiteres fantastisches Plus.
Pro-Tipp: Glücklicherweise bietet HubSpot vorgefertigte E-Mail-Designs, die Sie kopieren und direkt in Ihre Vorlage einfügen können. Wenn Sie jedoch tiefer in die HTML-Codierung einsteigen möchten, gibt es zahlreiche Videos und Tutorials, die Sie durch die Grundlagen der Gestaltung von HTML-E-Mails führen. Beispielsweise das folgende:
2. HTML-E-Mail-Vorlage für Unternehmensnachrichten von Campaign Monitor
Quelle: Screenshot Campaign Monitor
Wenn Sie Ihrer Kundschaft Unternehmensnachrichten zukommen lassen wollen, ist dies eine hervorragende Vorlage. Sie ist sehr bildlastig und eignet sich daher hervorragend für moderne Marken oder Fashion Brands.
Außerdem ist es mit dem E-Mail-Tool von Campaign Monitor verknüpft, das ab 11 US-Dollar pro Monat erhältlich ist und weitere kostenpflichtige Tarife bietet (es gibt auch eine kostenlose Testversion).
Mir persönlich gefällt, dass diese moderne Vorlage so raffiniert und minimalistisch ist. Die dezente Farbpalette und das schlichte Design machen sie zu einer vielseitigen Option für viele Branchen und Zwecke. Zudem wurde sie auf verschiedenen E-Mail-Clients und Geräten getestet, um eine konsistente Benutzererfahrung auf allen Plattformen zu gewährleisten.
Pro-Tipp: Ich habe festgestellt, dass die Verwendung einer Vorlage allein nicht ausreicht: Sie müssen sie auch an Ihre Abonnenten und Abonnentinnen anpassen. Mein persönlicher Lieblings-Hack ist das Hinzufügen einer Unternehmens-URL zum Tool Campaign Monitor, damit es eine Markenvorlage erstellt.
3. Willkommens-HTML-E-Mail-Vorlage von Unlayer
Quelle: Screenshot Unlayer
Unlayer ist ein E-Mail-Marketing-Tool, das sich hauptsächlich auf das E-Mail-Design konzentriert. Sein Drag-and-Drop-Editor macht die Bearbeitung der Vorlagen zu einem Kinderspiel. Die obige Vorlage gefällt mir wegen ihrer Struktur und Anpassungsfähigkeit.
Obwohl diese Vorlage für ein Fitnessunternehmen entworfen wurde, können Sie sie leicht für Ihre eigenen Zwecke anpassen.
Diese saubere, subtile Vorlage ist eine großartige Möglichkeit, die von Ihrem Team erstellten Inhalte zu zeigen und Abonnenten sowie Abonnentinnen mit Ihren neuesten Produkten oder Blogbeiträgen in Verbindung zu bringen.
Das Design bietet zwei vollständig responsive Spalten mit mehreren Farbschemaoptionen und Platz am oberen Rand, um einen CTA hervorzuheben.
Pro-Tipp: Unlayer lässt sich in viele E-Mail-Marketingplattformen wie MailChimp und HubSpot integrieren. Das bedeutet, dass Sie Ihre Vorlage einfach exportieren können, sobald Sie mit der Gestaltung von HTML-E-Mails fertig sind.
4. Minimalistische Willkommens-HTML-E-Mail-Vorlage von MailBakery
Quelle: Screenshot MailBakery
Dieses einfache, vollständig responsive Design ist der Beweis dafür, dass weniger manchmal wirklich mehr ist. Es nutzt den Leerraum optimal aus und lenkt den Fokus auf Ihre Worte und visuellen Elemente. Ohne gestalterische Ablenkungen können Ihre Inhalte wirklich glänzen – auf jedem Gerät.
Diese Vorlage ist im MailBakery-Shop für E-Mail-Vorlagen erhältlich. Ich finde sie toll, weil man sie einfach herunterladen und in sein bevorzugtes Tool hochladen kann. Wohingegen Sie bei anderen Vorlagen die Software des Anbieters verwenden müssen, um auf die Vorlagen zugreifen zu können. Ich würde diese Vorlage empfehlen, wenn Sie mit HTML-Dateien umgehen können und mit dem Upload-Prozess Ihres Tools vertraut sind.
Pro-Tipp: Bei jeder E-Mail-Vorlage von MailBakery können Sie sicher sein, dass sie auf verschiedenen Plattformen einwandfrei angezeigt wird, da sie auf 40 E-Mail-Clients getestet wurde. Ihre Nachricht wird immer noch wirksam sein, egal ob Ihr Abonnent oder Ihre Abonnentin Outlook, Gmail oder einen anderen E-Mail-Anbieter verwendet.
5. Kostenlose HTML-E-Mail-Vorlagen von Bee Free
Quelle: Screenshot Bee Free
Ich konnte mich nicht für eine Vorlage aus dem Bee Free-Marktplatz entscheiden, also habe ich beschlossen, stattdessen seine gesamte Bibliothek zu empfehlen. Diese Sammlung kostenloser, quelloffener Vorlagen ist komplett responsiv und wurde mit gängigen E-Mail-Clients getestet.
Sie können sie auf der Bee Free-Plattform bearbeiten und erweitern, danach die HTML-Datei auf Ihr lokales Laufwerk exportieren und sie in Ihr bevorzugtes E-Mail-Marketing-Tool hochladen.
Diese Vorlagen sind eine ideale Option, wenn Sie eine besser gestylte, ausgefeilte Ausgangsbasis wünschen, aber dennoch in der Lage sein möchten, das Design an die Bedürfnisse Ihres Unternehmens anzupassen.
Jede Vorlage ist in mehreren Formaten für verschiedene Marketingzwecke verfügbar, z. B. für Transaktions-E-Mails, NPS-Erfassung und die Wiederansprache von E-Mail-Abonnenten.
Pro-Tipp: Wenn Sie die Pro-Version von BeeFree verwenden, können Sie direkt in Ihr E-Mail-Marketingprogramm exportieren, was weniger Probleme mit sich bringt.
6. Store Sale HTML-Email-Vorlage von Campaign Monitor
Quelle: Screenshot Campaign Monitor
Dieses schlanke, responsive Design von Campaign Monitor eignet sich perfekt für den Versand eines Rabattcodes – aber es könnte auch als stilvolle Möglichkeit dienen, Ihre neuesten Produkte vorzustellen.
Mir gefallen die klare und aufmerksamkeitsstarke CTA sowie der Platz, der für weitere Informationen zur Verfügung steht.
Diese Vorlage kann kostenlos verwendet werden, sofern Sie sich auf der Campaign Monitor-Plattform anmelden. Es lohnt sich auch, einen Blick auf die gesamte Bibliothek der responsiven E-Mail-Vorlagen von Campaign Monitor zu werfen.
Pro-Tipp: Wenn Sie einen speziellen Code benötigen, können Sie lernen, wie Sie eine Vorlage in Ihrem bevorzugten HTML-Editor erstellen und sie in Campaign Monitor importieren. Mit der Vorlagensprache können Sie eine Vorlage mit veränderbaren Abschnitten entwerfen und diese dann für eine E-Mail auswählen und bearbeiten.
7. Stilvolle HTML-E-Mail-Vorlage von ActiveCampaign
Quelle: Screenshot ActiveCampaign
Diese E-Mail-Vorlage von ActiveCampaign ist modern und auf den Punkt gebracht – perfekt, um Ihr Unternehmen oder Ihre Produkte vorzustellen.
Die Hero-Sektion bietet ausreichend Platz für ein Bild und einen CTA. Weiter unten können Sie Ihre Lesenden auffordern, sich weitere Produkte anzuschauen, was Ihnen eine zweite Chance gibt, sie zu konvertieren.
Um diese kostenlose HTML-E-Mail-Vorlage zu verwenden, müssen Sie sich für eine kostenlose Testversion von ActiveCampaign anmelden. Das E-Mail-Tool von ActiveCampaign kostet ab 49 US-Dollar pro Monat und umfasst drei Nutzende, sodass diese Vorlage besonders gut geeignet ist, wenn Ihr E-Mail-Marketingteam aus mehreren Personen besteht.
Pro-Tipp: Möchten Sie, dass Ihre Kundschaft Inhalte, die alle paar Minuten aktualisiert werden, in Echtzeit sehen? Sie können einen Code, der Ihnen von Drittanbieter-Tools zur Verfügung gestellt wird, in Ihre ActiveCampaign-HTML-E-Mail-Vorlage für deren Online-HTML-Code-Editor einfügen.
8. Entschuldigungs-HTML-E-Mail-Vorlage von Stripo Email
Quelle: Screenshot Stripo Email
Es ist nie lustig, die Erwartungen eines Kunden bzw. einer Kundin nicht zu erfüllen. Aber noch weniger lustig ist es, Ihre Kundschaft im Ungewissen zu lassen. Mit dieser kostenlosen HTML-E-Mail-Vorlage von Stripo, einem E-Mail-Tool, können Sie sich kurz und bündig entschuldigen. Der niedliche Cartoon ist ein Pluspunkt, aber Sie können das Bild auch jederzeit austauschen.
Besonders gut gefällt mir, dass Sie mit dieser Vorlage direkt in der E-Mail um eine Rückmeldung bitten können. Dies macht es dem Empfänger bzw. der Empfängerin leicht, Ihnen mitzuteilen, was er oder sie von der bisherigen Interaktion mit Ihrem Unternehmen hält.
Um diese Vorlage zu verwenden, müssen Sie sich nur bei der kostenlosen Version von Stripo anmelden, die Ihnen vier E-Mail-Exporte bietet.
Pro-Tipp: Sie können die generierten Vorlagen auch verwenden, um Brand Guidelines zu entwickeln, mit denen Sie schneller markenkonforme E-Mails für Ihre Kampagnen schreiben können. Diese Guidelines werden mit allen Desktop- und mobilen E-Mail-Layouts geliefert und ermöglichen es Ihnen, alle erforderlichen Designelemente und Einstellungen in einem einfach zu verwendenden Formular zu speichern.
9. Heldenbild Kostenlose HTML-E-Mail-Vorlage von ZURB
Quelle: Screenshot ZURB
ZURB ist ein Anbieter von E-Mail-Vorlagen, der eine Reihe von kostenlosen Templates zum Herunterladen für jedermann erstellt hat. Die hier gezeigte Vorlage enthält eine klare Überschrift, ein Hero-Bild und einen blau hervorgehobenen CTA.
Ich finde es toll, dass es eine Seitenleiste für zusätzliche Links gibt. Diese Vorlage eignet sich gut für Marken, die auf Newsletter angewiesen sind.
Sie sollten diese Vorlage stark an Ihre Markenfarben und -schriften anpassen, damit sie sich mehr wie „Sie“ anfühlt. Ansonsten handelt es sich um eine fantastische, toolunabhängige Option. Laden Sie die Vorlage einfach herunter und laden Sie sie in Ihre bevorzugte E-Mail-Marketing-Software hoch.
Profi-Tipp: Denken Sie daran, dass bei HTML-E-Mails jedes CSS-Element inline sein muss. ZURB hält die CSS-Elemente getrennt, um die Bearbeitung zu erleichtern. Wenn Sie Ihre E-Mail versenden, sollten Sie ein CSS-Tool verwenden wie z. B. Premailer oder MailChimp.
10. Passwort-zurücksetzen-HTML-E-Mail-Vorlage von Foundation Framework
Quelle: Screenshot Foundation Framework
Eine E-Mail zum Zurücksetzen des Passworts muss nicht aufwendig sein – und diese HTML-E-Mail-Vorlage von Foundation Framework (auch bekannt als ZURB) zeigt, wie’s geht.
Sie bietet Platz für Ihr Logo oder eine hübsche Grafik sowie einen Platzhaltertext, den Sie so lassen können, wie er ist, wenn Sie möchten.
Mir gefällt diese Vorlage besonders gut, weil sie schon ohne Anpassung so gut aussieht. Sie müssen nur die Farbe der Schaltfläche in eine Ihrer Markenfarben ändern – fertig. Außerdem können Sie sie mit jedem Tool verwenden.
Pro-Tipp: Sie können versuchen, einige Änderungen an den Vorlagen vorzunehmen oder Sie können sie herunterladen und eine Vorschau anzeigen, um zu sehen, wie die Funktionen implementiert wurden, indem Sie sich den Quellcode ansehen. Sie werden feststellen, dass das Foundation-Tag oben in jeder Vorlage enthalten ist und angibt, woher die Vorlage stammt.
Erstellen Sie HTML-E-Mails, um Ihre Abonnentenzahl zu erhöhen
HTML-E-Mails sind eine ansprechende Methode, um über Ihr Unternehmen zu informieren und Ihre Abonnenten sowie Abonnentinnen dazu zu bringen, immer wieder gern zurückzukommen.
Mit den Tipps und Vorlagen, die ich Ihnen zur Verfügung gestellt habe, sind Sie auf dem besten Weg, schöne und funktionale HTML-E-Mails zu erstellen – ohne eine einzige Zeile Code schreiben zu müssen.
Titelbild: HubSpot
