E-Mails für unterschiedliche Clients optimieren

E-Mails werden längst nicht mehr alleinig auf dem Desktop-Computer gelesen, sondern auch auf verschiedenen mobilen Endgeräten. Die unterschiedlichen Bildschirmgrößen verschiedener Tablets und Smartphones führen dazu, dass das Layout Ihrer E-Mails nicht bei allen Empfängern einheitlich erscheint. Möglicherweise sind wichtige Teile Ihrer E-Mail schlecht oder gar nicht lesbar oder das Layout ist so wenig mobilfreundlich, dass Empfänger Ihre E-Mails direkt wieder schließen. Angesichts der Tatsache, dass eine steigende Anzahl an Empfängern ihre E-Mails mobil lesen, ist es unumgänglich, ein mobiles Layout zu verwenden. Die Lösung ist ein responsives Design, das sich an die Größe des Bildschirms anpasst, beispielsweise indem Bilder skaliert und zweispaltige Designs zu einspaltigen angepasst werden. Doch sind damit alle Darstellungsprobleme schon behoben? Leider nicht. Warum auch bei responsiven Layouts Probleme auftreten Zu den unterschiedlichen Geräten mit ihren individuellen Bildschirmgrößen kommen verschiedene Betriebssysteme, Browser und E-Mail Clients, die jeweils Einfluss auf die Darstellung nehmen. Die Kombination hieraus ergibt eine Vielzahl unterschiedlicher technischer Voraussetzungen, unter denen Ihre E-Mails empfangen werden. Was beispielsweise auf einem iPad ansprechend angezeigt wird, kann auf einem Windows Phone 7, über Outlook oder Gmail abgerufen, ganz anders aussehen. Ein Beispiel für die unterschiedliche Interpretation von E-Mails sind die sogenannten Media Queries, mit denen responsive E-Mails erzeugt werden. Gmail jedoch unterstützt diese Media Queries nicht und beschränkt die designtechnischen Möglichkeiten in E-Mails. Dies liegt daran, dass Google aus Sicherheitsgründen die meisten Informationen aus dem head-Tag der E-Mail entfernt, und damit auch dort hinterlegte Style-Informationen. Dies erfordert mitunter einen erheblichen Designaufwand bei der Umgehung dieser Hürden, um E-Mails auch für Gmail-Empfänger ansprechend anzuzeigen. Zumindest für Gmail gibt es Grund zur Hoffnung, denn Google kündigte an, hier nachzubessern und zukünftig Media Queries und auch Embedded Styles zu unterstützen. Beides erleichtert Entwicklern und Designern die Arbeit. Doch auch mit dieser Neuerung gibt es einiges zu beachten, um E-Mails allen Empfängern optimal darzustellen. Was Sie bei der Konzeption und Erstellung Ihrer E-Mail-Kampagnen beachten sollten Wie stellen Sie sicher, dass Ihre E-Mails lesbar bei Ihren Empfängern ankommen und Ihr Design einen professionellen Eindruck macht? Zunächst einmal sollten Sie auswerten, wie der Großteil Ihrer Empfänger Ihre E-Mails tatsächlich abruft und liest. Sind es Android-Geräte oder führt das Betriebssystem iOS? Verwenden viele Ihrer Abonnenten den Thunderbird, um ihre E-Mails abzurufen? Sind viele Gmail-Adressen darunter? Eine solche Auswertung zeigt Ihnen, für welche Konstellationen Sie Ihre Kampagnen unbedingt testen sollten. Achten Sie außerdem auf die folgenden Punkte, um auf der sicheren Seite zu sein: Bilder Bilder sind wichtig, denn sie wecken Emotionen, stellen beworbene Produkte dar und dienen als Blickfang in Ihren E-Mail Kampagnen. Achten Sie jedoch darauf, dass Ihre Bilder auch in kleinerem Format zu erkennen sind. Verwenden Sie daher möglichst einfache Grafiken oder Fotos. Verstecken Sie keine wichtigen Informationen in Bildern, sondern wählen Sie immer Text für die wichtigsten Inhalte sowie Calls-to-Action. Gestalten Sie Buttons zum Beispiel als formatierte Textlinks anstatt als Bild, um sicherzugehen, dass diese auch dargestellt werden. Achten Sie hierbei darauf, ausreichend Platz um den Link herum frei zu lassen, damit Nutzer ihn problemlos auch auf einem kleinen Bildschirm anklicken können. Werden Ihre Bilder beim Empfänger standardmäßig unterdrückt, wie dies bei vielen Clients gängige Praxis ist, können Informationen verloren gehen. Alternativtext für alle wichtigen Bilder sorgt dafür, dass Ihre Abonnenten dennoch wissen, worum es geht. Testen Sie Ihre E-Mails am besten auch mit deaktivierten Bildern, um festzustellen, ob alle Inhalte vorhanden sind und wie sich die fehlenden Bilder auf Ihr Layout auswirken. Und schließlich spielt auch die Bildgröße eine Rolle, denn zu große Bilder verlangsamen die Ladezeit Ihrer E-Mails erheblich und erhöhen das Risiko, dass die Empfänger Ihre E-Mail nicht lesen. Gerade mobil und unterwegs müssen E-Mails zügig geladen werden, auch mit Bildern. Auch kann es passieren, dass E-Mail Clients zu große E-Mails nicht zulassen. Text und Freiflächen Auch wenn Sie die Schriftart und -größe in Ihrem Layout festlegen, so hängt die tatsächlich angezeigte Größe Ihrer Texte erheblich vom E-Mail Client und verwendeten Browser ab. Dies bedeutet, dass Ihre Inhalte 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 können hier sehr variieren. Verwenden Sie kürzere Texte, die ohnehin einfacher zu lesen sind, gerade auf mobilen Endgeräten. Brechen Sie lange Textabschnitte auf, indem Sie beispielsweise Inhalte nur anteasern und dann einen Link zum Weiterlesen einfügen, der etwa auf Ihren Blog verweist, auf eine FAQ-Seite oder Produktseite. Fügen Sie Abstandhalter ein, die dafür sorgen, dass Texte zu dicht an andere Elemente in Ihrer E-Mail (der folgende Textabschnitt oder ein angrenzendes Bild) 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. Inhalte Denken Sie bei der Konzeption Ihrer E-Mails daran, dass Empfänger den oberen Teil als erstes sehen. Wenn Sie hier ein Bild platzieren, das nicht angezeigt wird, fehlen möglicherweise wichtige Informationen. Selbst wenn Sie Alternativtexte verwenden, sieht eine solche E-Mail wenig ansprechend aus. Sicher gehen Sie, wenn Sie HTML oder MJML für den oberen Bereich Ihrer E-Mail verwenden und hier die wichtigsten Inhalte platzieren, sodass Empfänger beim ersten Blick sehen, worum es geht und was der Mehrwert in Ihrer E-Mail ist. Beachten Sie also schon bei der Planung, welche Reihenfolge der Inhalte strategisch sinnvoll ist, priorisieren Sie und ordnen die Elemente entsprechend an. Und zu guter Letzt berücksichtigen Sie bei der Planung Ihrer E-Mails auch das kleinere Format auf mobilen Endgeräten: Versuchen, Sie Ihre Betreffzeilen möglichst kurz zu halten, um vollständig angezeigt zu werden. Auch ein kurzer Absender kann Vorteile bringen. Denken Sie außerdem daran, dass der Preheader Empfängern als Erstes angezeigt wird und welche Informationen Sie hier unterbringen möchten. Übrigens: E-Mails werden zunehmend auch mit Wearables wie einer Smart Watch empfangen. Sicherlich wird niemand einen langen Newsletter mit Produktneuheiten auf einer Uhr lesen wollen, für die Zukunft lohnt es jedoch, die neuen Voraussetzungen auf der sehr geringen Bildschirmgröße im Hinterkopf zu behalten und zu analysieren, welche Ihrer Kampagnen zukünftig auch auf Wearables lesbar sein soll (beispielsweise wichtige E-Mails wie Versandbestätigungen). Fazit Die vielen unterschiedlichen Clients, Browser und Betriebssysteme erschweren die Entwicklung eines einheitlichen Designs, das allen Empfängern gleich angezeigt wird. Auch bei responsiven E-Mails ist nicht sichergestellt, dass das Layout optimal dargestellt wird. Beachten Sie deshalb unsere Tipps für Ihr E-Mail Design, um Anzeigefehler zu minimieren und sicherzustellen, dass Ihre E-Mails von Empfängern gelesen werden und ihre Wirkung nicht verfehlen. Testen Sie außerdem regelmäßig, wie Ihre E-Mails auf den verschiedenen Systemen angezeigt werden und werten Sie aus, welche Clients am häufigsten bei Ihren Abonnenten vertreten sind, damit Sie gezielt auf diese optimieren können.