Thomas Hajdukowicz

//

Wie viele E-Mails empfangen Sie heutzutage pro Tag? 20, 30, 100? Wenn ich heute eine E-Mail mit einer zweifelhaften Anzeige, zugeschnittenen Bildern oder seltsam ausgerichteten, einem Picasso-Kunstwerk ähnelnden Blöcken erhalte, klicke ich einfach auf „Löschen“. Und da bin ich nicht der Einzige: 80% der Menschen würden eine E-Mail, die auf ihrem mobilen Gerät nicht gut aussieht, löschen.

Eine responsive E-Mail zu programmieren kann allerdings irritierend sein und ist sicher auch schwer zu erlernen. Glücklicherweise gibt es Alternativen um das Entwerfen einer anpassungsfähigen Nachricht zu einer intuitiven Aufgabe werden zu lassen. Es gibt eine Reihe von Punkten, auf die man beim Gestalten von responsiven E-Mails achten sollte

 

Was ist Responsive E-Mail Design?

Mit Hilfe eines  responsiven E-Mail Designs passen sich Ihre E-Mails automatisch an das Endgerät Ihres Empfängers an. Dies schafft die Design-Technik durch die Anwendung von CSS3-Codes. Die CSS3-Codes fragen die Merkmale des Endgerätes wie Bildschirmgröße, Format und Auflösung ab.

Diese E-Mails werden dann in Form,Größe, Text und Spaltenausrichtung so optimiert, dass sie perfekt auf dem Bildschirm des jeweiligen Geräts angezeigt werden.

Diese flexible Darstellung ist nicht nur für Ihr E-Mail Marketing von großer Bedeutung, sondern auch für Ihre Reputation. Fehlerlose und optimal angezeigte E-Mails hinterlassen einen professionellen Eindruck.

Smartphone Ansicht von einer E-Mail
 

Bitte denken Sie jedoch daran, dass einige Programme wie beispielsweise Gmail nicht gut auf CSS3-Codes zu sprechen sind und sich dies auf die Darstellung Ihrer E-Mails auswirken kann. Aber auch hier gibt es Techniken, wie Sie solche Hindernisse überwinden und Ihre E-Mails wirklich auf allen Programmen gut aussehen lassen.

 

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 Notwendigkeit von einem Responsive E-Mail Design

Das Smartphone als Endgerät

Ob in der U-Bahn, im Büro oder in der Mittagspause, das Smartphone ist ein treuer Begleiter in unserem Leben geworden. Immer mehr Menschen rufen und lesen Ihre E-Mails mobil ab. Mobil optimierte E-Mails nehmen daher eine immer größere Bedeutung im E-Mail Marketing ein.

Deshalb: In einer von Handys beherrschten Welt, in der Personen wie ich die ganze in einen Newsletter oder Kampagnen Mühe unterbewerten und diese einfach ohne den geringsten Skrupel löschen, ist die wichtigste Eigenschaft Responsivität (Anpassungsfähigkeit).

Einer der größten Herausforderungen besteht in den unterschiedlichen Bildschirmgrößen der Endgeräte, die je nach Hersteller und Version unterschiedlich sind. Die von Ihnen versendeten E-Mails werden möglicherweise ganz anders angezeigt, als Sie es geplant haben.

Programme wie iOS passen die E-Mails zwar auf das jeweilige Endgerät an, wohingegen die meisten Android Geräte die E-Mails in Originalgröße anzeigen. Bei beiden Software-Lösungen werden jedoch nur suboptimale Ergebnisse erzielt.

Die Folge ist, dass Ihre Kunden mit Schwierigkeiten bei der Bedienbarkeit aber auch beim Lesen Ihres Textes zu kämpfen haben und schon nach kurzer Zeit die Lust verlieren Ihre E-Mail Kampagnen überhaupt zu öffnen.

Deswegen ist es besonders wichtig, mobil optimierte E-mails zu versenden.

Wie viele Ihrer Kunden letztendlich Ihre zuvor erstellten Newsletter, saisonalen Angeboten und Autoresponder auf dem Smartphone öffnen, finden Sie mit Hilfe verschiedener Analysetools heraus. Diese zeigen Ihnen genau auf, auf welchen Endgeräten Ihre Empfänger Ihre E-Mails öffnen. Sollte diese Anzahl trotz aller Erwartung nicht so groß sein wie Sie dachten, ist dies kein Grund zur Untätigkeit.

Eine Studie zeigt, dass die Nutzung von Mobilfunkgeräten weiterhin stark ansteigt. Es ist somit egal, ob Ihre Kunden bereits Smartphone affin sind oder sich noch dorthin entwickeln. Unterschätzen Sie nicht das noch auszuschöpfende Potenzial und optimieren Sie Ihre E-Mails für mobile Endgeräte.

 

