Gestaltung von Newslettern

Gut gestaltete und optisch ansprechende Newsletter werden mehr geklickt. Das hat zum einen etwas damit zu tun, dass wir Menschen besonders gut auf Text-/Bild-Kombinationen ansprechen. Zum anderen sorgt eine durchdachte und saubere Gestaltung für eine bessere Bedienbarkeit.

Die Gestaltungsmöglichkeiten von Newslettern unterliegen gewissen Regeln – handwerklich und rechtlich. Beim Abstimmen des Designs mit dem Kunden stellen wir häufig fest, dass diese Gegebenheiten etwas mehr Erklärung bedürfen.

Wir haben deshalb 10 Punkte als Leitfaden zusammengestellt, die Ihnen helfen, ein Template für rechtssichere und effiziente Newsletter zu kreieren.

1 – Die Basics

Ein Newsletter ist ein Webdokument und damit allen Gegebenheiten des Internets unterworfen. Das bedeutet, man kann ihn nicht genauso gestalten wie ein Print-Dokument. Dies betrifft zum Beispiel den Farbraum und andere gestalterische Einschränkungen, die wir im Weiteren noch besprechen.

Gleichzeitig wird ein Newsletter zwar als Webdokument im Internet hinterlegt, ausgegeben wird er aber über einen sogenannten E-Mail-Client. Dabei handelt es sich um Ihr Mailprogramm, wie etwa Outlook, Gmail oder GMX. Jeder Client hat eigene darstellungsspezifische Voraussetzungen. Diese schränken die Möglichkeiten der Gestaltung weiter ein.

Gutes Newsletter-Design muss deshalb einen Bogen schlagen. Ziel ist es, die größtmögliche Schnittmenge abzudecken, die sich aus all den verschiedenen Besonderheiten der Clients ergibt.

2 – Outlook und das neue alte Zeitalter

Der E-Mail-Client Outlook von Microsoft ist unangefochtener Marktführer bei den Desktop-Geräten. Dies bedeutet, Newsletter-Templates zu programmieren heißt immer auch für Outlook optimierte Templates zu programmieren.

Mit dem Launch von Outlook 2007 hat Microsoft die Spielregeln für Newsletter-Programmierung revolutioniert, indem es festlegte, dass Outlook HTML anders interpretiert als ein Webbrowser. Die zugehörige Rendering-Engine – das ist das Programm, das aus dem HTML-Textwust bunte Bilder, Wörter, Videos und so weiter werden lässt – war ab dann dieselbe wie die für Word und nicht mehr die für den Internet-Explorer, wie zuvor.

Das bedeutete ein Rückschritt in der Programmierung auf den Stand von HTML 3.2, das im Jahre 1997 erschienen war. Zur Erinnerung: Outlook 2007 wurde zum Jahreswechsel 2006/2007 gelauncht – das sind läppische 10 Jahre später…

Das wiederum hieß nun, dass alle bis dahin errungenen Fortschritte in der Web-Programmierung für Newsletter keine Gültigkeit mehr hatten. Daran hat sich bis heut – wiederum 8 Jahre später – praktisch nichts geändert.

Hiervon betroffen ist zum Beispiel der weitgehende Verzicht auf Cascading Style Sheets. CSS jedoch hat einen entscheidenden Einfluss auf die freie Gestaltung von Sites wie etwa Schriftarten, den Einsatz von Hintergrundbildern und die Anordnung von Objekten. Also im Grunde die breite Palette an Gestaltungsmöglichkeiten, die CSS für Website-Design bereithält.



3 – Farben

Der Farbraum des Internets ist sRGB.¹ Eine Designvorlage die in CMYK erstellt wurde, kann nur mit mehr oder weniger starken Abweichungen dargestellt werden. Ebenso ist es nicht möglich Pantone-Farbtöne im Netz abzubilden. Beide Farbsysteme sind für Druckverfahren konzipiert und beschreiben eine Farbzusammensetzung, die für ein Ergebnis auf Papier-Erzeugnissen optimiert wurden.

¹sRGB steht für Standard-RGB und ist ein Farbraum innerhalb des RGB-Farbraums, der speziell für Monitore entwickelt wurde. Weitläufig wird sRGB häufig synonym mit RGB verwendet.

Zwar gibt es Umrechnungsmethoden von CMYK oder Pantone zu sRGB, aber die Abweichungen können durchaus sichtbar sein. Ebenso muss man beachten, dass ein Ergebnis am PC-Bildschirm durch die Kalibrierung des Geräts beeinflusst wird. So können an zwei Desktops komplett unterschiedliche Farbergebnisse angezeigt werden, obwohl die Daten identisch sind.

Eine Designvorlage für einen Newsletter wird idealerweise immer im sRGB-Modus erstellt, damit macht es das Internet glücklich. Außerdem verwendet sie Webfarben, damit macht sie den E-Mail-Client glücklich.

