Knowledge Base

Darstellungstest

Wie uns das vorangegangene Kapitel zum Thema Barrierefreiheit gezeigt hat, sollten Mailings aus technischer Hinsicht jedem zugänglich sein. Ähnliches gilt natürlich auch für die Optik: Ein Newsletter ist möglichst so zu gestalten, dass er auf allen Endgeräten optimal angezeigt wird. Und genau damit befasst sich dieses Kapitel. Im Einzelnen wird hier darauf eingegangen, welche Schriftart oder Templates Sinn machen und warum E-Mail-Clients oder unterschiedliche Endgeräte erheblichen Einfluss auf das Ergebnis haben.

Fonts

Von kerzengerade bis hin zu wilden Farbstrukturen reichen die heutigen typographischen Darstellungsformen im Internet. An kreativen Impulsen fehlt es also nicht – kein Vergleich zu den einst handgearbeiteten Schriften wie der Futura von Paul Renner. Was an Schriftgestaltung 1927 noch kaum denkbar war, ist heute an jeder Ecke verfügbar. Oftmals wird die Schrift als Eyecatcher genutzt, um sich von anderen Seiten oder Marken abzusetzen. Ein berühmtes Beispiel ist der Walt Disney Schriftzug, den sicher die meisten kennen. Die Schriftart hat also einen Einfluss darauf, wie die eigene Marke wahrgenommen wird. Doch die spannende Frage für Marketer ist dabei: Wird die Schrift auch so beim Kunden angezeigt, wie es beabsichtigt war? Eine vielversprechende Lösung scheinen Web Fonts auf diese Frage zu liefern.

Was sind Web Fonts?

Als Web Fonts bezeichnet man eine Sammlung von Schriftarten, so genannter Fonts, die auf einem zentralen Server zur Verfügung stehen und somit gewährleisten, dass beispielsweise eine Homepage unabhängig vom jeweiligen Endgerät in der gewünschten Schriftart dargestellt wird. Bei Webseiten ohne Web Fonts besteht die Problematik darin, dass die gewünschte Schriftart auf dem Computer des Nutzers installiert sein muss, um korrekt dargestellt zu werden. Dieses Problem umging man früher, indem man genutzte Schriften auf seinem eigenen Server bereitstellte.

Heutzutage bietet beispielsweise Google Fonts eine Reihe von Schriftarten online an und gewährleistet damit, dass es nicht zur Anzeige einer Fall-back-Schrift kommt (Fall-back-Schriften setzt der Browser ein, wenn die gewünschte Schrift nicht verfügbar ist). In der Theorie müsste die gewünschte Schriftart also lediglich in die Homepage oder den HTML-Newsletter integriert werden. Was bei der Homepage funktioniert, stellt uns jedoch im Newsletter-Bereich vor das alt bekannte Problem der Darstellbarkeit auf unterschiedlichen Endgeräten.

Cleverer Einsatz von Web Fonts

Web Fonts können im Grunde relativ einfach in den Quelltext der eigenen Mailings eingebunden werden. Die eigentliche Hürde stellen die unterschiedlichen E-Mail-Clients dar, wie sich in einem späteren Abschnitt zeigen wird. Daher ist es sehr hilfreich, dass neben der gewünschten Schriftart auch noch eine Notfallvariante, also eine Fall-back-Schrift gleich mit definiert wird. Der Vorteil daran: Auf diese Art überlässt man die Fall-back-Variante nicht dem E-Mail-Client und kann im Vorfeld ausgiebig damit testen.

Es gibt allerdings noch etwas zu beachten: Bevor Sie unterschiedliche Web Fonts nutzen, prüfen Sie unbedingt, ob diese auch den Richtlinien der DSGVO entsprechen. Beispielsweise wird die IP-Adresse eines Nutzers übertragen, wenn Sie auf die Font-Server von Googles Web Fonts zurückgreifen, was nicht im Sinne der DSGVO ist. Es kommt also auf den Standort des Servers an, auf dem die Schriftarten gehostet sind. Wenn Sie daher die Web Fonts auf einem eigenen Server bereitstellen, sollte dieses Problem damit gelöst sein.

Web Fonts helfen also dabei, dass Newsletter beim Kunden im erwünschten Corporate Design abgebildet werden. Nur leider unterstützen nicht alle E-Mail-Clients diese Web Fonts. Daher ist es ratsam einen Plan B in der Hinterhand zu haben, falls ein E-Mail-Client auf eine Fall-back-Schriftart zurückgreift. Wer im Vorfeld eine Ersatz-Schriftart definiert und mit dieser getestet hat, wird keine bösen Überraschungen erleben.

