Eine ansprechende HTML E-Mail ist die halbe Miete für eine erfolgreiche E-Mail-Marketing-Kampagne.
Grundsätzlich können Newsletter mit vielen verschiedenen Programmen designt und anschließend in HTML umgesetzt werden. Für das Design eignet sich im Prinzip jedes Bildbearbeitungs- oder Layout-Tool. Am einfachsten geht die Gestaltung jedoch mit einer professionellen E-Mail Software.
In diesem Artikel erfährst du, wie du überzeugende HTML E-Mails erstellst und welche Tipps du beim Gestalten deines HTML Newsletters mit den gängigsten Tools beachten solltest.
Inhaltsverzeichnis
Was ist eine HTML E-Mail?
Eine HTML E-Mail ist eine E-Mail, die mithilfe von HTML – einer Programmiersprache für Webseiten – gestaltet wird. HTML E-Mails zeichnen sich durch Designs, Bilder, Links und mehr aus und ähneln vom Design und Aufbau her oft Websites. Das Ziel von HTML E-Mails ist es, Inhalte ansprechend zu präsentieren. Die allermeisten Newsletter sind HTML E-Mails.
Dem gegenüber stehen reine Text-E-Mails. Diese bestehen, wie der Name schon sagt, nur aus einfachem Text, ohne Bilder oder Formatierungen. Solche E-Mails sind schlichter und visuell weniger ansprechend als HTML E-Mails. Sie werden meist in formalen, persönlichen oder technischen E-Mails verwendet.
Welche Vorteile haben HTML E-Mails?
Der wohl größte Vorteil einer HTML E-Mail ist das Design. Besonders im Marketing ist ein ansprechendes E-Mail Design unverzichtbar, denn es kann darüber entscheiden, ob deine Mail gelesen wird oder nicht. Bei reinen Text-E-Mails sind die Gestaltungsmöglichkeiten sehr eingeschränkt.
HTML E-Mails kannst du hingegen ganz nach deinem Geschmack entwerfen und sie an deinen Unternehmensauftritt anpassen. Mit Elementen wie Bildern, GIFs, Buttons und Co. setzt du deine Produkte oder Dienstleistungen in Szene. Du kannst auch CTA Buttons oder Links einfügen, die Leser:innen direkt auf deine Website leiten.
Darüber hinaus kannst du in einer HTML E-Mail verschiedene Layouts nutzen, um Inhalte in Abschnitte zu gliedern und so die Lesbarkeit zu verbessern. Wichtige Informationen können hervorgehoben werden, sodass sie direkt ins Auge fallen. All das trägt dazu bei, dass deine Empfänger:innen deine E-Mails gerne lesen und damit interagieren.
5 Dinge, die du bei HTML E-Mails beachten solltest
Hast du beim Begriff HTML E-Mail einen kleinen Schock bekommen? Keine Sorge, das Erstellen solcher Mails ist viel leichter, als du denkst! Aber warum solltest du überhaupt Newsletter im HTML-Format erstellen?
Newsletter sind die perfekte Möglichkeit, direkt mit deinen Empfänger:innen zu kommunizieren und eine langfristige und vertrauensvolle Beziehung aufzubauen.
Ein hübsches E-Mail Design hilft dir dabei, die Aufmerksamkeit auf dein Unternehmen und deine Produkte zu lenken. Aber ohne Ziel kein Erfolg – überleg dir daher unbedingt vorher, was du deinen Empfänger:innen mitteilen möchtest. Stell dir dazu folgende Fragen:
- Was soll dein Newsletter bewirken?
- Planst du, Gutscheine oder Rabattaktionen einzusetzen?
- Wie ist dein Bild-Text-Verhältnis?
- Wie viele Inhalte möchtest du an welcher Stelle platzieren?
Wir haben dir im Folgenden 5 weitere Tipps zusammengefasst, mit denen du E-Mail Newsletter gestaltest, die deine Abonnent:innen begeistern.
1. Setze auf eine professionelle Software
Gleich zu Beginn möchten wir dir eines ans Herz legen: Deine HTML E-Mail in einem Grafik-Tool wie Photoshop oder InDesign zu gestalten und anschließend selbst zu programmieren, stellt in den allermeisten Fällen einen unnötigen Aufwand dar.
In einer professionellen E-Mail Marketing Software wie Brevo kannst du deinen Newsletter direkt in einem übersichtlichen Drag-and-Drop Editor designen und versenden. Beim Versand wird der Newsletter automatisch in valides HTML umgewandelt und kommt so bei deinen Empfänger:innen genau so an, wie du dir das wünschst.
Noch einfacher und schneller geht das Gestalten von HTML E-Mails mit Newsletter-Vorlagen, die du individuell anpassen und immer wieder verwenden kannst. Bei Brevo hast du beispielsweise Zugriff auf über 40 Vorlagen – alle davon kostenlos.
Und das Beste? Unsere Newsletter-Vorlagen setzen keinerlei Programmier-, HTML- und CSS-Kenntnisse voraus. Das Einzige, was du benötigst, ist ein internetfähiges Gerät, auf dem du den Newsletter gestalten kannst.
Hier ein kleiner Einblick in unsere Vorlagengalerie:

