Kostenlos testen Login
Home » Blog » Wie Sie HTML-Newsletter mit Photoshop, InDesign und Illustrator erstellen

Wie Sie HTML-Newsletter mit Photoshop, InDesign und Illustrator erstellen

20. Oktober 2016

Newsletter_mit_Photoshop_Indesign_Illustrator_erstellen

Tipps zur Gestaltung und zum Versand von HTML-Newslettern

Newsletter können 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 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.

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 Newsletter2Go 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. Mehr zum Erstellen von HTML-Newslettern erfahren Sie auf dieser Seite.

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

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

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

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.

Um den Newsletter zu versenden, können Sie Ihre HTML-Vorlage bei
Newsletter2Go hochladen.

Welche Alternativen gibt es, ohne programmieren zu müssen?

Die einfachste Möglichkeit ist es, eine Newsletter Software mit WYSIWYG-Editor zu nutzen. Mit Newsletter2Go 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 Newsletter2Go 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

Newsletter2Go 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.
Mehr zur Gestaltung von HTML-Newslettern mit Newsletter2Go erfahren Sie in diesem Video:

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 Newsletter2Go 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 bietet Newsletter2Go 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 Newsletter2Go 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 gewhitelistet, also bei den E-Mail-Providern als vertrauenswürdig gelistet. 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.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>