4 – Bilder

Je besser die Auflösung, desto besser das Ergebnis – das stimmt so leider nicht beim Newsletter-Design. Die 300dpi oder mehr, die für ein gestochen scharfes Bild im Print sorgen, können im Netz schlicht und ergreifend nicht dargestellt werden. Das Mehr an Pixeln bringt daher leider nichts, außer erhöhten Ladezeiten.

Auch wenn Ladezeiten für die Gestaltung noch nicht relevant sind, sollte bereits die Design-Vorlage in 72dpi gestaltet werden, da sie im Idealfall pixelgenau programmiert wird. Wenn die Auflösung bei Design und Programmierung unterschiedlich gehandhabt wird, kann das zu Abweichungen führen.


5 – Schriften

Während man beim Webdesign mittlerweile prinzipiell alle Webschriften zur Verfügung hat, funktioniert dies beim Newsletter-Design leider nicht. Grund ist auch hier, dass CSS nicht (voll) unterstützt wird. Das bedeutet, wie in den 90ern: Man entscheidet sich für Serifen- oder Non-Serifen-Schrift und das war’s dann auch. Die Welt teilt sich also ganz plakativ gesagt in Arial und Times New Roman…

Grafische Header – also vorab gesetzte Bilder mit Schrift – können natürlich alles abbilden, was Sie wollen und so auch das CI eines Unternehmens transportieren. Der Fließtext allerdings ist gebunden an die üblichen Verdächtigen unter den Standardschriften.

6 – Hintergrundbilder

CSS steuert bei der Website-Programmierung unter anderem die Anordnung von Elementen. Dazu gehört auch das Layering von verschiedenen Ebenen – also die Darstellung von übereinanderliegenden Elementen, mit einer Ebene im Vordergrund und einer im Hintergrund.

Ein Bild hinter einem Textbereich festzulegen, ist im Web kein Problem mehr. Machen Sie das gleiche mal in einem Word-Dokument. Dann werden Sie das Prinzip verstehen. Sicher geht das auch irgendwie, aber schön ist anders.

In der Zusammenfassung bedeutet das: Hintergrundbilder in Newslettern macht man nicht, da passieren Sachen, die will keiner sehen.

7 – Die Rückkehr der Table-Gitter

Die Anordnung von Elementen ist zentral für eine einheitliche Darstellung des Newsletters in allen E-Mail-Clients. Da aufgrund der oben beschriebenen „Outlook-Sache“ hierfür nicht auf CSS zurückgegriffen werden kann, sind die Inhalte von Newslettern – auch wieder wie in den 90ern – in Tabellen organisiert.

Dies hat entscheidende Auswirkungen auf das Verhalten der Inhalte bei der Darstellung in der mobilen Version. Wenn der Newsletter responsive umgesetzt wird, werden breitenfüllende Inhalte – wie vom Webdesign her gewohnt – bei der Verkleinerung für mobile Geräte schmäler gezogen. Sobald es allerdings mehrspaltig wird, ist die Organisation der Elemente wesentlich weniger flexibel als man das vom Webdesign her kennt.

Im Grunde gibt es nur zwei Layouts – eine breitere Desktop-Version und eine schmälere Mobil-Version. Wenn man sich das Layout als Papier vorstellt, würde man es praktisch hochkant in der Mitte knicken. Alles, was in der Desktop-Variante rechts steht, wandert nach links. Die Tabellenzeilen bleiben dabei gebündelt. Das heißt, alle Inhalte aus Zeile 1 rechts ordnen sich unter den Inhalten Zeile 1 links an. Erst dann kommen die Inhalte von Zeile 2.


Responsive Newsletter – Skalierungsverhalten als animierte GIF-Datei


Das hat zum einen zur Folge, dass zweispaltige Text-/Bild-Beiträge immer gleich aufgebaut sein sollten – also Bild links, Text rechts. Sonst kann der Leser die Texte nicht mehr ohne Weiteres den Bildern zuordnen.


Vorschaubild Newsletter exemplarisch.


Das schränkt die grafischen Möglichkeiten ein. Damit muss man beim Newsletter-Design leider leben, da alles andere zu Lasten der Usability geht.

Was sich aus dem Tabellenverhalten und dem vertikalen Knick außerdem ergibt ist, dass nicht durch zwei teilbare Spaltenaufteilungen grundsätzlich problematisch sind. Wenn zum Bespiel drei Kästen in einer Reihe angeordnet sind, wandert der dritte Kasten, der ganz rechts außen steht, in die Reihe darunter. Da alle Kästen gleich groß sind, entsteht dadurch rechts neben dem diesem letzten Kasten eine Lücke.

