Responsive Webdesign: Auch E-Mails dürfen auf allen Endgeräten glänzen.

Der Trend, Internetauftritte in Form von Responsive Webdesign umzusetzen, ist inzwischen weit verbreitet. Websites werden dabei trotz eines gemeinsamen technischen Kerns je nach Endgerät unterschiedlich dargestellt. Somit kann ein Auftritt einmal gebaut und mit Inhalten bestückt werden, der in seiner Darstellung dann aber unterschiedlich auf die zur Verfügung stehende Bildschirmbreite und Höhe reagiert. Ein komfortabler Weg, um mit einem Internetauftritt seine Zielgruppe nicht nur auf Desktop-PCs, sondern auch auf Tablets und Smartphones anzusprechen. Warum eigentlich nutzt man diese Technik nicht auch für die Darstellung von ausgestalteten HTML-E-Mails?

Die Herausforderungen für die Umsetzung von responsiven E-Mails sind denen einer Website-Umsetzung sehr ähnlich. Auf unterschiedlichen Bildschirmen soll die E-Mail optisch überzeugen und den zur Verfügung stehenden Platz optimal ausnutzen. Hinzu kommt eine weitere Besonderheit: Oft werden E-Mails nicht in Web-Browsern angezeigt, sondern in E-Mail-Clients – eigenständigen Programmen mit einem störrischen Eigenleben, wenn es um die standardkonforme Darstellung von HTML und CSS geht. Hier greifen einige Ansätze nicht, die bei Internetauftritten sonst so hilfreich sind. Beispielsweise kann nicht davon ausgegangen werden, dass Mail-Clients Media-Queries-Angaben richtig verarbeiten können.Es scheint daher die beste Vorgehensweise, eine Mail mit schlanken und altvertrauten – und damit auch in den Mailprogrammen bekannten – HTML-Elementen so zu gestalten, dass sie auf Desktops und mobilen Endgeräten bereits gut funktioniert. Der Einsatz von Media-Queries kann dann eine gute Ergänzung sein, um die Darstellung auf modernen Smartphones zusätzlich zu optimieren.

Die Probleme sind aber absehbar: Es ist oft nicht möglich, alle möglichen Endgeräte und Mailprogramme verfügbar zu halten, um das Arbeitsergebnis darauf zu testen. Hierfür gibt es allerdings ein paar nützliche Helfer:

Email on Acid
Der Web-Dienst lässt das Testing in 65 verschiedenen Kombinationen aus den meistgenutzten Mailprogrammen und Smartphones per Screenshot zu.
http://www.emailonacid.com/

Litmus
Mehr als das Screenshot-Testing erlaubt Litmus. hier können in einer Virtual Machine Mail-Templates in echten Mailprogrammen getestet werden.
http://litmus.com/

Fractal
Von uns noch nicht getestet, präsentiert sich Fractal mit großen Versprechungen auf seiner Website:
„Build your email like a web page with no tables, and we’ll make it work in all the major email clients.“
https://www.getfractal.com/