Die Zeiten, bei dem E-Mails alleinig auf dem Desktop-Computer gelesen werden, sind vorbei. Anpassungsfähigkeit ist heutzutage der entscheidende Faktor für erfolgreiche E-Mail Kampagnen.

Elektronische Nachrichten, ob im beruflichen oder im privaten Umfeld, werden bereits auf verschiedensten mobilen Endgeräten gelesen. Ende 2016 wurden bereits mehr als jede zweite E-Mail auf Smartphone und Co. geöffnet, Tendenz steigend.

Angesichts der Tatsache, dass eine steigende Anzahl an Empfängern ihre E-Mails mobil lesen, ist es unumgänglich, bei diesem ein mobiles Layout zu verwenden. Hier bietet sich wiederum das responsive Design an.

Das responsive Design hat den Vorteil, dass es seine Form und Größe automatisch an den Bildschirm des jeweiligen Geräts anpasst. Der gesamte Inhalt wird, sofern notwendig, in ein einspaltiges Design umgewandelt. Doch sind damit alle Darstellungsprobleme bereits behoben? Leider nicht.

 

Dieser Artikel ist zeigt Ihnen, wie Sie Ihre E-Mails für alle E-Mail Clients optimieren und wie Sie Ihre E-Mails gestalten sollten, um perfekt angezeigt zu werden. Um keinen Artikel zu verpassen, abonnieren Sie unseren Newsletter.

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

Mailjet Newsletter abonnieren

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

 

 

Warum auch bei responsiven Layouts Probleme auftreten

Dass die E-Mail Vorlage heute auf verschiedenen Plattformen und E-Mail Clients eine gute Lesbarkeit gewährleisten muss, gehört zu den größten Herausforderung für Entwickler. Bevor wir uns die einzelnen Clients genauer anschauen, wollen wir uns zunächst mit der Frage beschäftigen, warum die Darstellung einer E-Mail bei verschiedenen Clients unter Umständen unterschiedlich ausfällt. Was beispielsweise auf einem iPad ansprechend angezeigt wird, kann auf einem Windows Phone 7, in Outlook oder Gmail abgerufen, ganz anders aussehen.

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

Mailjet Newsletter abonnieren

Ja, senden Sie mir den Mailjet Newsletter zu. Ich bin ausdrücklich damit einverstanden, den Newsletter zu erhalten und weiß, dass ich mich jederzeit problemlos wieder abmelden kann.

 

Die unterschiedlichen Bildschirmgrößen verschiedener Tablets und Smartphones ist ein wichtiger Grund dafür, dass das Layout einer E-Mail nicht bei allen Empfängern einheitlich erscheint. Zu den unterschiedlichen Geräten mit ihren individuellen Bildschirmgrößen kommen verschiedene Betriebssysteme, Browser und eben die E-Mail Clients, die jeweils Einfluss auf die Darstellung nehmen. Die Kombination hieraus ergibt eine Vielzahl unterschiedlicher technischer Voraussetzungen, unter denen E-Mails empfangen werden.

Ein weiterer wichtiger Grund liegt in der technischen Unterstützung auf Clients-Seite. Um responsive E-Mails zu entwerfen und zu formatieren, bietet sich Media Queries und CSS (Cascading Style Sheets) an. Media Queries ist aktuell die einfachste Methode, um E-Mails so zu strukturieren, dass sie sich automatisiert an verschiedene Geräte anpassen. Im Grunde ist Media Queries eine Methode, um Design-Elemente zu verändern, die hauptsächlich von der Größe des Bildschirms abhängig sind, auf dem die Nachricht gelesen wird.

 

Mailjet ist ISO zertifiziert & DSGVO konform.

 

 

Doch einen Haken gibt es: Einige E-Mail Programme wie Gmail unterstützen diese Ansätze nicht. So passiert es, dass sie die Formatvorgaben der einkommenden E-Mail ignorieren und dadurch die Optik Ihrer E-Mails komplett ruinieren.

 

Die verscheidene E-Mail Clients und ihre Charakteristiken

E-Mail Programme gibt es zahlreiche am Markt und jedes funktioniert etwas anders. Die fünf meistverwendeten Programme haben zusammengenommen einen Marktanteil von 77%.

Verbreitung E-Mail Clients
Nutzung der E-Mail Clients, Untersuchung von litmus
 

Im Folgenden werden wir uns auf diese fünf Systeme konzentrieren.

 

Apple iPhone

Das iPhone zählt zu den beliebtesten Handys überhaupt. Daher ist es nicht verwunderlich, dass eine Vielzahl der E-Mails hier geöffnet werden. Die gute Nachricht für alle E-Mail Marketer: das iPhone kommt ihnen sehr entgegen. Das liegt zum Einen daran, dass das aktuelle Betriebssystem iOS 10 eine einfache Abmeldungsfunktion, HTML 5 Videos und Media Queries unterstützt.