Man kann nun natürlich Ausnahmen programmieren und so die Einteilung beeinflussen. Zum Beispiel kann man festlegen, dass die Inhalte die sich unterhalb der Reihe befinden, nachrücken und so die Lücke schließen. In der Regel hat die Aufteilung in Reihen allerdings auch strukturelle Gründe.

Man muss sich deshalb immer auch fragen, welche Auswirkung eine Neuanordnung auf die inhaltliche Struktur hat. Zum Beispiel: Passt der Inhalt in der nachfolgenden Reihe auch wirklich zum Inhalt davor und kann er hierarchisch gleich gegliedert direkt im Anschluss dargestellt werden? Wenn Sie etwa in Reihe 1 Produkte darstellen und in Reihe 2 Firmennews, wäre es strukturell ein Bruch die beiden Bereiche übergangslos hintereinander abzubilden.

8 – Der erste Eindruck zählt – Betreff und Pre-Header

Das erste, was Ihr Kunde von dem Newsletter sieht, ist das, was der Client ausgibt. Beim mobilen Gerät ist das nicht mehr als ein Betreff und ein sogenannter Pre-Header.


Betreff und Pre-Header im mobilen Client


Dementsprechend können Sie sich sicher vorstellen, wie wichtig der Betreff für die Öffnung Ihrer Mail-Kampagne ist.

Der Pre-Header bezeichnet namentlich den Bereich vor dem Kopf des Mailings. Aus Usability-Gründen wird hier in den meisten Fällen der Link zur Online-Version ausgegeben. Das hat den Sinn, dass ein Leser, bei dem die E-Mail aufgrund client-bedingter – oder in manchen Fällen auch durch Programmierfehler verursachte – Darstellungsfehler nicht richtig angezeigt wird, sofort und ohne Absprung eine lesbare Version des Mailings abrufen kann.

Standardmäßig wird im Pre-Header der erste auffindbare Fließtext ausgegeben. Die meisten Pre-Header lauten deshalb „Wenn diese Nachricht nicht korrekt angezeigt wird…“ oder „Bei Darstellungsprobleme klicken Sie bitte hier.“


Beispiel für nicht gepflegten Pre-Header als Outlook-Vorschau-Snippet


Der Nutzen für den User ist in diesem Fall gleich Null. Deshalb tun Sie gut daran, den Pre-Header zu betexten und diesen als Erweiterung des Betreffs als Inhalts-Teaser zu nutzen.


Beispiel für betexteten Pre-Header als Outlook-Vorschau-Snippet

9 – Das Impressum

Als Herausgeber eines Newsletters sind Sie dazu verpflichtet, ein vollständiges Impressum anzugeben. Dieses Impressum muss direkt abrufbar und ständig verfügbar sein, die vollständige Anschrift Ihres Unternehmens enthalten und eine schnelle Kontaktaufnahme „einschließlich elektronischer Post“ ermöglichen.

Im Klartext heißt das:

• Verwenden Sie keinen Link als Verweis auf Ihr Impressum, da dessen ständige Verfügbarkeit nicht gewährleistet ist.
• Nennen Sie Ihren Firmennamen plus Anschrift.
• Geben Sie mindestens eine E-Mail-Adresse, am besten auch noch eine Telefonnummer an.

Die Impressumspflicht ist nach dem 5. Paragraph des Telemediengesetzes geregelt. Ob Sie zu weiteren Angaben, wie etwa der Nennung Ihrer Umsatzsteuer-ID, einer vertretungsberechtigten Person oder berufsspezifischen Angaben verpflichtet sind, können Sie direkt im TMG §5 nachlesen.

10 – Der Abmeldelink

Sie sind gesetzlich verpflichtet, dem Empfänger eine Möglichkeit bereitzustellen, sich von Ihrem Newsletter auszutragen. Darüber hinaus müssen Sie auf diese Abmeldemöglichkeit bei jeder Versendung „klar und deutlich“² hinweisen. Dem Benutzer dürfen dadurch keine außergewöhnlichen Kosten³ entstehen.

² Zitat aus dem UWG § 7, Paragraph 7 des Gesetzes gegen den unlauteren Wettbewerb.

³ Das Gesetz formuliert dies wie folgt: „andere als die Übermittlungskosten nach den Basistarifen“ (UWG§7).

Kurz und knapp gesagt: es muss einfach sein, schnell zu finden und ohne Umstände jedweder Art funktionieren. Das klappt am besten mit einem deutlich ausgewiesenen Link-Button im Footer.

Die verpflichtende Abmeldmöglichkeit leitet sich aus Paragraph 7 des Gesetzes gegen den unlauteren Wettbewerb ab.

Weitere Fachartikel zum Thema Design und Entwicklung von Newslettern finden Sie in unserem Blog:
http://www.federkielundpartner.de/blog/