September 11, 2019

Wie Sie eine HTML-E-Mail-Vorlage erstellen, die begeistert

Lesezeit ungefähr 12 min

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 designed und anschließend in HTML umgesetzt werden. Für das Design eignet sich im Prinzip jedes Bildbearbeitungs- oder Layout-Tool.

In diesem Artikel erfahren Sie, wie Sie einen überzeugenden HTML- Newsletter erstellen und welche Tipps Sie beim Gestalten Ihres HTML-Newslettern mit den gängigsten Tools beachten sollten.

💡 Das sollten Sie bei HTML-E-Mail-Vorlagen beachten

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

Ein hübsches Design hilft Ihnen dabei, die Aufmerksamkeit auf Ihr Unternehmen und Ihre Produkte zu lenken. Aber ohne Ziel, kein Erfolg – überlegen Sie sich daher unbedingt vorher, was Sie Ihren Empfänger:innen mitteilen möchten. Stellen Sie sich dazu folgende Fragen:

  • Was soll Ihr Newsletter bewirken?
  • Planen Sie, Gutscheine oder Rabattaktionen einzusetzen?
  • Wie ist Ihr Bild-Text-Verhältnis?
  • Wie viele Inhalte möchten Sie an welcher Stelle platzieren?

Wir haben Ihnen im Folgenden 6 Tipps zusammengefasst, mit denen Sie Newsletter gestalten, die Abonnent:innen begeistern.

1. Setzen Sie auf eine professionelle Software

Gleich zu Beginn möchten wir Ihnen eines ans Herz legen: Ihren 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 Sendinblue können Sie Ihren 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 Ihren Empfänger:innen an, wie er aussehen soll.

Setzen Sie sich ausgiebig mit der Frage nach dem passenden Tool auseinander und werfen Sie 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 Sie individuell anpassen und immer wieder verwenden können. Bei Sendinblue haben Sie 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 Sie benötigen, ist ein internetfähiges Gerät, auf dem Sie den Newsletter gestalten können.

Hier ein kleiner Einblick in unsere Vorlagengalerie: 

Sendinblue Vorlagengalerie

2. Werden Sie persönlich

Anonymes Massenmailing? Das war einmal. Sprechen Sie Ihre 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.

Begeistern Sie Ihre Empfänger:innen nicht nur mit einer persönlichen Namensansprache, sondern auch mit individuellen Produktempfehlungen oder maßgeschneiderte Texte. Sobald Sie den Newsletter versenden, wird der Personalisierungsplatzhalter automatisch mit den richtigen Daten gefüllt.

3. Gehen Sie mit der Zeit: Mobile Optimierungen

Immer mehr Menschen rufen ihre E-Mails unterwegs vom Handy ab. Seien Sie ehrlich: Wann haben Sie das letzte Mal in Ihrer 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 Ihnen 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 Ihre Empfänger:innen. Ihr nächster Newsletter wird möglicherweise überhaupt nicht mehr versucht, zu öffnen.

Ob Smartphone, Tablet oder Desktop – um Ihren Leser:innen heute gerecht zu werden, benötigen Sie ein Newsletter Design, das die Darstellung automatisch an die Bildschirmgröße jedes Endgeräts anpasst.

Achten Sie daher darauf, dass Sie responsive E-Mail-Vorlagen verwenden. Diese passen sich automatisch an die Breite des jeweiligen Endgeräts an. Glücklicherweise bieten die meisten professionellen Newsletter Tools – Sendinblue inbegriffen – bereits responsive Vorlagen an, die Sie ganz nach Ihrem Gusto bearbeiten können. Zudem sind unsere Templates in verschiedensten E-Mail Clients getestet worden, um eine optimale Darstellung sicherzustellen.

4. Das 1×1 des Newsletter Designs