Probleme hat das iPhone dagegen mit automatischen Skalierungsfunktionen. Hier werden selbst reaktionsschnelle E-Mails teilweise vergrößert oder verzerrt dargestellt. Apple Mail schlägt E-Mail Versendern vor, die automatische Skalierung vollständig zu deaktivieren, selbst wenn sie an einer Korrektur arbeiten. Ein weiterer Wermutstropfen: > werden ebenfalls nicht mehr unterstützt.

Wenn Sie E-Mails erstellen, die auf dem iPhone gut aussehen sollen, achten Sie auf die Breite der E-Mail. Der Schlüssel hier besteht darin, die Bildschirmgröße zu berücksichtigen. Die Nutzung von Media Queries schafft hier Abhilfe.

 

Gmail

Googlemail hat sich binnen kürzester Zeit zum beliebtesten Webmail Client entwickelt. Jede fünfte E-Mail wird bereits über Gmail abgewickelt. Dies mag wahrscheinlich auch an den jüngsten Anpassungen liegen.

Gmail beschränkte bis Herbst 2016 stark die designtechnischen Möglichkeiten in E-Mails. Dazu zählten keine Unterstützung von Media Queries sowie die Entfernung zahlreicher Informationen aus dem head-Tag. Google begründet diese Praxis, die Benutzer vor Sicherheitsbedrohungen schützen zu wollen. Eine vereinfachte Abmeldung wird jedoch seit längerem angeboten.

Die Folge war ein höherer Designaufwand. Sofern E-Mails auf Mobilgeräten in Gmail korrekt aussehen sollen, galt es bislang die wichtigsten Formate „inline“ zu platzieren. Zum Vergleich:

<html>
<head>
<meta charset=utf-8>
<style type=”text/css”>
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>
</head>
</html>

CSS „inline“ platziert

<span style=”font-size: 22px; font-family: Arial, sans-serif; color: #222222;” >Hello!</span
CSS im Header der E-Mail eingebettet

 

Diese Zeit ist vorbei, zu Freuden von Marketern und Entwicklern. Gmail unterstützt nun responsive Designs mit Media Queries sowie Embeddet Styles. CSS kann jetzt auch im Header der E-Mail eingebettet werden und muss nicht mehr inline platziert werden. Ebenfalls unterstützt der Internetgigant jetzt Display: none, eine CSS-Eigenschaft, die verwendet wird, um bestimmte Teile einer E-Mail auszublenden. Dazu zählen das Ausblenden des Preheader-Textes, um genau zu steuern, was im Umschlag angezeigt wird. Eine Einschränkung gibt es jedoch: Seit dem Update werden keine ID-Selektoren in CSS mehr unterstützt (z.B. #elementID {display:block;} ).

 

Apple iPad

Beim iPad verwendet Apple eine sehr ähnliche Technik wie beim iPhone, um E-Mails für Mobilgeräte zu optimieren. Wie auch bei den anderen E-Mail Clients des Technologiekonzerns verwendet das iPad WebKit zum Rendern. Das bedeutet, dass die meisten innovativen Techniken für HTML und CSS unterstützt werden, wie z. B. Unterstützung für Hintergrundbilder, Video in E-Mails und ansprechendes Design.

Da die Bildschirmgröße bei Tablets wie dem iPad zwischen Handy und Desktop liegt, ist es prinzipiell unnötig, Media Queries für iPad-Nutzer gezielt anzusprechen. Die Bildschirmgröße ist groß genug, um die meisten E-Mail Designs komfortabel darzustellen. Soferm Sie jedoch eine bestimmte Medienabfrage implementieren möchten, können Sie dieses Snippet ausprobieren.

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
{style}
}
 

Outlook (2013)

Outlook ist eines der am längsten im Einsatz befindlichen E-Mail Programme am Markt (seit 1997). Seit dem Bestehen wurden zahlreiche Anpassungen vorgenommen. Dieser E-Mail Client unterstützt aktuell Styled ALT-Text, animierte GIFs, HTML5 video und Emojis in der Betreffzeile.

Outlook 2013 blockiert Bilder standardmäßig, zeigt sie aber für Absender an, die vom Benutzer als sicherer Versender markiert wurde. Die Verwendung von ALT-Text bei den Bildern ist hierbei unerlässlich, um sicherzustellen, dass die Abonnenten, die die E-Mail in Outlook 2013 öffnen, die Nachricht auch verstehen. Darüber hinaus stellt die Ausbalancierung von Live-Text und Bildern im Gesamtdesign Ihrer E-Mail sicher, dass die E-Mails unabhängig davon, ob Bilder vorhanden sind oder nicht, verwertbar sind.

 

Apple Mail