Templates

Newsletter-Templates sorgen dafür, dass Mailings optisch ansprechend sind und dabei in verschiedenen E-Mail-Clients sowie auf allen Endgeräten entsprechend gut aussehen. Gleichzeitig lassen qualitativ hochwertige Templates genügend Spielraum, damit Sie Ihre Ideen einfach und effizient umsetzen können. Welche Funktionen und damit verbundene Möglichkeiten Newsletter-Templates bieten und worauf Sie achten sollten, erläutern wir in diesem Abschnitt.

Benutzerorientiert

Mit einem Newsletter-Template erstellen Sie ohne HTML-Kenntnisse professionelle Mailings. Vordefinierte Elemente wie zum Beispiel Artikelbilder und -texte, Call-to-Action-Buttons, Navigationselemente sowie Header-Grafiken können unkompliziert eingebunden und gestaltet werden. Der große Vorteil an einem Template: Redakteure müssen sich lediglich auf die Inhalte konzentrieren und sich nicht um Darstellungsfragen, etwa bezüglich der mobilen Optimierung, kümmern. Darüber hinaus bieten professionelle Newsletter-Templates weitere Möglichkeiten wie automatisierte Content-Übernahme aus Drittsystemen oder integriertes Webtracking. Mehr dazu aber erst im übernächsten Absatz.

Um Ihrer Kreativität freien Lauf lassen zu können, sollte Ihr Newsletter-Template möglichst umfangreiche Gestaltungsmöglichkeiten erlauben. Umso mehr Freiheiten Sie bei der Erstellung des Designs haben, desto eher können Sie Ihr Layout anpassen, um maßgeschneiderte E-Mail-Kampagnen zu erstellen. Denn Ihre Zielgruppen haben sicherlich verschiedene Vorlieben in Bezug auf bestimmte Farben oder Kontraste. Die Einstellungsoptionen eines Templates sollten daher flexibel sein und individuelle Änderungen zulassen

Effiziente Übernahme von Content

Shop-Betreiber kennen das Problem: Wie bekomme ich Texte, Bilder und Preise zu Produkten aus meinem Shop möglichst unkompliziert in meine Mailings? Am einfachsten geht dies, wenn sich Ihr Online-Shop mit dem eingesetzten E-Mail-Marketing-System verknüpfen lässt.

Mit modernen Templates lässt sich Content ganz einfach in das Mailing übernehmen. Um Produktdetails aus einem Shop zu integrieren, gibt man lediglich die Produktnummer ein. Weitere Informationen wie Links, Preise und Artikelbeschreibung sowie das Produktbild werden anschließend automatisch in das Mailing integriert und können bei Bedarf weiterbearbeitet werden.

Dadurch beschleunigen Sie Ihren Workflow und vermeiden Übernahmefehler durch manuelles Einpflegen von Inhalten. Alle externen Inhalte können sogar während des laufenden E-Mail-Versands dynamisch in die Mailings eingebunden und personalisiert angezeigt werden. Dadurch bekommen Ihre Leser individuell angepasste Mailings mit aktuellen Informationen. Natürlich können auch Inhalte aus einem CMS-, CRM- oder ERP-System eingebunden werden.

Webtracking zur Optimierung der Folgekampagnen

Um den Erfolg Ihres E-Mail-Marketings zu messen, sollten Sie auf jeden Fall die Interaktionen der Nutzer tracken. Dabei sollten Sie aber unbedingt darauf achten, dass Ihre Empfänger über das nicht nur informiert, sondern auch Ihre Einwilligung gegeben haben. Wie dies im Detail aussehen kann, lesen Sie im Kapitel „Rechtliche Anforderungen“. Denn das Tracking muss im Einklang mit der DSGVO stehen, wenn es keine Abmahnungen und damit verbundene Geldstrafen hageln soll.

Sobald eine Einverständniserklärung vorliegt, kann das Klickverhalten des Empfängers verfolgt werden. Daraus erschließt sich, welche Inhalte des Mailings relevant waren und welche Artikel eher weniger gut ankamen. Durch den Einsatz von externen Analysetools können Sie alle weiteführenden Interaktionen Ihrer Empfänger auf der Website oder im Online-Shop auswerten.