Noch mehr nützliche E-Mail-Vorlagen findest du in diesem Artikel.
2. Werde persönlich
Anonymes Massen-Mailing? Das war einmal. Sprich deine Empfänger:innen lieber so individuell und persönlich wie möglich an.
Unsere Vorlagen beinhalten sogenannte Personalisierungsplatzhalter und sind damit vollständig individualisierbar. Personalisierungen können in einzelnen Stellen innerhalb des Templates oder für gesamte Newsletter-Bausteine eingebaut werden.
Begeistere deine Empfänger:innen nicht nur mit einer persönlichen Namensansprache, sondern auch mit individuellen Produktempfehlungen oder maßgeschneiderte Texte. Sobald du den Newsletter versendest, wird der Personalisierungsplatzhalter automatisch mit den richtigen Daten gefüllt.
3. Gehe mit der Zeit: Mobile Optimierungen
Immer mehr Menschen rufen ihre E-Mails unterwegs vom Handy ab. Sei ehrlich: Wann hast du das letzte Mal in deiner Freizeit vor einem Desktop-Computer gesessen und E-Mails gelesen? Auf dem Weg zur Arbeit, in der Mittagspause oder an der Supermarktkasse – E-Mails lesen sich am praktischsten unterwegs.
Ist deine HTML-E-Mail nicht mobilfähig, kann dir das große Steine in den Weg legen. Neben der Gefahr, dass sie falsch dargestellt wird, kann es auch passieren, dass Inhalte gänzlich verschwinden. Das ist nicht nur für den Moment unpraktisch, sondern wirkt auch langfristig demotivierend für deine Empfänger:innen. Dein nächster Newsletter wird möglicherweise überhaupt nicht mehr geöffnet.
Ob Smartphone, Tablet oder Desktop – um deinen Leser:innen heute gerecht zu werden, benötigst du ein Newsletter Design, das die Darstellung automatisch an die Bildschirmgröße jedes Endgeräts anpasst.
Achte daher darauf, dass du responsive E-Mail-Vorlagen verwendest. Diese passen sich automatisch an die Breite des jeweiligen Endgeräts an. Glücklicherweise bieten die meisten professionellen Newsletter Tools – Brevo inbegriffen – bereits responsive Vorlagen an, die du ganz nach deinem Gusto bearbeiten kannst. Zudem sind unsere Templates in verschiedensten E-Mail Clients getestet worden, um eine optimale Darstellung sicherzustellen.
4. Befolge das 1x1 des Newsletter Designs
Deiner Kreativität freien Lauf zu lassen, ist immer die beste Option. Halte dich jedoch trotzdem an einige Newsletter-Design-Grundlagen, um dein responsives HTML E-Mail Template ansprechend zu gestalten. Sieh diese Vorlagen als eine Art Grundrezept an, das du zum Schluss ganz nach deinem Geschmack verfeinerst.
- Safety first: Setze einen gut sichtbaren Link zur Webversion deines Newsletters, falls es doch zu Darstellungsproblemen kommen sollte.
- Wer schreibt? Setze dein Logo gut sichtbar an den Anfang der Vorlage, damit deine Empfänger:innen sofort wissen, von wem der Newsletter stammt.
- Übersichtlich und strukturiert: Weniger ist oft mehr. Überfordere deine Empfänger:innen nicht mit zu vielen Elementen wie Bilder, GIFs, Spalten, Logos, Call to Actions und Texten in den verschiedensten Größen und Schriftarten. Außerdem gilt: Je mehr Inhalte integriert werden, desto mehr Whitespace – also Leerraum – solltest du verwenden.
- Neugierig auf mehr: Das Teaser-Bild entscheidet, ob deine Leser:innen Lust haben, im Newsletter weiterzuscrollen oder nicht. Die Aufmerksamkeit fängst du am besten mit einem thematisch passenden Bild ein. Achte grundsätzlich auf hochwertige Grafiken! Verwende lieber weniger, aber dafür qualitativ gute Bilder. Wir empfehlen einen Bildanteil von ca. 20-30% und eine Bildbreite von maximal 600 Pixel, um lange Ladezeiten und Darstellungsprobleme zu vermeiden.
Noch mehr Tipps für den perfekten Newsletter-Aufbau findest du hier.
5. Verwende dein Corporate Design
Die Seriosität und Professionalität von dir als Unternehmen sollte immer im Vordergrund stehen. Behalte beim Erstellen deiner HTML E-Mail daher immer dein Corporate Design, also deine Unternehmensfarben und -schriften, im Hinterkopf. Ein HTML im Unternehmens-Design sorgt nicht nur für einen einheitlichen Markenauftritt, sondern schafft außerdem einen Wiedererkennungswert.
Noch mehr Tipps und Tricks für das perfekte Newsletter Design gibt es hier.
So erstellst du HTML E-Mails mit Photoshop, InDesign und Illustrator
Wie bereits gesagt: Der einfachste, schnellste und effizienteste Weg, um schöne HTML E-Mails zu gestalten, ist die Nutzung eines professionellen E-Mail Marketing Software. Aber natürlich kannst du im Prinzip auch jedes beliebige Bildbearbeitungs- oder Layout-Tool dafür benutzen und anschließend in HTML umsetzen.
Wir zeigen dir im Folgenden, wie du HTML Newsletter mit den gängigsten Tools erstellst.
HTML Newsletter mit Photoshop erstellen
Um einen HTML Newsletter in Photoshop zu erstellen, solltest du zuerst ein neues Dokument mit einer etwas größer bemessenen Breite als der fertige Newsletter anlegen. Auf diese Weise kannst du den Hintergrund des Newsletter besser berücksichtigen.
Es bietet sich eine Breite von ca. 800px an. Die Länge kann frei gewählt werden, für den Anfang empfehlen sich ca. 1000px. Eine Auflösung von 72dpi ist für das Newsletter-Dokument ausreichend. Als Farbmodus sollte unbedingt RGB gewählt werden.
Innerhalb dieses Dokuments erstellst du anschließend eine Box mit 600px Breite und fügst diese zentriert ein. Dies wird dein eigentlicher Newsletter. Für eine optimale Lesbarkeit sollte der Newsletter-Hintergrund weiß sein. Den Hintergrund füllst du zur Abhebung am besten mit einem hellen Grau.
Von oben nach unten kannst du deinen Newsletter nun folgendermaßen aufbauen:
- Ganz oben befinden sich die Inhalts-Vorschau (Preview) und der Link zur Webversion. Dieser sollte in jedem Newsletter enthalten sein. Er ist die Absicherung für den Fall, dass Nutzer:innen Bilder nicht laden oder den Newsletter aus anderen Gründen lieber im Browser ansehen möchten.
- Anschließend kannst du ein Teaser-Bild einfügen. Passe das Bild einfach direkt in Photoshop an das Format des Newsletters an. Auch Texte können gleich in Photoshop eingefügt werden.
- Um den Hauptteil zu erstellen, fügst du unterhalb des Headers ein neues Rechteck mit 600px Breite ein. Hier kannst du nun Texte und Bilder wie gewünscht einfügen. Um weitere Inhalte einzufügen, kopiere den ersten Inhaltsblock und fügen ihn unten an. Mithilfe von Hilfslinien kannst du die einzelnen Blöcke ausrichten und die Abstände prüfen. Achte auf ausreichende Abstände, um für eine bessere Lesbarkeit zu sorgen.
- Unterhalb des Hauptteils kannst du, falls gewünscht, noch zum Design passende Social Media Buttons einfügen.
- An den Schluss jedes Newsletters gehört ein Footer. Nach deutschen Recht muss jede werbliche E-Mail ein Impressum bzw. einen Link zum Impressum sowie einen Abmeldelink enthalten. Diese lassen sich im Footer gut unterbringen. Dafür kann ruhig eine unauffällige, kleinere Schriftart verwendet werden, solange diese immer noch lesbar und leicht klickbar ist.
HTML Newsletter mit InDesign erstellen
Wenn du in InDesign einen HTML Newsletter erstellen möchtest, legst du zunächst ein neues Dokument mit einer Seitenbreite von 600px an. Die Seitenlänge kannst du selbst auswählen. Speichere die Seite als eigenes Format und öffne sie direkt.
- Nun kannst du das Rechteck-Tool nutzen, um drei direkt aneinander liegende Rechtecke zu erstellen, die über die gesamte Breite der Seite gehen. Daraus werden Header, Inhaltsteil und Footer deines Newsletters.
- Im Header kannst du nun ein Bild deiner Wahl einfügen. Platziere dein Bild und füge es proportional ein. Beachte, dass beim Newsletter Design mit InDesign alle verwendeten Bilder online gehostet werden müssen, damit sie auch bei Leser:innen sichtbar sind.
- Im Hauptteil solltest du einen weißen Hintergrund einfügen, um für eine bessere Lesbarkeit zu sorgen. Hier kannst du Text nach Wahl mithilfe des Text-Tools eingeben. Achte darauf, einen Abstand zum Seitenrand einzustellen, damit der Text nicht direkt am Rand liegt.
- Im Newsletter Footer kann das Impressum und ein Abmeldelink enthalten sein. Ein funktionierender Abmeldelink in jedem Newsletter ist in Deutschland Pflicht, damit sich Empfänger:innen jederzeit vom Newsletter abmelden können.
Hast du einen HTML Newsletter mit InDesign erstellt, gibt es die Option, den Newsletter direkt aus InDesign als HTML zu exportieren. Dies ist jedoch nicht empfehlenswert. Das von InDesign generierte HTML ist nicht für Newsletter optimiert. Die Darstellung wird also höchstwahrscheinlich nicht deinen Vorstellungen entsprechen. Wenn du deinen HTML Newsletter trotzdem in InDesign erstellen möchtest, programmiere ihn nach der Gestaltung am besten selbst in validem HTML.
HTML Newsletter mit Illustrator erstellen
Auch das Zeichenprogramm Illustrator eignet sich prinzipiell für Webdesign und die Newsletter-Gestaltung. Damit können zwar nur schwierig ganze Newsletter Layouts erstellt werden, aber es eignet sich gut zum Design von Newsletter-Elementen, die später im HTML Newsletter genutzt werden können. Zum Beispiel lassen sich mit Illustrator Hintergründe für den Newsletter generieren.
Für die eigentliche Erstellung des Newsletters sollte anschließend besser auf ein anderes Tool zurückgegriffen werden. Zum Erstellen eines HTML Newsletters ist das Programm eher ungeeignet.
So programmierst du deinen HTML Newsletter
Nun geht es an den komplizierteren Teil: Das Programmieren deines HTML Newsletters. Einen HTML Newsletter zu programmieren, unterscheidet sich nämlich grundsätzlich von der Gestaltung einer Website. Im Unterschied zum Webdesign mit HTML sind CSS-Styles in Newslettern eher problematisch. Allerdings wird Inline-CSS von den meisten E-Mail Clients erkannt und kann genutzt werden. Zur Newsletter-Gestaltung wird häufig auf HTML-Tabellen zurückgegriffen.
So funktioniert die Programmierung eines HTML Newsletters Schritt für Schritt:
- Bilder ablegen. Speichere alle Bilder, die du im Newsletter verwendest, separat ab.
- Neue HTML-Datei anlegen. Dazu kannst du entweder ein visuelles Tool wie Dreamweaver nutzen oder in einem Texteditor wie Notepad von Grund auf anfangen.
- Header erstellen. Lege zunächst eine Tabelle mit der Breite deines Newsletters an. In diesem Beispiel gehen wir von einer Breite von 600px aus. Diese Tabelle kannst du nun nach deinen Wünschen formatieren und deine Inhalte einfügen. Bei allen Bildern in deinem Newsletter solltest du unbedingt ALT-Texte (Alternativtexte) eintragen. So bleibt deine E-Mail lesbar, auch wenn bei deinen Empfänger:innen keine Bilder geladen werden.
- Inhalte erstellen. Hier arbeitest du ebenfalls mit Tabellen. Zwischen verschiedenen Inhaltselementen solltest du mit Cellpaddings arbeiten, um die Lesbarkeit zu verbessern.
- Footer erstellen. Auch im Footer nutzt du Tabellen. Wenn mehrere Bilder nebeneinander eingefügt werden sollen, kannst du dies über Columns umsetzen.
Ist das Programmieren geschafft, geht es an den Versand deiner HTML E-Mail. Dafür reicht ein normaler, kostenloser E-Mail-Anbieter wie Gmail oder Outlook leider nicht aus. Die größte Hürde ist meist die niedrige Zustellbarkeit: Versendest du im großen Stil E-Mails mit solchen Programmen, ist die Wahrscheinlichkeit hoch, dass sie im Spam-Ordner deiner Empfänger:innen landen. Deshalb solltest du für den Versand deiner HTML E-Mails am besten eine professionelle E-Mail Marketing Software verwenden. Die meisten dieser Programme verfügen nämlich über Verfahren, die sicherstellen, dass deine E-Mails auch wirklich im Posteingang deiner Kontakte ankommen.
Erfahre in unserem Artikel alles Wichtige über eine erfolgreiche Newsletter-Zustellbarkeit.
Nachteile der Newsletter-Erstellung mit Photoshop und Co.
Das Erstellen von HTML E-Mails mit Tools wie Photoshop liegt vor allem dann nahe, wenn du dich bereits gut damit auskennst. Auch für den Anfang bieten diese Programme einige Vorteile; so kannst du dich zuerst dem Design und danach dem Coding widmen. Die ideale Lösung sind sie trotzdem nicht, denn du benötigst IT-Kenntnisse, um dein Design zu programmieren. Und wenn du etwas an deinem E-Mail Design ändern möchtest, musst du die Anpassungen entweder im HTML Code vornehmen, oder wieder zu deinem Design Tool zurückkehren.
3 HTML E-Mail Softwares im Vergleich
Die einfachste und professionellste Lösung zum Erstellen und Versenden von HTML E-Mails sind Newsletter Softwares wie Brevo. Abschließend stellen wir dir drei der beliebtesten Tools vor.
Brevo