Herausforderung E-Mail Design und Wearables

Wearables werden die Art der Kommunikation verändern. Bereits jetzt gelten Smartwatches, Fitnesstracker und Co. neben Big Data als der nächste große Trend.

Einer der weltweit größten Meinungsforschngsunternehmen Gartner schätzt, dass der globale Wearables Umsatz um 18% im Jahr 2016 wachsen werde. Vermutlich werden bis Ende 2016 rund 275 Millionen tragbare Geräte über den Ladentisch gehen. Ein ähnliches Wachstum wird für 2017 erwartet.

Der Siegeszug von Smartwatches und Co. bedeutet für Marketer weitere Touchpoints in der Kundenkommunikation. Unternehmen können ihre Zielgruppenansprache weiter optimieren und ihre Produkte und/oder Dienstleistungen zielgerichteter promoten. In der Konsequent bedeuten Wearables aber auch, dass die Erstellung von responsiven E-Mails noch komplizierter wird.

Bei einer durchschnittlichen Größe von 9 bis 16 Quadratzentimetern (das ergeben pro Zeile rund 16 Zeichen Platz, für den gesamten Bildschirm zwischen 30 bis 80 Zeichen) stellt sich natürlich die Frage, was Sinn macht auf diesen Geräten an Inhalten darzustellen. Auch wenn sich die Displaygrößte und Anzeigegröße bei den einzelnen Herstellern etwas unterscheiden, wirklich viel Platz ist das aber nicht. Doch auch wenn Smartwatches das Scrollen ermöglicht, dafür primär ausgelegt sind sie nicht.

sony_smartwatch

E-Mail dargestellt auf der Sony Smartwatch 3

 

Keine Sorge, Sie müssen jetzt nicht in Panik verfallen und alle Ihrer E-Mail Vorlagen komplett neu gestalten, um den “Wearables Standards” zu entsprechen. Aus technischer Sicht können diese Geräte Media Queries bislang nicht richtig verarbeiten. Das heißt, dass Ihre professionell gestalteten E-Mail Designs zum gegenwärtigen Zeitpunkt höchtwahrscheinlich nicht korrekt angezeigt werden.

Hinzu kommt, dass der Benutzer darüber entscheiden kann, welche der eingehenden E-Mails er zu seiner Smartwatch weitergeleitet haben möchte und welche nicht. Das bedeutet, dass auch Ihre Marketing-E-Mails unter Umständen es nicht auf die Smartwatch schaffen werden. In diesem Fall laufen Ihre ganzen Anstrengungen, Ihre E-Mails für Wearables zu optimieren, ins Leere.

Es ist daher nicht notwendig jede Ihrer versendeten E-Mails auf Wearables hin zu optimieren. Statt Newsletter macht es vielmehr Sinn, einfache automatisierte Benachrichtigungen an die Smartwatch zu senden, also E-Mails, die als reiner Text funktionieren und bei dem keine Links notwendig sind. Mögliche Szenarien sind Barcodes, die als Eintrittskarte dienen, Versandbestätigungen oder Nachrichten über Terminänderungen und -verschiebungen.

Auch wenn Wearables bislang nicht im Fokus Ihrer E-Mail Marketing Strategie stehen brauchen, empfiehlt es sich dennoch, die eben genannten Punkte schon jetzt anzuwenden. Wenn Smartwatches und Co. dann mehr und mehr in den Mittelpunkt rücken, haben Sie bereits die notwendige Vorarbeit geleistet.

Sie können dann Ihren Fokus bereits auf fortgeschrittene Praktiken richten, u.a. die Integration von auf Smartwatches perfekt anzeigbaren Barcodes. Die Zukunft wird uns zeigen, wo die Reise hingeht. Seien Sie gespannt. Wir sind das in jedem Fall.

 

Fazit

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.

 

Warum auch bei responsiven E-Mail Design 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.

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.

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 verschiedene 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: Sie 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.

 

Dies gilt bei der Erstellung Ihrer mobil optimierten E-Mail zu beachten

Im Folgenden finden Sie Tipps und Tricks zusammengefasst, die Ihnen bei der mobilen Optimierung Ihrer E-Mails helfen.

 

Konzentrieren Sie sich zunächst auf die wichtigsten E-Mail Clients

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

Auswertung der E-Mail Statistiken bei Mailjet

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

 

Kurze Betreffzeilen und einfallsreiche Pre-Header erhöhen Ihre Öffnungsraten

Dass E-Mail Betreffzeilen für mobil optimierte E-Mails genauso wichtig sind wie für normale Nachrichten, ist keine große Überraschung. Sie sind der Schlüssel zum Erfolg und lassen Ihre E-Mails im Posteingang hervorstechen. Es gibt jedoch Unterschiede, die Sie beachten sollten.