Ihrer Kreativität freien Lauf zu lassen, ist immer die beste Option. Halten Sie sich jedoch trotzdem an einige Newsletter-Design-Grundlagen, um Ihre HTML Vorlage ansprechend zu gestalten. Sehen Sie diese Grundlagen als eine Art Grundrezept – verfeinern Sie dieses zum Schluss ganz nach Ihrem Geschmack.

  • Safety first: Setzen Sie einen gut sichtbaren Link zur Webversion Ihres Newsletters, falls es doch zu Darstellungsproblemen kommen sollte.
  • Wer schreibt? Setzen Sie Ihr Logo gut sichtbar an den Anfang der Vorlage, damit Ihre Empfänger:innen sofort wissen, von wem der Newsletter stammt.
  • Übersichtlich und strukturiert: Weniger ist oft mehr. Überfordern Sie Ihre 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 sollten Sie verwenden.
  • Neugierig auf mehr: Das Teaserbild entscheidet, ob Ihre Leser:innen Lust haben, im Newsletter weiterzuscrollen oder nicht. Die Aufmerksamkeit fangen Sie am besten mit einem thematisch passenden Bild ein. Achten Sie grundsätzlich auf hochwertige Grafiken! Verwenden Sie 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 ein Newsletter in Ihrem Corporate Design?

Die Seriosität und Professionalität von Ihnen als Unternehmen sollte immer im Vordergrund stehen. Behalten Sie beim Erstellen Ihrer HTML E-Mail daher immer Ihr Corporate Ihr Corporate Design, also Ihre Unternehmensfarben und -Schriften im Hinterkopf.

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

6. Alles Wichtige in Ihrem 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 Ihnen kostbare Zeit und Ressourcen zu ersparen. Überlegen Sie sich doch einmal, wie lange Sie damit beschäftigt wären, Ihre Produkte einzeln in Ihre Kampagnen zu übertragen.

Mit der 1-Klick-Produktübernahme wird eine Verknüpfung zwischen Ihrem Shop und unserer E-Mail Marketing Software hergestellt. Ihre Shop-Produkte können Sie anschließend inklusive ihrer Eigenschaften wie Produktname, Beschreibung, Bild und Preis per Mausklick in den Newsletter übertragen. Hierfür müssen Sie lediglich die Produkt-ID oder Produktnummer im Newsletter-Baustein angeben.

Arbeiten Sie mit einem Content Management System (CMS)? Per 1-Klick-Contentübernahme können Sie allerlei Inhalte direkt aus Ihrem 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 brauchen Sie sich 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 erstellen Sie 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 können Sie im Prinzip auch jedes beliebige Bildbearbeitungs- oder Layout-Tool dafür benutzen und anschließend in HTML umsetzen.

Wir zeigen Ihnen im Folgenden, wie Sie HTML-Newsletter mit den gängigsten Tools erstellen.

HTML-Newsletter mit Photoshop erstellen

Um einen HTML-Newsletter in Photoshop zu erstellen, sollten Sie zuerst ein neues Dokument mit einer etwas größer bemessenen Breite als der fertige Newsletter anlegen. Auf diese Weise können Sie 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 erstellen Sie anschließend eine Box mit 600px Breite und fügen diese zentriert ein. Dies wird Ihr eigentlicher Newsletter. Für eine optimale Lesbarkeit sollte der Newsletter-Hintergrund weiß sein. Den Hintergrund füllen Sie zur Abhebung am besten mit einem hellen Grau.