Mit der CRM-Suite von Brevo erstellst du in wenigen Klicks ansprechende HTML E-Mails. Du hast die Wahl zwischen vorgefertigten HTML E-Mail Templates, die du ganz nach deinem Geschmack anpassen kannst, und unseren intuitiven E-Mail Editoren (Drag-and-Drop, Rich Text und HTML Editor). All unsere E-Mail-Vorlagen sind responsiv und mit allen E-Mail Clients kompatibel.
Und das Beste: Mit Brevo sind keinerlei Programmierkenntnisse notwendig. Wenn du dennoch selbst Programmieren willst, bieten wir dir einen HTML Editor an, in den du deinen eigenen HTML Code importieren kannst.
Übrigens: Unsere HTML-E-Mail-Vorlagen sind wahre Alleskönner. Mit der 1-Klick-Produktübernahme kannst du eine Verknüpfung zwischen deinem Shop und unserer E-Mail Marketing Software herstellen. Deine Shop-Produkte kannst du anschließend inklusive ihrer Eigenschaften wie Produktname, Beschreibung, Bild und Preis per Mausklick in den Newsletter übertragen. Arbeitest du mit einem Content Management System (CMS)? Per 1-Klick-Content-Übernahme kannst du allerlei Inhalte direkt aus deinem Content Management System in die Vorlage übertragen – ohne lästiges Kopieren und Einfügen.
Kosten: Mit Brevo verschickst du bis zu 9.000 E-Mails im Monat (300/Tag) kostenlos. Der Einstiegspreis für 5.000 E-Mails an bis zu 500 Kontakte liegt bei 7€/Monat.
Gut zu wissen: Datenschutz wird bei Brevo groß geschrieben. Das französische Unternehmen verfügt über Server-Standorte in Deutschland und der EU und ist ISO 27001:2013-zertifiziert.
Mailchimp