Der Display eines Smartphones ist wesentlich kleiner als der eines Laptops, sodass weniger Platz für Ihre Betreffzeile zur Verfügung steht. Setzen Sie auf kurze ausdrucksstarke Betreffzeilen, die Schlüsselwörter enthalten und 30 Zeichen nicht überschreiten. So hebt sich Ihre E-Mail im Posteingang ab, Ihre Betreffzeile wird nicht abgeschnitten und Ihre Öffnungsraten erhöhen sich.

Nutzen Sie den Pre-Header, um Ihren Kunden einen Vorgeschmack auf den Inhalt Ihrer E-Mail zu geben. Der Pre-Header wird meist unter der Betreffzeile angezeigt und verfolgt das Ziel die Betreffzeile zu unterstützen und Ihre Kunden neugierig auf Ihre Kampagne zu machen.

 

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

Bilder In E-Mails mobil optimiert.

Manchmal, wenn wir eine E-Mail gestalten, entwickeln wir plötzlich künstlerische Fähigkeiten und experimentieren mit mehrspaltiger Aufteilung, tollen Hintergründen, Katzen-GIFs und Bildern, nur um dann beim Öffnen der Nachricht auf einem Tablet oder Smartphone festzustellen, dass die ganze Anstrengung umsonst war.

Die Verwendung einspaltigen Layouts verhindert, dass das Design bei kleiner werdenden Bildschirmgrößen umgestaltet werden muss. Bei mobilen Geräten ist Einfachheit Ihr Verbündeter!

Werfen Sie einen Blick auf diese Layout-Flops, die geradewegs aus unserem eigenen Posteingang kommen!

Aligment

 

Verzichten Sie bei Ihrer mobilen E-Mail auf mehrere Spalten, so wird nicht nur die Navigation für Ihre Kunden vereinfacht, sondern Sie reduzieren auch Ihren Inhalt, wodurch die Ladezeiten Ihrer E-Mail verkürzt werden.

Ansicht mit mehreren Spalten
 

Außerdem sollten Sie bedenken, dass die meisten Mobilfunknutzer Ihre E-Mails draußen, unter freiem Himmel lesen. Passen Sie Ihre E-Mails dementsprechend an und arbeiten Sie mit einem kontrastreichen Design.

Sorgen Sie für klare Hierarchie und Prioritäten

In einem Webbrowser gibt es verschiedene Möglichkeiten, die Aufmerksamkeit der Leser zu wecken: Zum Beispiel durch die Verwendung von Farben,von ins Auge springender Bilder und stilvoller Schriftarten. Aber bei anderen kleineren Bildschirmen, wie beispielsweise Smartphone-Bildschirmen, muss die Hierarchie deutlich sein, damit die Leser ein Gefühl für die Kernaussage bekommen, auch wenn Sie nicht bis nach unten scrollen.

Da Menschen jeden Tag eine Vielzahl von E-Mails erhalten, ist die Konkurrenz groß, und es wird immer schwieriger sie dazu zu bewegen, Ihre E-Mail von vorne bis hinten durchzulesen. Deshalb sollte man eine E-Mail immer in der Reihenfolge der Wichtigkeit gestalten, , wobei die wesentlichen Elemente an den Anfang kommen.

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

 

Bilder

Bilder wecken Emotionen und pushen beworbene Produkte. Daher sollten Sie alle Ihre E-Mail Bilder optimieren.

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 in E-Mails 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.

Newletter mit gelockten Bildern

Beispiel eines klassischen Sales-Newsletters mit geblockten Bildern.

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.

Bilder in E-Mails einbinden: Alt-Text formulieren
Alt-Text beschriften in Mailjet’s Drag-and-Drop E-Mail Editor.
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.

Bilder in E-Mails erzeugen immer eine größere Aufmerksamkeit als ein reiner Text und erhöhen schnell Ihre Klickrate. Und auch für die meisten Smartphone Nutzer muss es schnell gehen und sie haben nur wenig Zeit, lange Texte in einer E-Mail zu lesen.

Trotzdessen kann das Benutzen von Bildern in Ihrer mobilen E-Mail schnell nach hinten losgehen, da Sie bei keinem Gerät wirklich sicher sein können, dass Ihre Bilder auch wirklich angezeigt werden.

Deshalb ist es besonders wichtig, dass Sie Ihre Bilder anpassen und mit einem Alt-Text versehen. Der Alt-Text ist eine kurze Beschreibung des Bildes und vermittelt dem Leser die Idee hinter dem Bild. So lässt sich das Design und der Inhalt Ihrer E-Mail nachvollziehen auch wenn Ihre Bilder blockiert wurden.

