Newsletter können 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 Beitrag zeigen wir, was Sie beim Design Ihres Newsletters beachten sollten, damit es sich leicht und gut in HTML umsetzen lässt. Außerdem stellen wir Tipps für die Gestaltung von HTML-Newslettern mit den gängigsten Tools vor.
Erst designen und dann programmieren – oder andersherum?
![](http://corp-backend.brevo.com/de/wp-content/uploads/sites/5/2024/07/iStock-1141315926-3-1024x640.jpg)
Gleich zu Beginn möchten wir Ihnen eines ans Herz legen: Ihren Newsletter in einem Grafik-Tool zu designen und anschließend selbst zu programmieren, stellt in den allermeisten Fällen einen unnötigen Aufwand dar. Aus diesem Grund zeigt dieser Beitrag auch Alternativen für die Newsletter-Gestaltung auf, für die keine Programmierkenntnisse notwendig sind.
In einer E-Mail Marketing Software wie Brevo 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ängern an, wie er aussehen soll. Dafür müssen Sie kein Designexperte oder Programmierer sein.
Allgemeine Tipps für die Gestaltung von HTML-Newslettern
Jeder Newsletter sollte mit einer festen Breite angelegt werden. Dies vermeidet horizontales Scrollen, was den Lesefluss stören und somit für Absprünge sorgen würde. Empfehlenswert ist eine Breite von ungefähr 600px. Diese ist für die meisten Endgeräte geeignet.
Die wichtigsten Informationen sollten in den ersten 300px bis 500px transportiert werden. Dieser Bereich befindet sich auf den meisten Bildschirmen Above the Fold und ist ohne Scrollen sichtbar.
HTML-Newsletter mit Photoshop erstellen
![](http://corp-backend.brevo.com/de/wp-content/uploads/sites/5/2024/07/iStock-1089563396-1-1-1024x683.jpg)
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 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 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
![](https://de.sendinblue.com/wp-content/uploads/sites/3/2020/02/Colors-Fruits-by-André-Britz-7-2.jpg)
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 beim Leser 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 die Empfänger 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.
Wie Sie Ihren HTML-Newsletter programmieren
![](http://corp-backend.brevo.com/de/wp-content/uploads/sites/5/2024/07/iStock-1136358820-3-1024x683.jpg)
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 eintragen. So bleibt Ihre E-Mail lesbar, auch wenn beim Empfänger 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.
Welche Alternativen gibt es, ohne programmieren zu müssen?
Die einfachste Möglichkeit ist es, eine Newsletter Software mit WYSIWYG-Editor zu nutzen. Mit Brevo funktioniert das Erstellen von HTML-Newslettern zum Beispiel folgendermaßen:
1. Betreff und Absenderadresse des Newsletters festlegen
Legen Sie Betreff und Preheader fest. Beide Textzeilen sind personalisierbar, können also den Empfänger direkt ansprechen.
Den Absendernamen und die Absenderadresse, die den Empfängern angezeigt werden, können Sie frei wählen.
2. Designvorlage wählen oder eigenes Design hochladen
Wählen Sie aus Standardvorlagen mit verschiedenen Layouts, saisonalen Spezial-Vorlagen und Premium-Vorlagen, die Brevo gerne für Sie erstellt. Alle Standardvorlagen sind bereits responsive. Das heißt, dass das HTML so optimiert ist, dass sie auch auf mobilen Endgeräten perfekt dargestellt werden.
3. Newsletter im Editor gestalten
Brevo bietet Ihnen einen visuellen Editor im Drag&Drop-System. Hier können Sie verschiedene Bausteine für Texte und Bilder einfügen und direkt bearbeiten. Innerhalb der Bausteine können Sie eigene Inhalte per Copy&Paste einbauen, Bilder aus Ihrer Mediathek nutzen und Links einfügen. Auch die Bausteine selbst können bearbeiten werden. Sie können die Anordnung, die Formatierung, Rahmen und Abstände bearbeiten. Schon während der Bearbeitung wird Ihnen eine Voransicht des Newsletters angezeigt.
4. Newsletter personalisieren
In Ihrem Newsletter können Sie Platzhalter nutzen, die beim Versand automatisch mit den Daten Ihrer Empfänger befüllt werden. Auf diese Weise können Sie z.B. eine persönliche Ansprache einfügen. Außerdem können einzelne Bausteine auf Wunsch nur bestimmten Empfängern angezeigt werden, z.B. Frauen.
5. Links zur Webversion und Abmeldung einfügen
Diese Links werden von Brevo automatisch generiert und mit Ihrem Account verknüpft, sodass Ihr Adressbuch immer aktuell ist.
6. Produkte oder Content in den Newsletter einfügen
Besonders hilfreich bei der Newsletter-Erstellung ist die Übernahme von Produkten oder Content mit nur einem Klick. Dafür bieten wir einen Spezial-Baustein an, den Sie an einer Stelle Ihrer Wahl im Newsletter einfügen können. Das Produkt oder der Content wird durch Eingabe der ID direkt aus Ihrem System in den Newsletter geladen – ohne manuelles Kopieren und Einfügen.
7. Newsletter versenden
Gute Nachrichten am Schluss: Für den Versand Ihres Newsletters ist kein weiteres Tool nötig. Anstatt den Newsletter umständlich aus Ihrem E-Mail-Programm zu versenden, können Sie Ihren Newsletter direkt aus Brevo versenden. Die speziellen Newsletter-Versandserver sind bestens auf große Verteiler vorbereitet. Sie müssen nicht mehr in Kauf nehmen, dass Ihr Rechner durch den manuellen Versand unerträglich langsam wird. Der professionelle Versand bietet einen weiteren großen Vorteil: Die Versandserver sind auf der Allowlist, also bei den E-Mail-Providern als vertrauenswürdig eingestuft. Dadurch kommen Ihre E-Mails direkt bei den Empfängern an. Im Gegensatz dazu wird beim Massenversand über normale E-Mail-Konten oft mehr als die Hälfte der versendeten E-Mails von Spam-Filtern abgefangen oder blockiert.
Fazit: Newsletter erstellen ganz nach Ihren Vorstellungen
Wenn Sie einige Faktoren beachten, können Sie Ihre Newsletter auch mit InDesign, Illustrator oder Photoshop erstellen. Schneller und einfacher können Sie mit der Brevo Software Newsletter gestalten. Probieren Sie es aus!