Neben dem iPhone und iPad öffnen Apple User ihre E-Mails natürlich auch auf dem MacBook. Nicht ohne Grund, denn Apple Mail ist als eines der stabilsten und gängigsten E-Mail Programme bekannt.

E-Mail Versender werden selten Darstellungsprobleme mit Apple Mail haben. Das Unternehmen arbeitet hier ebenfalls mit dem Darstellungsprogramm Webkit. Webkit wird verwendet, um Browser wie Google Chrome und Apple Safari zu unterstützen.

 

Anmeldung bei Mailjet

 

 

Grundlegende Empfehlungen bei der Gestaltung Ihrer E-Mail Kampagnen

Selbst wenn Sie versuchen Ihren Newsletter und Co. für die verschiedensten Clients gleichermaßen zu optimieren, werden Sie eine 100 prozentige Anpassung nicht erreichen. Die vielen unterschiedlichen Clients, Browser und Betriebssysteme erschweren die Entwicklung eines einheitlichen E-Mail Designs. Auch bei responsiven E-Mails ist nicht sichergestellt, dass das Layout optimal dargestellt wird.

Unsere Empfehlung: Halten Sie sich hier an die 80/20 Regel. Gehen Sie zum Statistikbereich Ihrer genutzten E-Mail Marketing Software und/oder sofern Sie Tracking Parameters in Ihren E-Mails einbinden Ihrem Webanalyse Tools des Vertrauens wie Google Analytics. Finden Sie die Top 2 oder 3 bzw. die Top 80 % der E-Mail Programme heraus, mit denen Ihre Kunden und Abonnenten arbeiten und optimieren Sie Ihre E-Mails speziell für diese Clients.

Werten Sie zunächst aus, wie der Großteil Ihrer Empfänger Ihre E-Mails tatsächlich abruft und liest. Wie ist die genaue Verteilung? Sind es Android-Geräte oder führt das Betriebssystem iOS? Verwenden viele Ihrer Abonnenten Thunderbird, um die eingegangenen E-Mails abzurufen? Sind viele Gmail-Adressen darunter? Eine solche Auswertung gibt Ihnen alle notwendigen Informationen.

E-Mail Clients herausfinden
 

Mit den folgenden Empfehlungen erreichen Sie, dass Ihre E-Mails für die gängigen E-Mail Clients optimiert sind.

 

Layout

Unabhängig vom Anzeigemedium (Desktop, Tablet, Smartphone) und E-Mail Programm, gelten für alle Formate die gleichen Regeln. Halten Sie das Layout so einfach wie möglich. Sicher gehen Sie, wenn Sie HTML oder noch besser MJML verwenden.

Sofern Ihre E-Mails überwiegend auf mobilen Endgeräten geöffnet werden, greifen Sie auf einspaltige Layouts zurück. Ist keine eindeutige Präferenz zu erkennen oder das Thema der E-Mail (Saison-Produkt-Angebote etc.) lässt sich optisch besser in einem Zwei- oder Dreispalter verpacken, dann wählen Sie diese Struktur, sofern das E-Mail Layout natürlich via responsive Design erstellt wird. Mit dieser Praxis stellen Sie sicher, dass Ihre E-Mails beim Abruf auf mobilen Endgeräten optimal angezeigt werden.

E-Mail Design Einspalter Smartphone
 

Beachten Sie bereits bei der Planung, welche Reihenfolge der Inhalte strategisch sinnvoll ist. Priorisieren Sie und ordnen Sie die Elemente entsprechend an. Generell empfehlen wir, die wichtigsten Informationen an den Anfang zu stellen, um sicherzugehen, dass die Empfänger diese auch sehen.

Tipp: E-Mails werden zunehmend auch mit Wearables wie einer Smartwatch empfangen. Auch wenn niemand einen langen Newsletter mit Produktneuheiten auf einer Uhr lesen möchte und wahrscheinlich eher den Absender sowie den Betreff und nicht die ganze E-Mail liest , gelesen (auf der Apple Watch ohnehin nur die Plain Text Variante), lohnt es sich für die Zukunft dennoch, diese Technologie im Hinterkopf zu behalten. Analysieren Sie, welche Ihrer Kampagnen zukünftig auch auf Wearables lesbar sein sollten (beispielsweise wichtige transaktionale E-Mails wie Bestell- und Versandbestätigungen) und versuchen Sie zeitnah das entsprechende Layout zu “entschlanken”.

Um doppelte Arbeit zu vermeiden, erstellen Sie ein paar E-Mail-Vorlagen, die Sie dann für regelmäßige Kampagnen anpassen und wieder verwenden.

 

Text