Diese Auswertungen bieten die optimale Grundlage, um die Empfänger in Folgekampagnen noch gezielter anzuschreiben. So ist es beispielsweise möglich, erfolgreiche Themen erneut aufzugreifen und die Kunden mit spezifischen Angeboten zu weiteren Einkäufen zu animieren. Außerdem hilft dieses Tracking dabei, wenn bestimmte Zielgruppen definiert werden sollen.

E-Mail-Clients

Es verwundert kaum, dass gerade bei den grafisch aufbereiteten HTML-Newslettern die Darstellung im Posteingang der Empfänger häufig wesentlich von der ursprünglichen abweicht. Grund dafür sind die vielen verschiedenen E-Mail-Clients (Desktop-Clients, Web-Clients und Mobile-(Web-)Clients). Jeder E-Mail-Client ist anders konfiguriert, da sich jeder Hersteller bemüht, Sicherheitslücken zu schließen. Aus diesem Grund unterstützen viele Clients einige HTML- und CSS- Befehle nicht bzw. interpretieren diese unterschiedlich. Das kann dazu führen, dass bestimmte Bildformate falsch oder gar nicht angezeigt werden. Gerade bei animierten GIFs ist dies besonders ärgerlich.

Beliebt – oder eben nicht – sind Tabellen bei manchen E-Mail-Clients: Diese bereiten immer wieder Schwierigkeiten. Letztendlich kann ein Mailing in der Vorschau des Redakteurs perfekt aussehen, im Posteingang der Empfänger aber völlig anders erscheinen. Aus diesem Grund sollte jedes Mailing vor dem Versand auf die Darstellbarkeit in den meist genutzten E-Mail-Clients überprüft werden. Fragt sich nur, wie dies ohne große Umstände möglich ist.

Natürlich können Sie einen Newsletter-Darstellungstest manuell durchführen, indem Test-E-Mails an Accounts der verschiedenen Provider versendet werden. Allerdings machen Ihnen die unzähligen E-Mail-Clients sowie Display-Größen und Auflösungen die Testprozedur sehr aufwendig. Accounts bei Webmailern müssen eingerichtet und Clients auf Desktop-Computern und mobilen Endgeräten installiert werden. Außerdem müssen Ihnen die verschiedenen mobilen Endgeräte oder auch Betriebssysteme zur Verfügung stehen. Aus praktischer Sicht ein Ding der Unmöglichkeit.

Daher ein allgemeiner Tipp: Es lohnt sich, Mailings grundsätzlich mit einem Template zu erstellen. Wenn Templates von professionellen E-Mail-Marketing-Anbietern erstellt wurden, sind diese nämlich schon vorab für die gängigsten bzw. die gewünschten E-Mail-Clients optimiert, sodass Sie auf einen Newsletter-Darstellungstest verzichten können. Das Schlüsselwort lautet „Responsive Design“. Mehr dazu erfahren Sie im folgenden Abschnitt.

Responsive Design

Es ist inzwischen schon eine Weile her: Bevor es jedoch eine echte mobile Optimierung von Newslettern gab, hat man versucht, die Mailings über eine mobile Webansicht für die Leser zugänglich zu machen. Dazu mussten Empfänger im Kopfbereich des Mailings auf einen Link klicken, der auf eine mobil optimierte Landingpage mit der Webansicht des Mailings führte – ganz schön umständlich, um einen Newsletter anzuschauen. Inzwischen gibt es aber eine elegantere Lösung.

Automatische Anpassung

Der aktuelle Stand der Technik ist das so genannte Responsive Design, das für die Darstellung auf mobilen Endgeräten genutzt wird. Dabei wird die Darstellung des Mailings entsprechend dem Endgerät angepasst. Derselbe Newsletter kann also auf unterschiedlichen Endgeräten betrachtet werden und sieht fast überall optimal aus. Wenn ein Endgerät kein Responsive Design unterstützt, wird die entsprechende Desktop-Variante angezeigt.

Die Darstellung des Newsletters ist also stark abhängig vom verwendeten Endgerät. Dabei spielen vor allem die Breite und die Auflösung des darstellenden Bildschirms eine Rolle, aber auch das Betriebssystem und der verwendete E-Mail-Client oder selbst der Browser. Je nach Endgerät werden Schriftgröße, Bilder und Layout entsprechend angepasst. Für Verfasser von Newslettern würde dies ohne Unterstützung eine kaum zu bewältigende Herausforderung darstellen. Moderne Templates verschaffen hier Abhilfe.

