Warum wird mein Newsletter falsch angezeigt?

Die erste E-Mail wurde 1971 verschickt. Aufgrund des Alters des Mediums gibt es eine Fülle an Plattformen und Clients, die Newsletter oft unterschiedlich anzeigen.

Wer E-Mails verschickt, möchte auch, dass diese richtig angezeigt werden. Dabei gibt es aber Abhängigkeiten von Content, Client und Gerät, denen niemand entgehen kann. Kurzum: Es gibt aktuell keine Möglichkeit ein beliebiges Design plattformunabhängig mit gleicher Qualität anzuzeigen.

 

Wir empfehlen allen unseren Kund:innen den Fokus auf einer möglichst plattformübergreifenden guten Darstellung zu haben.

Je einfacher der Newsletter gestaltet ist, desto näher wird man diesem Ziel kommen.
Je mehr moderne Elemente übernommen werden, beispielsweise Text auf Bild, Counter, bewegte Grafiken, etc.. desto weniger werden die Empfänger eine einheitliche, gute Experience haben.

Mangelnde Unterstützung von Code in E-Mail Clients (am Beispiel von Hintergrundbildern)

Auf Websites stößt man hier schon längst nicht mehr auf Probleme und kann überall Bilder als Hintergrund einbinden. Es ist auch kein kompliziertes oder neues Feature.

In E-Mail Marketing sieht dies leider anders aus:
Die Outlook Versionen 2013, 2016, 2019 sowie Microsoft 365 unterstützen Hintergrundbilder nicht und zeigen sie nicht an.

Um es noch ein wenig undurchsichtiger zu gestalten: Auf MacOS können Outlook 2016 und Microsoft 365 sehr wohl Hintergrundbilder darstellen, obwohl es auf Windows nicht funktioniert.

E-Mail Marketing hat kein Standardset von unterstützten Elementen

Es gibt bei Online-Plattformen und Webmailern keinen Standard, der sich durchzieht. Somit existiert in E-Mail Marketing kein kleinstes gemeinsames Vielfaches, das immer und überall ohne Abweichungen dargestellt werden kann.

Hersteller und Anbieter können die vorhandenen Features, die unterstützt werden, auch jederzeit abändern. Somit kann von einer Version auf die nächste ein Hintergrundbild in einer E-Mail bereits nicht mehr funktionieren.

Jeder E-Mail Client bringt eigene Herausforderungen

Ein Beispiel von Gmail (Webmail):
Die Nachrichtengröße ist auf 102kB limitiert. Ist eine Nachricht größer (z.B. durch Bilddateien), wird die Nachricht an der 102kB Grenze abgeschnitten und ein Link „Vollständige Nachricht ansehen" angezeigt.
Bei dieser Unterbrechung wird der Code nicht berücksichtigt und einfach dort unterbrochen, wo dieses Limit eben erreicht wird. Demnach ist in 99% aller Fälle das Layout zerstört.

Ein Beispiel von Outlook:
Outlook fügt in bestimmten Fällen nach ungefähr 23,7 inch (ca. 1790px) der Nachrichtenlänge einfach einen Leerraum ein. Auch hier wird der Inhalt der Nachricht nicht berücksichtigt. Dies kann beispielsweise dazu führen, dass ein eingebundenes Bild einfach von diesem Leerraum unterbrochen wird.

Noch Beispiel von Outlook:
Einer der wohl prominentesten Anzeigefehlern ist der sogenannte Outlook Line Bug.
Outlook zeigt in bestimmten Fällen feine, 1px hohe Linien in Hintergrundfarbe an. Dieser Effekt tritt meist dann in Erscheinung, wenn ein farbiger Kasten im E-Mail Design vorgesehen ist.
Zur Behebung dieses Falls gibt es viele Ratschläge, wie bspw. die Contentblöcke anders anzuordnen oder an Zeilenhöhe und Schriftgröße zu schrauben. Garantierte Lösungen, die auch jedes Mal klappen, gibt es aber nicht.

Zusätzliche Problemquelle: Endgerät

Neben den Clients spielen auch die verwendeten Devices eine Rolle. Chad White (Head of Strategic Research bei Oracle) hat einen sehr guten Artikel geschrieben, in welchem er illustriert, wie viele unterschiedliche Kombinationsmöglichkeiten existieren. Die Darstellung kann sich also auch unterscheiden, obwohl die Geräte aus dem gleichen Hause stammen.

Fazit

  1. Es gibt Darstellungsprobleme, welche aufgrund der verwendeten Clients auftreten.
    Dieser Fehlertyp lässt sich kaum korrigieren (client related).
  2. Es gibt Darstellungsprobleme, welche aufgrund der verwendeten Devices auftreten.
    Dieser Fehlertyp lässt sich kaum korrigieren, weil der nötige Aufwand zumeist in keiner vernünftigen Relation zum Ergebnis steht (device related).
  3. Es gibt Darstellungsprobleme, welche aufgrund von Fehlern im Code auftreten. 

In welche Kategorie ein Darstellungsfehler fällt lässt sich nur durch Analyse rausfinden:
Client bezogene Fehler lassen sich durch Crossclient Tests identifizieren.
Code bezogene Fehler lassen sich durch sorgfältiges Code Reviewing identifizieren.
Device bezogene Fehler sind in diesem Ablauf die Restmenge, welche toleriert werden, weil diese nur bei speziellen Geräten oder Einstellungen auftreten.

In allen Fällen ist eine präzise Dokumentation zu Gerät, Betriebssystem und Client nötig, sowie ein Link zur Kampagne und ein Screenshot wo sich der Fehler erkennen lässt.