Auch der US-amerikanische Anbieter Mailchimp bietet dir einen Drag-and-Drop Editor, mit dem du ohne Programmierkenntnisse ansprechende HTML E-Mails erstellen kannst. Du kannst Layouts mit Bildern, Textblöcken, Buttons und mehr gestalten. Außerdem gibt eine große Auswahl an vorgefertigten, responsiven E-Mail-Vorlagen, die du anpassen kannst, um Zeit zu sparen und professionell aussehende Kampagnen zu erstellen.
Kosten: Auch Mailchimp bietet einen kostenlosen Tarif an, der jedoch auf 1.000 E-Mails und 500 Kontakte beschränkt ist. Der günstigste Bezahltarif beginnt bei $13/Monat für 500 Kontakte und 5.000 E-Mails.
Neugierig, wie der Anbieter im Vergleich mit anderen E-Mail Marketing Softwares abschneidet? Dann schau dir unseren Vergleich der besten Mailchimp-Alternativen an.
Stripo

Im Gegensatz zu Brevo und Mailchimp ist Stripo keine vollständige E-Mail Marketing Software, sondern ein E-Mail Design Tool, das es Nutzer:innen ermöglicht, ansprechende E-Mails über einen Drag-and-Drop Editor oder durch direkte HTML-Bearbeitung zu gestalten.
Mit vorgefertigten Vorlagen, interaktiven Elementen und dynamischen Inhalten lassen sich E-Mails schnell anpassen und personalisieren. Zudem sorgt das Tool dafür, dass alle E-Mails automatisch mobiloptimiert sind und sich nahtlos in E-Mail-Marketing-Plattformen integrieren lassen.
Stripo bietet jedoch keine eigenen Funktionen für das Versenden von E-Mails, Listen-Management oder Reporting. Für das Versenden deiner HTML E-Mails musst du deine Vorlagen in eine externe E-Mail-Marketing-Plattform exportieren.
Kosten: 10 E-Mails & Vorlagen kannst du kostenlos speichern. Das günstigste Bezahlpaket gibt es für $15 (für 50 gespeicherte E-Mails).
Einfach schöne HTML E-Mails erstellen – probier es aus!
Das Erstellen eines HTML Newsletters muss nicht kompliziert sein. Es ist prinzipiell auch mit Design Tools wie InDesign, Illustrator oder Photoshop möglich. Schneller und einfacher geht das Erstellen von HTML E-Mails jedoch mit einem professionellen E-Mail Service Provider wie Brevo. Denn hier brauchst du weder Design- noch Programmierkenntnisse und kannst bereits im kostenlosen Paket auf viele E-Mail-Vorlagen zurückgreifen. Probier es einfach mal selbst aus!
Falls du noch mehr darüber erfahren möchtest, wie du im Nullkommanix schöne Newsletter erstellst, dann empfehlen wir dir noch diese Blog-Artikel:
- Newsletter erstellen: Nichts leichter als das
- Die 33 besten Newsletter-Tipps
- E-Mail Marketing einfach erklärt: Grundlagen, Tipps und Praxisbeispiele
Wir wünschen dir viel Spaß beim HTML E-Mail erstellen!