Bei einigen neuen Bildschirmen werden HTML-E-Mails nur mit Mini-Bildern und viel zu schmalen Spalten dargestellt. Yvonne Perdelwitz von postina.net mit einer praktikablen und recht einfachen Lösung für das Darstellungsproblem.
Full HD und Retina-Displays sind immer verbreiteter. Wir, als E-Mail-Designer und Programmierer, sind damit vor die Herausforderung gestellt, die E-Mails nicht nur für unterschiedlichste Endgeräte und E-Mail Clients (zB Outlook) sondern auch für verschiedene Bildschirme optimieren zu müssen.
Fehlerhafte Darstellung auf Full HD++-IPS-Displays
Hintergrund ist, dass die meisten hochauflösenden Bildschirme eine etwa viermal höhere Pixeldichte als normale Bildschirme haben. Bei manchen Bildschirmen wie dem Full HD++-IPS-Display des Lenovo Think Pad T550 werden die Newsletter im Posteingang mit verkleinerten Bildern und Tabellen zerrissen dargestellt. Die Bilder sind zu klein, die Tabellen zu schmal, es macht wirklich keinen Spaß, die Inhalte zu lesen.
Einige einfache Optimierungen im Quellcode schaffen Abhilfe
Wir mussten ein Weilchen probieren und testen, doch schlussendlich haben wir eine praktikable und zudem recht einfache Lösung gefunden. Folgende Codeanpassung im Head der E-Mail sorgt dafür, dass die Bilder nicht verkleinert werden:
<html xmlns=“http://www.w3.org/1999/xhtml“ xmlns:v=“urn:schemas-microsoft-com:vml“ xmlns:o=“urn:schemas-microsoft-com:office:office“>
<head>
<!–[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]–>
Zudem muss bei allen Tabellen zusätzlich zur normalen width-Angabe noch einmal im style die Breite angegeben werden (table width=“600″ style=“width: 600px“). Dadurch wird auch die HTML-E-Mail in der richtigen Breite dargestellt. Bei leeren Tabellenspalten (mit denen man zB. einen Abstand zum Rand erzeugen möchte), muss die style-width-Angabe ebenfalls in der Tabellenspalte (td width=“10″ style=“width: 10px“) angegeben werden.
Der Aufwand ein bestehendes Template für den Empfang auf den neuen Bildschirmen zu optimieren, ist also wirklich vergleichsweise gering. Die Optimierung des recht umfangreichen absolit-Templates hat inklusive Testings etwas mehr als eine Stunde gedauert.
Praxistipp: So werden die Bilder nicht nur richtig gross, sondern auch scharf
Eine praktikable Lösung, damit die Bilder auf hochauflösenden Bildschirmen nicht nur in der richtigen Größe, sondern auch gestochen scharf dargestellt werden, ist es, die Bilder in doppelter Breite (und somit viermal so gross) abzuspeichern und zu hinterlegen. Das Thema wurde bereits an anderer Stelle ausführlicher diskutiert (www.absolit.de/gestaltung/newsletter-fuer-hochaufloesende-bildschirme-optimieren) und wird hier nur der Vollständigkeit halber angeführt. War ein Header vorher 600px x 200px groß, wird die Längsseite doppelt genommen. Er ist also 1.200px x 400px groß. Damit die E-Mail dadurch nicht zu voluminös wird und eventuell Bilder nicht vollständig geladen werden, sollte man die Bilder zwar groß aber in kleinstmöglicher Qualität abspeichern (z.B. JPEG im Photoshop als „niedrig“ abspeichern).
Übrigens gilt dies nur für Pixelgrafiken. Vektorgrafiken (SVG-Format) werden immer scharf dargestellt.
Mehr zum Thema:
https://www.absolit.de/gestaltung/newsletter-fuer-hochaufloesende-bildschirme-optimieren
https://litmus.com/blog/understanding-retina-images-in-html-email?ref=emailmarketingtipps.de
https://blog.kulturbanause.de/2012/04/websites-und-bilder-fur-high-resolution-displays-retina-optimieren/
http://www.leemunroe.com/designing-for-high-resolution-retina-displays/
http://justcreative.com/2016/01/14/4k-and-retina-5k-website-design/