Technisch wird das Ganze zum einen durch so genannte CSS-Media-Queries gelöst. Dabei handelt es sich um Gestaltungsanweisungen, die nur zum Tragen kommen, wenn das Endgerät bestimmte Voraussetzungen erfüllt. Zudem kommen flexible Tabellen-Layouts zum Einsatz, die sich automatisch der jeweiligen Bildschirmbreite anpassen. Statt absoluten Pixel-Werten werden dabei variable Prozentangaben genutzt, sodass sich das Layout immer der jeweiligen Bildschirmbreite anpassen kann.

Den Anforderungen gewachsen

Letzten Endes gibt es drei Faktoren, welche die maßgeblichen Herausforderungen bei der mobilen Optimierung von Newslettern bestimmen: Endgeräte, Betriebssysteme und E-Mail-Clients:

  • Die Endgeräte selbst spielen bis auf die Bildschirmgröße eher eine untergeordnete Rolle für die Darstellung des mobilen Newsletter-Designs.
  • Anders sieht es bei den mobilen Betriebssystemen aus: Obwohl es von diesen nur wenige gibt, unterscheidet sich die Darstellung zwischen den verwendeten Betriebssystem-Versionen teils erheblich. Alleine zwischen verschiedenen Android-Versionen sind gravierende Unterschiede zu erkennen. Dabei fallen beim Wechsel von einer auf eine andere Version Design-Anweisungen heraus, andere kommen dafür neu dazu. Das wird wohl auch für die Zukunft eine konstante Herausforderung für die Entwickler bleiben.
  • Die standardmäßig auf den Geräten installierten Mail-Clients unterstützen mobil optimierte Newsletter aktuell bereits sehr gut. Problematisch wird es jedoch, wenn der Leser ein anderes Programm zum Betrachten verwendet. Dadurch kann es bei einigen Anwendungen zu Darstellungsfehlern kommen, die nur mit viel Aufwand beseitigt werden können.

Den Nutzer immer im Blick

Wie sich gezeigt hat, sollte sich das Responsive Design immer an den von den Newsletter-Empfängern verwendeten Endgeräten orientieren. Dazu gehört natürlich auch, dass die Newsletter entsprechend auf diese Geräte optimiert werden. Layouts mit mehr als zwei Spalten sollten vermieden werden, da diese sonst nicht auf allen Endgeräten korrekt dargestellt werden können. Selbstverständlich müssen auch die Landingpages, die beim Klicken von Links im Mailing aufgerufen werden, entsprechend mobil optimiert sein.

Es empfiehlt sich zudem, Grafiken zu verlinken statt einzubetten, da die Ladezeit kürzer wird und manche mobile Clients eingebettete Bilder als Anhang interpretieren. Buttons für die Call-to-Actions sollten zudem so gestaltet sein, dass diese sich gut anklicken lassen. Und bei Telefonnummern lohnt es sich, wenn diese so verlinkt werden, dass sie direkt über die Telefonie-Funktion des Endgeräts angerufen werden können.

Sonderfall Wearables

Spätestens seit dem 24. April 2015 stellte sich für E-Mail-Marketer eine neue Herausforderung. An diesem Datum kam die Apple Watch in die Läden und verfrachtete Apps sowie sämtliche Webinhalte ans Handgelenk – zumindest teilweise. Für einen Newsletter ergeben sich daraus zusätzliche Hürden, da der Platz auf dem kleinen Display bestmöglich genutzt werden muss.

Eine kleine Entwarnung gleich zu Beginn: Der eigentliche Newsletter wird in den meisten Fällen auf dem Smartphone gelesen, das mit der Smartwatch verbunden ist. Außerdem halten sich die Nutzerzahlen in einem überschaubaren, einstelligen Prozentbereich. Dennoch macht es Sinn, dass Sie beim Erstellen eines Newsletters einige Punkte im Hinterkopf behalten.

Auf das eigentliche Design kommt es bei Wearables gar nicht so sehr an. Vielmehr rückt nun die Betreffzeile sowie der Pre-Header in den Mittelpunkt. Aufgrund des sehr begrenzten Platzes muss nun der Betreff so formuliert sein, dass der Leser die E-Mail öffnen möchte. Neben dem Betreff werden auch Teile des Pre-Headers auf Wearables angezeigt – erneut eine Chance, den Leser zum Öffnen zu animieren.

Sollten Sie einen tieferen Blick auf die Gestaltung von Betreff, Header oder eines kompletten Newsletters werfen wollen, finden Sie dazu im Kapitel „Inhalt und Gestaltung“ die passenden Informationen.