Auch wenn Sie die Schriftart und -größe in Ihrem Layout festlegen, so hängt die tatsächlich angezeigte Größe erheblich vom jeweiligen E-Mail Client und verwendeten Browser ab. Dies bedeutet, dass Ihre Inhalte je nach Ausgabemedium unterschiedlich viel Platz beanspruchen und sich entsprechend das Layout deutlich voneinander unterscheiden kann. Die Abstände zwischen verschiedenen Textblöcken sowie zwischen Texten und Bildern variieren ggf. stark.

Um dieses Dilemma etwas abzuschwächen, verwenden Sie kürzere Texte. Brechen Sie lange Textabschnitte nach Möglichkeit auf. Teasern Sie beispielsweise Inhalte lediglich an und fügen Sie einen Link zum Weiterlesen ein, der etwa auf Ihren Blog, auf eine FAQ oder Produktseite verweist. Fügen Sie Abstandhalter ein, die verhindern, dass Texte zu dicht an andere Elemente in Ihrer E-Mail heranrutschen. Lassen Sie über, unter und neben Ihren Texten immer ausreichend Platz um zu verhindern, dass durch unterschiedliche Schriftgrößen das Layout zerstört wird.

E-Mail Design verschoben
 

Last but not least, versuchen, Sie Ihre E-Mail Betreffzeilen und Absendernamen möglichst kurz zu halten. Dies erhöht die Wahrscheinlichkeit, dass diese bei so vielen Clients wie möglich vollständig angezeigt werden. Denken Sie außerdem daran, dass der Preheader auch im Posteingang angezeigt wird. Bringen Sie hier die wichtigsten Informationen unter.

 

Bilder

Bilder wecken Emotionen und pushen beworbene Produkte. Hinsichtlich der E-Mail Optimierung für verschiedene E-Mail Clients spielt die Bildgröße eine wichtige Rolle. Gerade wenn man mobil unterwegs ist, gilt die Prämisse: E-Mails müssen zügig geladen werden. Zu große Bilder verlangsamen die Ladezeit der E-Mails erheblich und erhöhen das Risiko, dass die Empfänger Ihre E-Mail nicht lesen. Auch kann es passieren, dass E-Mail Clients zu große E-Mails blockieren. Bilder, in denen “zu viel passiert”, sind ebenfalls nicht benutzerfreundlich, da bei einer Verkleinerung der Inhalt unter Umständen nur schlecht erkennbar ist (linkes Bild). Verwenden Sie daher möglichst einfache Grafiken oder Fotos mit einem Hauptmotiv (rechtes Bild).

Bilder im Vergleich
 

Werden Ihre Bilder beim Empfänger standardmäßig unterdrückt, wie dies bei vielen Clients wie Outlook gängige Praxis ist, gehen Informationen unter Umständen verloren. Alternativtexte sorgen hier für Abhilfe. Verstecken Sie dennoch keine wichtigen Informationen ausschließlich in Bildern. Wählen Sie stattdessen immer Text für die wichtigsten Inhalte sowie Calls-to-Action.

Alt Text in Bildern einfügen
 

Testen Sie Ihre fertige E-Mail vor dem endgültigen Versand auch mit deaktivierten Bildern. Auf diese Weise sehen Sie, ob alle Inhalte und Informationen, von denen Sie möchten, dass die Empfänger diese unbedingt sehen, auch angezeigt werden. Auch sehen Sie, wie sich fehlende Bilder auf Ihr Layout auswirken.

 

Call-to-Actions

Beim Call-to-Action gelten im Prinzip die gleichen Regeln wie beim Text. Gestalten Sie Buttons als formatierte Textlinks anstatt als Bild. Achten Sie darauf, um den Link herum ausreichend Platz zu lassen. Diese Praxis erleichtert den Nutzern auch auf kleineren Bildschirmen das Anklicken. Auch kommt es nicht zu einer Überlappung verschiedener Elemente, wenn der E-Mail Client Probleme mit der Darstellung der E-Mail hat.

Größe CTA
Jetzt wissen Sie wie Sie Ihre E-Mails für alle Clients optimieren. Wenden Sie Ihr neugewonnenes Wissen sofort an und optimieren Sie Ihre E-Mail Kampagnen. Jetzt einloggen und loslegen! 

 

Anmeldung bei Mailjet

 

Haben Sie bereits Erfahrungen mit unterschiedlichen E-Mail Clients gesammelt? Ihre Meinung ist uns wichtig! Nehmen Sie an einer kurzen Umfrage zu unserem Blog teil und teilen Sie Ihre Ideen mit.

Ihnen hat der Artikel gefallen? Dann teilen Sie diesen auf Facebook, Twitter, LinkedIn und XING. Und vergessen Sie nicht unseren Newsletter zu abonnieren :).

 

 

Dies ist eine vollständig überarbeitete Version des Blogartikels von Amir Jirbandey, ursprünglich veröffentlicht am 6. Mai 2015.