April 27, 2023

Wie du eine HTML-E-Mail-Vorlage erstellst, die begeistert

Lesezeit ungefähr 12 min
html email erstellen

Eine ansprechende HTML-E-Mail-Vorlage 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.

In diesem Artikel erfährst du, wie du einen überzeugenden HTML- Newsletter erstellst und welche Tipps du beim Gestalten deines HTML-Newsletters mit den gängigsten Tools beachten solltest.

Das solltest du bei HTML-E-Mail-Vorlagen beachten

Hast du beim Begriff HTML-E-Mail-Vorlage einen kleinen Schock bekommen? Keine Sorge, es ist viel leichter, als du denkst! Newsletter sind die perfekte Möglichkeit, direkt mit deinen Empfänger:innen zu kommunizieren und eine langfristige und vertrauensvolle Beziehung aufzubauen.

Ein hübsches 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 6 Tipps zusammengefasst, mit denen du Newsletter gestaltest, die Abonnent:innen begeistern.

1. Setze auf eine professionelle Software

Gleich zu Beginn möchten wir dir eines ans Herz legen: Deinen Newsletter 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&Drop-Editor designen und versenden. Beim Versand wird der Newsletter automatisch in valides HTML umgewandelt und kommt so bei deinen Empfänger:innen an, wie er aussehen soll.

Setze dich ausgiebig mit der Frage nach dem passenden Tool auseinander und wirf einen Blick in unseren ausführlichen Blog-Artikel, wo wir die Funktionen und Preise der vier beliebtesten E-Mail Marketing Softwares verglichen haben.

Noch einfacher und schneller geht das Gestalten mit Newsletter-Vorlagen, die du individuell anpassen und immer wieder verwenden kannst. Bei Brevo hast du beispielsweise Zugriff auf über 70 Vorlagen – viele davon sind auch bereits im kostenlosen Paket erhältlich.

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 Massenmailing? Das war einmal. Sprich deine Empfänger:innen 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 die E-Mail-Vorlage nicht mobilfähig, kann dir das große Steine in den Weg legen. Neben der Gefahr, dass das Template 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. Das 1×1 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 deine HTML Vorlage ansprechend zu gestalten. Sieh diese Grundlagen als eine Art Grundrezept, 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, Spalten, Logos und Texten in den verschiedensten Größen und Schriftarten. Außerdem gilt: Je mehr Inhalte integriert werden, desto mehr Whitespace solltest du verwenden.
  • Neugierig auf mehr: Das Teaserbild 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. 

5. Was gibt es schöneres als einen Newsletter in deinem 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.

Profi-Tipp: Lass dir einfach von uns ein individuelles Premium-Template programmieren. Mobilgeeignet, handgecoded und natürlich in deinem Unternehmens- oder Wunschdesign. Noch schneller und einfacher war Newsletter erstellen noch nie.

6. Alles Wichtige in deinem Template – und das mit nur einem Klick

Unsere HTML-E-Mail-Vorlagen sind wahre Alleskönner. Insbesondere für Webshop-Inhaber sind Übernahmesysteme im Newsletter wichtig, um dir kostbare Zeit und Ressourcen zu sparen. Überleg dir doch einmal, wie lange du damit beschäftigt wärst, deine Produkte einzeln in deine Kampagnen zu übertragen.

Mit der 1-Klick-Produktübernahme wird eine Verknüpfung zwischen deinem Shop und unserer E-Mail Marketing Software hergestellt. Deine Shop-Produkte kannst du anschließend inklusive ihrer Eigenschaften wie Produktname, Beschreibung, Bild und Preis per Mausklick in den Newsletter übertragen. Hierfür musst du lediglich die Produkt-ID oder Produktnummer im Newsletter-Baustein angeben.

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. Die Zeiten von lästigem Kopieren und Einfügen einzelner Elemente sind nun vorbei!

Auch um die Formatierung und Anpassung der Bilder brauchst du dir dank der 1-Klick-Übernahmesysteme keine Sorgen mehr zu machen.

Noch mehr Tipps und Tricks für das perfekte Newsletter Design gibt es hier.

So erstellst du HTML-Newsletter mit Photoshop, InDesign und Illustrator

Wie bereits gesagt: Der einfachste, schnellste und effizienteste Weg, um schöne Newsletter zu gestalten, ist die Nutzung einer 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 Teaserbild 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 Texttools 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. Um einen HTML-Newsletter mit Illustrator zu erstellen, ist das Programm eher ungeeignet.

So programmierst du deinen HTML-Newsletter

Einen HTML-Newsletter zu programmieren, unterscheidet sich 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:

1. Schritt: Bilder ablegen

Speichere alle Bilder, die du im Newsletter verwendest, separat ab.

2. Schritt: Neue HTML-Datei anlegen

Dazu kannst du entweder ein visuelles Tool wie Dreamweaver nutzen oder in einem Texteditor wie Notepad von Grund auf anfangen.

3. Schritt: 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.

4. Schritt: Inhalte erstellen

Hier arbeitest du ebenfalls mit Tabellen. Zwischen verschiedenen Inhaltselementen solltest du mit Cellpaddings arbeiten, um die Lesbarkeit zu verbessern.

5. Schritt: Footer erstellen

Auch im Footer nutzt du Tabellen. Wenn mehrere Bilder nebeneinander eingefügt werden sollen, kannst du dies über Columns umsetzen.

Einfach schöne Newsletter erstellen probier es aus!

Wenn du einige Faktoren beachtest, kannst du deine Newsletter prinzipiell auch mit InDesign, Illustrator oder Photoshop erstellen.

Schneller und einfacher geht das Newsletter erstellen jedoch mit einer professionellen E-Mail Marketing Software 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 einmal 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:

Wir wünschen dir viel Spaß beim Erstellen deiner HTML E-Mail.


Der Newsletter für Marketing Fans
Jetzt anmelden und monatlich die besten Tipps und Tricks für erfolgreiches E-Mail Marketing erhalten.
* Die Abmeldung vom Newsletter ist jederzeit möglich.

Bereit, mit Brevo zu wachsen?

Hol dir die Tools, die du brauchst, um deine Kundschaft zu erreichen und dein Unternehmen voranzubringen.

Kostenlose Anmeldung