9 Tipps für die Gestaltung eines perfekten HTML Newsletters
Ein E-Mail Newsletter ist der perfekte Weg, um mit Ihren Interessenten in Kontakt zu bleiben. Oft haben Firmen oder Webseiten zahlreiche Erneuerungen oder bevorstehende Ereignisse, die Sie schnell und ohne viel Mühe bekannt machen möchten. Neue Informationen können über Blogs oder Social Media Seiten verbreitet werden. Ihre Kunden dagegen haben nur begrenzt die Möglichkeit, direkt mit Ihrem Unternehmen in Kontakt zutreten. In diesem Fall steckt in der E-Mail als Kommunikationsmedium viel Potenzial - dieses muss nur richtig genutzt werden!
Einen Newsletter zu erstellen und diesen zu versenden ist viel einfacher als man denkt. Aber eine maßgeschneiderte Vorlage zu gestalten sowie einen eigenen HTML Code zu erstellen ist schon eine kleine Herausforderung für einen Laien.
Gestalten Sie Ihren Newsletter mit einer Software, die Ihnen das „Grundgerüst“ - die sogenannten „Templates“ Ihres Newsletters schon vorgibt und Sie können kinderleicht Ihre eigene E-Mail Marketing Kampagne gestalten. Erfahren Sie mehr in unsere 9 wertvollen Tipps.
Vor dem Start: Ziele festelegen
Ein Newsletter ist eine gute Möglichkeit, auf Sie Aufmerksam zu machen – ohne dass man Ihre Webseite besuchen muss. Bevor Sie mit der Gestaltung eines Newsletter beginnen, sollten Sie sich über die Absicht Ihres Newsletters bewusst sein. Klären Sie ab, ob Sie beispielsweise Ihre Kunden mehr über Bilder sowie Texte informieren oder auch wie viel Inhalt Sie platzieren möchten. Überlegen Sie, wann Sie den Newsletter am Besten versenden möchten. Machen Sie sich darüber Gedanken, bevor Sie mit der Gestaltung loslegen.
1. Gestaltung: Tabellen im Layout nutzen
Auch wenn es wahrscheinlich ein bisschen widersprüchlich zu den heutigen modernen Web-Standards erscheint, ist es generell die einfachste Methode, das Layout eines Newsletters in Tabellen anzulegen. Die meisten E-Mail Klienten können somit Ihren Newsletter optimal darstellen.
Zudem sollten Sie beachten, dass die meisten E-Mail Klienten nur Inline Styles lesen (selbst das ist keine Garantie) und alle CSS Styles im Kopf der E-Mail heraus gelöscht werden.
Testen Sie am Besten mehrere Tabellen ineinander und legen Sie für jedes Zellen-Element eine Breite fest. So wird – egal in welchen E-Mail Klienten - immer die selbe Breite dargestellt.
2. Gestaltung: Breite fixieren
Bei der Erstellung des Newsletter Layouts sollten Sie immer eine Tabellenbreite festlegen. Jeder Leser hat eine andere Bildschirmauflösung - Sie können es allerdings nicht jedem Recht machen. Die perfekte Breite liegt zwischen 600px und 768px. Falls Sie keine bestimmten Elemente mit fester Weite haben, können Sie die Tabellenbreite auch auf 100% setzen, damit wird Ihr Newsletter bei allen E-Mail Klienten über die ganze Breite angezeigt.
3. Gestaltung: Pixel-Einheit festlegen
Legen Sie Größen in Ihrem Newsletter am Besten immer in Pixel, und nicht in anderen Einheiten, fest. Bei Prozentzahlen treten oft Probleme in den verschiedenen E-Mail Klienten auf. Tipp: Bei einer Pixelbreite von 600px können Sie schon recht viel Inhalt in Ihren Newsletter reinpacken. Für eine bessere Wahrnehmung sollten Sie Ihren Newsletter in 2-3 Spalten aufteilen und die Breiten in Pixel festlegen.
4. Gestaltung: Möglichkeit mit CSS
CSS Styles sind noch immer die beste Möglichkeit, Ihre Newsletter-Elemente zu gestalten. Campaign Monitor hat eine anschauliche Tabelle zur Unterstützung von CSS Styles in verschiedenen E-Mail Klienten aufgestellt: hier.
Ideenfindung: Newsletter Vorlagen Gallerie nutzen
Unsere Newsletter Software enthält über 300 Newsletter Vorlagen. Durchforsten Sie die tollen Layouts nach den Kategorien und lassen Sie sich inspirieren, welche Vorlage am besten zu Ihren Zielen passt.
5. Ankerlinks richtig einsetzen
Sicherlich möchten Sie einige Links in Ihren Newsletter einbauen. Bei diesen kann es sich um externe oder auch interne Links handeln; also solche, die auf andere Webseiten oder aber auch auf Ihre eigene verweisen. Zusätzlich ist es Gang und Gebe, dass in jedem Newsletter-Footer ein Abmelde-Link integriert sein muss. Nun bleibt aber die Frage – wie geht man mit dem Design all dieser Links um?
Zuerst muss eines klar sein: E-Mail Klienten sind sehr wählerisch wenn es um Link-Styles geht. Die meisten überschreiben das im Newsletter festgelegte Design mit den eigenen Standard-Einstellungen – auch bei In-Line CSS Styles. Dafür gibt es einen kleinen Trick: Nutzen Sie zusätzlich zu In-Line CSS einen Span-Tag. Auch wenn dies zusätzliche Arbeit bedeutet, sollten Sie die Mühe auf sich nehmen, denn das Link-Design ist für den Gesamteindruck mitentscheidend.
Hover-Effekte, beispielsweise eine wechselnde Linkfarbe, wenn man mit dem Mauszeiger darüber fährt, sind ein weiteres Thema. Diese Effekte werden von Outlook 2007/2010, Android, Gmail und iOS nicht unterstützt. Natürlich kann der Style trotzdem für all die E-Mail Klienten, die ihn anzeigen eingebaut werden ; jedoch ist es fraglich ob ein solcher Effekt einen großen Nutzen für die Leser stiftet. Insgesamt sollten innerhalb eines Newsletters nicht mehr als 2-3 verschiedene Linkfarben verwendet werden.
Außerdem sollten Sie jedem Link das Attribut target=“_blank“ zuweisen, sodass das Linkziel in einem neuen Fenster geöffnet wird. Dies wird von den meisten Lesern nicht nur erwünscht, sondern als Gegebenheit vorausgesetzt.
6. Test in allen großen E-Mail Klienten
Testen, testen, testen – Es ist wichtig, dass Sie Ihren Newsletter genau testen, bevor Sie ihn versenden. Ist der Versand durchgeführt, gibt es kein Zurück mehr. Besonders wichtig ist die Ansicht des Newsletters in den verschiedenen E-Mail Klienten.
In den letzten Jahren hat sich die Nutzung von iOS-Devicen rapide entwickelt. Leider ist es nahezu unmöglich, eine Vorschau auf diesen Geräten zu testen, es sei denn, man besitzt iPhone, iPad und Co. Oder aber man nutzt eine Software, die das Testen aller E-Mail Klienten ermöglicht. Diese sind jedoch leider zumeist kostspielig und Testaccounts gibt es selten.
7. Bieten Sie immer eine Browseransicht an
Nicht jeder Leser ist gewillt, den Newsletter im E-Mail Klienten zu betrachten, v.a. da viele Styles dabei verloren gehen. Daher ist es hilfreich eine Browseransicht zu ermöglichen. Damit vermitteln Sie den Eindruck übergreifender Erreichbarkeit und Kompatibilität. Wollen Sie sich Arbeit ersparen, so ist das Anlegen einer zusätzlichen Textversion zu Ihrem HTML-Newsletter eine Möglichkeit. Dieser ist jedoch gestalterisch alles andere als ansprechend, da nur reiner Text angezeigt wird. Selbst Verlinkungen sind nicht möglich.
Stellen Sie stattdessen immer eine Browserversion Ihres Newsletters zur Verfügung, sodass jeder Ihrer Empfänger die E-Mail im optimalen Design betrachten kann. Somit gehen Sie sicher, dass kein eigenwilliger E-Mail Klient Ihr Design durcheinander bringt.
8. Fügen Sie Bilder ein
Das Auge isst bekanntlich mit – das gilt auch für Newsletter. Hier gilt: Ein Bild spricht mehr als tausend Worte. Da E-Mail Klienten auch in diesem Bereich ihren eigenen Kopf haben, ist dies ein weiterer Grund, warum Sie Ihren Lesern eine Browserversion Ihres Newsletters anbieten sollten.
Bei dem Einfügen der Bilder müssen ebenfalls einige Richtlinien beachtet werden. Legen Sie innerhalb der -Tags immer sowohl Breite als auch Höhe der Bilder fest. Sind diese nicht gegeben, sprengen die Bilder in manchen E-Mail Klienten jeden Rahmen Ihres Newsletters und zerstören damit das komplette Design. Außerdem sollten Sie darauf achten, die Dateigröße der Bilder im Newsletter so klein wie möglich zu halten. Nutzen Sie als Speicherplatz für die Bilder nach Möglichkeit Ihren eigenen Webserver und achten Sie auf eine saubere Ordnerstruktur.
9. Vermeiden Sie den Spam-Ordner!
Sie werden es wahrscheinlich nicht gern hören, aber E-Mail Klienten sind zumeist nicht Newsletter-freundlich eingestellt. Tagtäglich werden Millionen von E-Mails versandt – die Mehrzahl davon sind Spam-Mails. Es ist also verständlich, dass E-Mail Klienten Vorsichtsmaßnahmen ergreifen mussten, um den Posteingang der Empfänger zu schützen.
Es kann entmutigend sein zu sehen, dass Ihr aktueller Newsletter in den Spamordnern gelandet ist. Schließlich steckt eine Menge Arbeit in einer E-Mail Marketing Kampagne. Darum gibt es einige Tricks, die verhindern, dass Ihr Newsletter dieses Schicksal erleidet. Halten Sie den Content des Newsletters kurz und präzise. Der komplette Inhalt eines Artikels muss nicht unbedingt im Newsletter stehen. Linken Sie stattdessen auf Ihre Webseite und stellen dort weitere Informationen zur Verfügung. Im Allgemeinen sollte der Textanteil den Bildanteil im Newsletter überwiegen. Als Faustregel gilt: Je kürzer Ihre E-Mail wirkt, desto wahrscheinlicher ist es, dass sie nicht im Spamordner landet.
Weiterhin sortieren viele E-Mail Klienten Newsletter an Hand der Betreffzeile aus. Verwendung Sie nicht ausschließlich Großbuchstaben und vermeiden Sie Worte wie „gratis“, da E-Mails mit diesen Inhalten zumeist ausgefiltert werden.
Einen Newsletter zu erstellen und diesen zu versenden ist viel einfacher als man denkt. Aber eine maßgeschneiderte Vorlage zu gestalten sowie einen eigenen HTML Code zu erstellen ist schon eine kleine Herausforderung für einen Laien.
Gestalten Sie Ihren Newsletter mit einer Software, die Ihnen das „Grundgerüst“ - die sogenannten „Templates“ Ihres Newsletters schon vorgibt und Sie können kinderleicht Ihre eigene E-Mail Marketing Kampagne gestalten. Erfahren Sie mehr in unsere 9 wertvollen Tipps.
Vor dem Start: Ziele festelegen
Ein Newsletter ist eine gute Möglichkeit, auf Sie Aufmerksam zu machen – ohne dass man Ihre Webseite besuchen muss. Bevor Sie mit der Gestaltung eines Newsletter beginnen, sollten Sie sich über die Absicht Ihres Newsletters bewusst sein. Klären Sie ab, ob Sie beispielsweise Ihre Kunden mehr über Bilder sowie Texte informieren oder auch wie viel Inhalt Sie platzieren möchten. Überlegen Sie, wann Sie den Newsletter am Besten versenden möchten. Machen Sie sich darüber Gedanken, bevor Sie mit der Gestaltung loslegen.
1. Gestaltung: Tabellen im Layout nutzen
Auch wenn es wahrscheinlich ein bisschen widersprüchlich zu den heutigen modernen Web-Standards erscheint, ist es generell die einfachste Methode, das Layout eines Newsletters in Tabellen anzulegen. Die meisten E-Mail Klienten können somit Ihren Newsletter optimal darstellen.
Zudem sollten Sie beachten, dass die meisten E-Mail Klienten nur Inline Styles lesen (selbst das ist keine Garantie) und alle CSS Styles im Kopf der E-Mail heraus gelöscht werden.
Testen Sie am Besten mehrere Tabellen ineinander und legen Sie für jedes Zellen-Element eine Breite fest. So wird – egal in welchen E-Mail Klienten - immer die selbe Breite dargestellt.
2. Gestaltung: Breite fixieren
Bei der Erstellung des Newsletter Layouts sollten Sie immer eine Tabellenbreite festlegen. Jeder Leser hat eine andere Bildschirmauflösung - Sie können es allerdings nicht jedem Recht machen. Die perfekte Breite liegt zwischen 600px und 768px. Falls Sie keine bestimmten Elemente mit fester Weite haben, können Sie die Tabellenbreite auch auf 100% setzen, damit wird Ihr Newsletter bei allen E-Mail Klienten über die ganze Breite angezeigt.
3. Gestaltung: Pixel-Einheit festlegen
Legen Sie Größen in Ihrem Newsletter am Besten immer in Pixel, und nicht in anderen Einheiten, fest. Bei Prozentzahlen treten oft Probleme in den verschiedenen E-Mail Klienten auf. Tipp: Bei einer Pixelbreite von 600px können Sie schon recht viel Inhalt in Ihren Newsletter reinpacken. Für eine bessere Wahrnehmung sollten Sie Ihren Newsletter in 2-3 Spalten aufteilen und die Breiten in Pixel festlegen.
4. Gestaltung: Möglichkeit mit CSS
CSS Styles sind noch immer die beste Möglichkeit, Ihre Newsletter-Elemente zu gestalten. Campaign Monitor hat eine anschauliche Tabelle zur Unterstützung von CSS Styles in verschiedenen E-Mail Klienten aufgestellt: hier.
Ideenfindung: Newsletter Vorlagen Gallerie nutzen
Unsere Newsletter Software enthält über 300 Newsletter Vorlagen. Durchforsten Sie die tollen Layouts nach den Kategorien und lassen Sie sich inspirieren, welche Vorlage am besten zu Ihren Zielen passt.
5. Ankerlinks richtig einsetzen
Sicherlich möchten Sie einige Links in Ihren Newsletter einbauen. Bei diesen kann es sich um externe oder auch interne Links handeln; also solche, die auf andere Webseiten oder aber auch auf Ihre eigene verweisen. Zusätzlich ist es Gang und Gebe, dass in jedem Newsletter-Footer ein Abmelde-Link integriert sein muss. Nun bleibt aber die Frage – wie geht man mit dem Design all dieser Links um?
Zuerst muss eines klar sein: E-Mail Klienten sind sehr wählerisch wenn es um Link-Styles geht. Die meisten überschreiben das im Newsletter festgelegte Design mit den eigenen Standard-Einstellungen – auch bei In-Line CSS Styles. Dafür gibt es einen kleinen Trick: Nutzen Sie zusätzlich zu In-Line CSS einen Span-Tag. Auch wenn dies zusätzliche Arbeit bedeutet, sollten Sie die Mühe auf sich nehmen, denn das Link-Design ist für den Gesamteindruck mitentscheidend.
Hover-Effekte, beispielsweise eine wechselnde Linkfarbe, wenn man mit dem Mauszeiger darüber fährt, sind ein weiteres Thema. Diese Effekte werden von Outlook 2007/2010, Android, Gmail und iOS nicht unterstützt. Natürlich kann der Style trotzdem für all die E-Mail Klienten, die ihn anzeigen eingebaut werden ; jedoch ist es fraglich ob ein solcher Effekt einen großen Nutzen für die Leser stiftet. Insgesamt sollten innerhalb eines Newsletters nicht mehr als 2-3 verschiedene Linkfarben verwendet werden.
Außerdem sollten Sie jedem Link das Attribut target=“_blank“ zuweisen, sodass das Linkziel in einem neuen Fenster geöffnet wird. Dies wird von den meisten Lesern nicht nur erwünscht, sondern als Gegebenheit vorausgesetzt.
6. Test in allen großen E-Mail Klienten
Testen, testen, testen – Es ist wichtig, dass Sie Ihren Newsletter genau testen, bevor Sie ihn versenden. Ist der Versand durchgeführt, gibt es kein Zurück mehr. Besonders wichtig ist die Ansicht des Newsletters in den verschiedenen E-Mail Klienten.
In den letzten Jahren hat sich die Nutzung von iOS-Devicen rapide entwickelt. Leider ist es nahezu unmöglich, eine Vorschau auf diesen Geräten zu testen, es sei denn, man besitzt iPhone, iPad und Co. Oder aber man nutzt eine Software, die das Testen aller E-Mail Klienten ermöglicht. Diese sind jedoch leider zumeist kostspielig und Testaccounts gibt es selten.
7. Bieten Sie immer eine Browseransicht an
Nicht jeder Leser ist gewillt, den Newsletter im E-Mail Klienten zu betrachten, v.a. da viele Styles dabei verloren gehen. Daher ist es hilfreich eine Browseransicht zu ermöglichen. Damit vermitteln Sie den Eindruck übergreifender Erreichbarkeit und Kompatibilität. Wollen Sie sich Arbeit ersparen, so ist das Anlegen einer zusätzlichen Textversion zu Ihrem HTML-Newsletter eine Möglichkeit. Dieser ist jedoch gestalterisch alles andere als ansprechend, da nur reiner Text angezeigt wird. Selbst Verlinkungen sind nicht möglich.
Stellen Sie stattdessen immer eine Browserversion Ihres Newsletters zur Verfügung, sodass jeder Ihrer Empfänger die E-Mail im optimalen Design betrachten kann. Somit gehen Sie sicher, dass kein eigenwilliger E-Mail Klient Ihr Design durcheinander bringt.
8. Fügen Sie Bilder ein
Das Auge isst bekanntlich mit – das gilt auch für Newsletter. Hier gilt: Ein Bild spricht mehr als tausend Worte. Da E-Mail Klienten auch in diesem Bereich ihren eigenen Kopf haben, ist dies ein weiterer Grund, warum Sie Ihren Lesern eine Browserversion Ihres Newsletters anbieten sollten.
Bei dem Einfügen der Bilder müssen ebenfalls einige Richtlinien beachtet werden. Legen Sie innerhalb der -Tags immer sowohl Breite als auch Höhe der Bilder fest. Sind diese nicht gegeben, sprengen die Bilder in manchen E-Mail Klienten jeden Rahmen Ihres Newsletters und zerstören damit das komplette Design. Außerdem sollten Sie darauf achten, die Dateigröße der Bilder im Newsletter so klein wie möglich zu halten. Nutzen Sie als Speicherplatz für die Bilder nach Möglichkeit Ihren eigenen Webserver und achten Sie auf eine saubere Ordnerstruktur.
9. Vermeiden Sie den Spam-Ordner!
Sie werden es wahrscheinlich nicht gern hören, aber E-Mail Klienten sind zumeist nicht Newsletter-freundlich eingestellt. Tagtäglich werden Millionen von E-Mails versandt – die Mehrzahl davon sind Spam-Mails. Es ist also verständlich, dass E-Mail Klienten Vorsichtsmaßnahmen ergreifen mussten, um den Posteingang der Empfänger zu schützen.
Es kann entmutigend sein zu sehen, dass Ihr aktueller Newsletter in den Spamordnern gelandet ist. Schließlich steckt eine Menge Arbeit in einer E-Mail Marketing Kampagne. Darum gibt es einige Tricks, die verhindern, dass Ihr Newsletter dieses Schicksal erleidet. Halten Sie den Content des Newsletters kurz und präzise. Der komplette Inhalt eines Artikels muss nicht unbedingt im Newsletter stehen. Linken Sie stattdessen auf Ihre Webseite und stellen dort weitere Informationen zur Verfügung. Im Allgemeinen sollte der Textanteil den Bildanteil im Newsletter überwiegen. Als Faustregel gilt: Je kürzer Ihre E-Mail wirkt, desto wahrscheinlicher ist es, dass sie nicht im Spamordner landet.
Weiterhin sortieren viele E-Mail Klienten Newsletter an Hand der Betreffzeile aus. Verwendung Sie nicht ausschließlich Großbuchstaben und vermeiden Sie Worte wie „gratis“, da E-Mails mit diesen Inhalten zumeist ausgefiltert werden.