Was ist Responsive E-Mail-Design?

Teil 1

Laut Studien werden rund 40 % der Newsletter unterwegs und somit über mobile Endgeräte geöffnet. Oftmalsresponsive Design im E-Mail-Marketing werden E-Mails aber über den stationären PC anders dargestellt, als über Smartphones und Tablets. Bilder können auf mobilen Geräten beispielsweise oft nicht angezeigt werden oder die komplette Seite baut sich anders auf.

Öffnungen nach Endgerät

  • Desktop
  • Smartphone
  • Tablet
  • Mehrere Devices

Die Lösung hierfür lautet mobile-optimiertes Design, auch genannt Responsive E-Mail-Design!
Eine Herausforderung beim Responsive E-Mail-Design ist unter anderem, die E-Mails an die verschiedensten Displaygrößen, Bildformate, E-Mail Clients und Browser anzupassen.

Tipps zum Thema Responsive Design

Media Queries

Hierbei können eingebaute Media Queries helfen. Unter Media Queries versteht man CSS3-Befehle, die abrufen können, über welches Endgerät Ihre E-Mail empfangen wird. Ihre Newsletter und sonstigen Mails werden dann an das jeweilige Gerät angepasst. Eine Anpassung könnte zum Beispiel die Veränderung des Layouts an die Bildschirmbreite sein oder aber die Umwandlung von mehrspaltigen Mailings in eine einspaltige Ansicht.

Kontrastreiche Farben

Um es dem User noch einfacher zu machen, sollten Sie außerdem darauf achten, dass Sie in Ihrem Mailing kontrastreiche Farben verwenden. Wenn der User von unterwegs seine E-Mails abruft, sind die Lichtverhältnisse oft nicht optimal. Kontrastreiche Farben helfen dabei, den Text und die Bilder besser sehen zu können.

Alt-Tags

Beinhaltet Ihr Mailing Bilder, ist es außerdem empfehlenswert, sogenannte Alt-Tags dafür zu verwenden. Kann der Browser des Empfängers ein Bild nicht anzeigen, wird diesem trotzdem der Titel des Bildes oder der Grafik angezeigt. So weiß der Empfänger zumindest, was für ein Motiv ihm angezeigt werden sollte.

Auflösung

Auch die Auflösung der E-Mail sollte beachtet werden. Die gängige Maximalbreite für ein Mailing liegt bei circa 600 Pixel. Die meisten Tablets und Smartphones können diese Auflösung problemlos darstellen. Andere wiederum können beispielsweise nur 400 Pixel auflösen. Falls Ihr Mailing dann jedoch 600 Pixel beträgt, wird es an den Seiten unschön abgeschnitten und der User muss von Seite zu Seite scrollen. Dies soll vermieden werden, um eine möglichst einfache und übersichtliche Ansicht zu schaffen.

 

Eingebaute Links

Des Weiteren müssen eingebaute Links gut aufrufbar sein. Sie sollten also in Form eines fingergroßen Buttons dargestellt werden.
Bauen Sie außerdem Servicenummern in Ihre E-Mail ein, damit der Empfänger falls er Hilfe braucht, sofort mit seinem Smartphone darauf zugreifen kann.

Kurz & aussagekräftig

Halten Sie Ihre Texte außerdem kurz und dafür aussagekräftig! Die meisten mobilen User lesen Ihre Mails unterwegs und haben oftmals nur wenige Minuten Zeit dafür. Die Kernaussage der E-Mail sollte dem Leser also in wenigen Sätzen näher gebracht werden.

Haben Sie all diese Tipps beherzigt, testen Sie Ihr Mailing vorab auf möglichst vielen Endgeräten, um sicherzustellen, dass all Ihre Empfänger Ihre E-Mail optimal dargestellt empfangen können.

Teil 2

Responsive E-Mail-Designwenig Aufwand, großer Effekt

Haben Sie Ihren Newsletter schon einmal auf Smartphones oder Tablets getestet? Und Sie sind mit der Darstellung zufrieden? Glückwunsch! Denn erst knapp ein Fünftel der versendeten Newsletter sind für mobile Endgeräte optimiert – und das, obwohl schon 40% der Newsletter mobil abgerufen werden.

Doch was ist ein „mobil-optimiertes Design“, auch „responsive E-Mail-Design“ genannt? Unter responsive E-Mail-Design versteht man, dass sich Newsletter an die Gegebenheiten des empfangenden Geräts, z.B. an die Displaygröße, anpassen. Das heißt, dass beispielsweise Bilder und Texte gut lesbar sind, man nicht links/rechts scrollen muss und Links ohne Probleme angeklickt werden können.

mobile Öffnungen 43%
responsive Newsletter 17%

Jetzt stellt sich nur noch die Frage: Wie erreicht man ein responsive E-Mail-Design?
Die Antwort lautet: Mit Media Queries.

Media Queries, der Schlüssel für ein responsives Design

Das Kunststück ist es, das Mailing auf jedem Endgerät gut aussehen zu lassen und bedienbar zu machen. Media Queries sind CSS3-Befehle, die die Eigenheiten jedes Endgeräts berücksichtigen.

Beim Laden des Mailings fragen sie die Merkmale des Endgeräts ab und passen es so an, dass es optimal dargestellt wird. Zentraler Parameter ist die Fenster- oder Bildschirmbreite des Endgeräts. Je nach vorgefundener Pixelzahl in der Breite ändert sich das Layout und damit die Anordnung der Inhalte.

Was können Media Queries beeinflussen?

  • Mithilfe von Media Queries werden Tabellenbreite, Schriftgröße und Textumbrüche einfach dem Endgerät angepasst. So erhält jeder Abonnent Ihres Newsletters auch auf dem kleinsten Display einen zusammenhängenden, gut lesbaren Text.
  • Die Bilder können je nach Art des Endgeräts mitgezoomt oder ganz ausgeblendet werden.
  • Mit Media Queries lassen sich mehrspaltige Layouts an die Fensterbreite anpassen. Die Spalten werden dementsprechend untereinander angeordnet oder ausgeblendet, sodass kein Links-/Rechts-Scrollen nötig ist.
  • In der Ansicht für mobile Endgeräte können mithilfe von Media Queries die Weblinks als klickbare Buttons dargestellt werden. So kann der Leser auch mit Daumen oder Zeigefinger unkompliziert navigieren.

Sie sollten auf alle Fälle Ihre Newsletter regelmäßig auf verschiedenen Endgeräten testen, ob die Darstellung Ihren Wünschen entspricht!

Tipp: Nutzen Sie dazu auch die Vorschaufunktion des EMM mit den Einstellungen Desktop, Tablet (Portrait/Landscape), Mobile (Portrait/Landscape) oder die Inbox-Vorschau, die Ihnen für verschiedenste Geräte und Browser anzeigt, wie Ihr Mailing dort tatsächlich ankommt.