Auch muss Ihr Text  auf die mobile Nutzung angepasst werden. Hier gibt es jedoch keine konkreten Vorgaben. Probieren Sie aus welche Schriftgröße Sie auf Ihren Smartphone als angenehm lesbar empfinden.

Bilder (und GIFs) eignen sich hervorragend dazu, lange Textblöcke aufzulockern. Bilder können sich jedoch unter Umständen als zweischneidiges Schwert erweisen. Nicht richtig dargestellte Bilder können auf einigen Geräten zu groß oder zu klein wirken und dadurch Ihren Hintergrund verunstalten oder Ihre Banner unleserlich machen.

Yeezy

 

Achten Sie auch auf zu große und nicht richtig ladende Bilder, wenn Sie Datentarife ohne 4G benutzen. Bearbeiten und optimieren Sie Ihre Bilder für das Web vor dem Hochladen und vergessen Sie nicht den Alt-Text hinzuzufügen.

IMG_2150

 

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

Verschobene E-Mail Elemente auf dem Smartphone sehen alles andere als professionell aus.

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.

E-Mail Betreffzeilen verfassen mit Mailjet’s E-Mail Marketing Software.

 

Call-to-Actions

Auch Ihr Call-to-Action Button sollte mobil optimiert sein, um Ihre Conversion Rate positiv zu beeinflussen. Bei der Gestaltung des Buttons ist darauf zu achten, dass Sie diesen trotz der mobilen Anwendung nicht zu klein gestalten.

Durch eine zu kleine Darstellung wird sich die Bedienbarkeit für Ihre Kunden stark verschlechtern, welches sich negativ auf Ihre Conversion Rate auswirkt.

Ohne eine klare Anweisung an Ihre Empfänger wird es schwierig, sie einzuladen, Ihre Website zu besuchen. Hier müssen die Links Ihrer E-Mail-Kampagnen taktisch klug platziert sein.

Deshalb müssen auch Call-To-Actions und Links leicht zu erkennen und auf Ihre Besucher zugeschnitten sein. Größe und Position müssen gut überlegt sein: nicht zu viele, nicht zu nah beieinander.

Gestalten Sie die wesentlichen Beteiligungsaufrufe als Schaltflächen, so dass sie auf Handys und Tablets einfach mit dem Finger angetippt werden können – und wir wissen alle, wie groß manche Finger sind! Versuchen Sie kreativ zu sein und die Links an anderen Stellen zu platzieren, wie zum Beispiel zweitrangige Beteiligungsaufrufe innerhalb des Textes oder Bilder, die sich in einen anklickbaren Link verwandeln.

IMG_2151

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
 

Daher ist es zu empfehlen einen etwas größeren Call-to-Action Button zu integrieren. Auf den Webseiten verschiedener Unternehmen wie zum Beispiel Microsoft oder Apple finden Sie die bewährten Größen für das jeweilige System.

Denken Sie daran, dass Sie sobald Sie einen Call to Action Button platziert haben, Ihre Kunden mit einem Klick auf Folgeseiten weitergeleitet werden. Solche Landing Pages müssen genau wie Ihre E-Mails mobil optimiert werden, um Ihren Kunden eine reibungslose Bedienbarkeit zu gewährleisten.

So stellen Sie sicher, dass Ihre Kunden Ihr Webseitenaufrufe nicht vorzeitig abbrechen und negative Erfahrungen mit Ihren E-Mails verknüpfen.

 

Regelmäßige Tests – der Schlüssel zum Erfolg

Auch nachdem Sie Ihre E-Mail optimal auf die mobile Nutzung angepasst haben, ist Ihre Arbeit nicht getan. Führen Sie vor dem Versand Ihrer ersten Kampagne ausführliche Tests, bezüglich der Darstellungen auf verschiedenen Endgeräten, durch.

Durch die Einführung neuer Mobilfunkgeräte oder auch durch Inbox-Updates der jeweiligen Systeme verändert sich die Ansicht Ihrer E-Mail.

Deshalb sollte das Durchführen von regelmäßigen Tests jetzt an erster Stelle stehen. Damit stellen Sie sicher, dass Ihre E-Mail Kampagnen keine Fehler aufweisen.

Testen Sie Ihre Kampagne außerdem mit Hilfe von A/B Testing verschiedener Betreffzeilen, Pre-Header oder E-Mail Designs und stellen Sie fest, welche Variante Ihnen die höchsten Öffnungsraten und Klickraten einbringt. Durch die ständige Optimierung Ihrer mobilen Kampagnen erzielen Sie maximale Erfolge.

Der Trend der Mobilität wird auch an Ihnen nicht vorbeigehen, daher nehmen Sie sich die Zeit und optimieren Sie Ihre E-Mails für mobile Anwender.

 

Was jetzt?

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