Die steigenden Zahlen bei der Nutzung mobiler Endgeräte lassen eine Anpassung der E-Mail an die kleineren Bildschirme oder geänderten Lesegewohnheiten unabdingbar erscheinen.

Das W3C-Konsortium bietet bei HTML4 und CSS 2 die ursprünglich für die Unterscheidung des Druck- und Printlayouts genutzte Media Query. Für weitere Informationen siehe http://www.w3.org/TR/css3-mediaqueries/#media0.

Media Queries​

Media Queries ermöglichen grundsätzlich eine Unterscheidung der Darstellungsweise je nach Medientyp (Print, Online). Außerdem können Informationen für eine automatische Anpassung je nach Breite und Höhe des darstellenden Endgeräts und den Farben bei der Wiedergabe mitgegeben werden. Zum Beispiel eine schwarze Hintergrundfarbe. Als Medientyp kann derzeit nur zwischen Print und Online gewählt werden. Es gibt aktuell keine explizite Auswahl mobiler Endgeräte. Je nach Breite des Geräts werden aus den Stylesheets (CSS), die entsprechenden Layoutinformationen für die Nachricht gezogen.

Die Informationen bezüglich der Breite und Höhe des Displays ermöglichen es dem E-Mail-Marketer, eine für die Darstellung auf dem Handy optimierte Wiedergabe der E-Mail zu erzeugen.

Es wird genau genommen nur eine Online-Version erzeugt, welche das Layout auf die Breite des darstellenden Geräts skaliert. Das jeweilige Endgerät, zum Beispiel iPhone, Blackberry oder Android, und dessen Besonderheiten, können dabei nur im Hinblick auf die Breite berücksichtigt werden.

Einschränkungen von Media Queries​

Leider unterstützen bisher nicht alle E-Mail-Clients und Wiedergabegeräte die Mediaqueries. Gmail- oder Blackberry-Gerät beispielsweise unterstützen keine Media Queries.

Für den Marketer bedeutet dies, dass bei einem Einsatz der Mediaqueries zur automatischen Skalierung der E-Mail, gewährleistet bleiben muss, dass die Darstellung auch dann korrekt erfolgt, wenn diese Angaben nicht berücksichtigt werden. Zumeist ist es für diesen Fall auch hilfreich, zusätzlich einen Read-Online-Link und einen Mobile-Link anzubieten.

Es können also keine zwei Varianten der Nachricht hinterlegt werden, welche je nach Bedarf angezeigt werden. Vielmehr muss das Layout der Nachricht so gestaltet sein, dass diese mit oder ohne Anpassung korrekt dargestellt wird.

Darüber hinaus ist es notwendig, bei der Wahl des richtigen Layouts die Größenänderung zu berücksichtigen. Verschachtelte Tabellen oder zahlreiche Spalten, wie Sie bei aufwendigen Layouts häufig eingesetzt werden, können nicht skaliert werden, ohne die korrekte Anzeige einzubüßen.

Beispiele:

  • Bilder müssen sowohl bei der ursprünglichen Auflösung als auch nach einer Skalierung deutlich dargestellt werden. Die Skalierung erfolgt dynamisch im E-Mail-Client und kann nicht über ein Grafiktool optimiert werden.

  • Das Layout sollte möglichst wenige Tabellenspalten bzw. keine Verschachtelung aufweisen. Andernfalls geht die korrekte Anordnung der E-Mail bei der Skalierung verloren.

  • Werden Teile der Nachricht bei mobilen Endgeräten dynamisch ausgeblendet, muss auch der Empfänger, bei dem diese Teile dargestellt werden, die Nachricht auf einem Handy interpretieren können.

Für weitere Informationen kontaktieren Sie Ihren Ansprechpartner.

Media Queries und Mapp Engage​

Bei der Nutzung eines CMS-System können die Templates derart angepasst werden, dass der Newsletter eine automatische Anpassung für mobile Endgeräte unterstützt. Der Benutzer muss dann keinerlei eigene Programmierkenntnisse besitzen, um dynamische E-Mails zu erzeugen.

Bei Kunden ohne CMS-System muss der Web-Designer im HTML-Template entsprechende Mediaqueries manuell integrieren. Es empfiehlt sich dann ein Testversand über die Mapp Engage-Funktion Nachrichten Rendering (falls diese für Ihr System aktiviert wurde). So kann überprüft werden, ob die E-Mail auch tatsächlich auf allen Endgeräten korrekt dargestellt wird.

Unsere Kundendienstmitarbeiter können Sie bei der Entwicklung skalierbarer E-Mail-Nachrichten unterstützen.

Anbei Screenshots eines skalierten Newsletters:

Outlook

Iphone