Von oben nach unten können Sie Ihren 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 können Sie ein Teaserbild einfügen. Passen Sie 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ügen Sie unterhalb des Headers ein neues Rechteck mit 600px Breite ein. Hier können Sie nun Texte und Bilder wie gewünscht einfügen. Um weitere Inhalte einzufügen, kopieren Sie ersten Inhaltsblock und fügen Ihn unten an. Mithilfe von Hilfslinien können Sie die einzelnen Blöcke ausrichten und die Abstände prüfen. Achten Sie auf ausreichende Abstände, um für eine bessere Lesbarkeit zu sorgen.
  • Unterhalb des Hauptteils können Sie, 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 Sie in InDesign einen HTML-Newsletter erstellen möchten, legen Sie zunächst ein neues Dokument mit einer Seitenbreite von 600px an. Die Seitenlänge können Sie selbst auswählen. Speichern Sie die Seite als eigenes Format und öffnen Sie sie direkt.

  • Nun können Sie 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 Ihres Newsletters.
  • Im Header können Sie nun ein Bild Ihrer Wahl einfügen. Platzieren Sie Ihr Bild und fügen Sie es proportional ein. Beachten Sie, dass beim Newsletter-Design mit InDesign alle verwendeten Bilder online gehostet werden müssen, damit sie auch bei Leser:innen sichtbar sind.
  • Im Hauptteil sollten Sie einen weißen Hintergrund einfügen, um für eine bessere Lesbarkeit zu sorgen. Hier können Sie Text nach Wahl mithilfe des Texttools eingeben. Achten Sie darauf, einen Abstand zum Seitenrand einzustellen, damit der Text nicht direkt am Rand liegt.
  • Im Newsletter-Footer können Sie das Impressum und einen Abmeldelink enthalten sein. Ein funktionierender Abmeldelink in jedem Newsletter ist in Deutschland Pflicht, damit sich Empfänger:innen jederzeit vom Newsletter abmelden können.

Haben Sie 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 Ihren Vorstellungen entsprechen. Wenn Sie Ihren HTML-Newsletter trotzdem in InDesign erstellen möchten, programmieren Sie 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 programmieren Sie Ihren 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

Speichern Sie alle Bilder, die Sie im Newsletter verwenden, separat ab.

2. Schritt: Neue HTML-Datei anlegen

Dazu können Sie entweder ein visuelles Tool wie Dreamweaver nutzen oder in einem Texteditor wie Notepad von Grund auf anfangen.

3. Schritt: Header erstellen

Legen Sie zunächst eine Tabelle mit der Breite Ihres Newsletters an. In diesem Beispiel gehen wir von einer Breite von 600px aus. Diese Tabelle können Sie nun nach Ihren Wünschen formatieren und Ihre Inhalte einfügen.

Bei allen Bildern in Ihrem Newsletter sollten Sie unbedingt ALT-Texte (Alternativtexte) eintragen. So bleibt Ihre E-Mail lesbar, auch wenn bei Ihren Empfänger:innen keine Bilder geladen werden.

4. Schritt: Inhalte erstellen

Hier arbeiten Sie ebenfalls mit Tabellen. Zwischen verschiedenen Inhaltselementen sollten Sie mit Cellpaddings arbeiten, um die Lesbarkeit zu verbessern.

5. Schritt: Footer erstellen

Auch im Footer nutzen Sie Tabellen. Wenn mehrere Bilder nebeneinander eingefügt werden sollen, können Sie dies über Columns umsetzen.

💪Einfach schöne Newsletter erstellen probieren Sie es aus!

Wenn Sie einige Faktoren beachten, können Sie Ihre 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 Sendinblue. Denn hier brauchen Sie weder Design- noch Programmierkenntnisse und können bereits im kostenlosen Paket auf viele E-Mail-Vorlagen zurückgreifen. Probieren Sie es einfach einmal selbst aus!

Falls Sie noch mehr darüber erfahren möchten, wie Sie im Nullkommanix schöne Newsletter erstellen, dann empfehlen wir Ihnen noch diese Blog-Artikel:

Wir wünschen Ihnen viel Spaß beim Erstellen Ihrer 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.

Sind Sie bereit, Ihr Marketing-Zen zu finden?

Sorgen Sie dafür, dass Ihr Arbeitstag völlig stressfrei verläuft, mit einer Lösung, die nur für Sie entworfen wurde.

Kostenloser Start