Einer aktuellen Studie von Litmus zufolge werden inzwischen 47 Prozent aller E-Mails auf mobilen Endgeräten geöffnet. Umso erstaunlicher ist der Anteil der Newsletter, die nach Angaben von Equinux mobile optimiert waren: Er lag im Juni 2013 nur bei 11,83 Prozent. Hier herrscht also ein großer Nachholbedarf. Mittel der Wahl für alle eMarketer, die dafür sorgen wollen, dass ihre E-Mails auf allen Endgeräten perfekt lesbar sind, ist Responsive Design.
Mit Responsive Design werden E-Mails automatisch immer in einem auf die Anzeige des jeweils von ihrem Empfänger genutzten Endgeräts angezeigt. Eine optimale Darstellung ist so allzeit gewährleistet. Damit dies funktioniert, müssen Newsletter jedoch entsprechend der Regeln des Responsive Designs in HTML umgesetzt werden. Und auch dann noch gibt es einige Einschränkungen.
Möglichkeiten und Grenzen des Responsive E-Mail Designs
Mit Responsive Design lassen sich E-Mails realisieren, die folgende Eigenschaften haben, um eine bestmögliche Anzeige auf unterschiedlichen Endgeräten zu gewährleisten:
·
Reihenfolge von Inhalten verändern:
Elemente und Artikel können untereinander gesetzt werden. Dabei ist auch die Reihenfolge der einzelnen Elemente im mobilen Design veränderbar. Dazu werden einfach im regulären Newsletter versteckte Inhalte in der mobilen Version ein- und nicht mehr erwünschte ausgeblendet.
Navigation
Die Navigation lässt sich zur bessern Übersichtlichkeit und Usability in ihrer Darstellung und Reihenfolge mobile optimiert darstellen.
Text: andere Textvarianten, Textausrichtung ändern, Text entfernen
Texte sind in der mobilen und der regulären Newsletter-Variante immer identisch. Textelemente können auch nicht automatisch in ein mobiles Design eingefügt oder aus ihm entfernt werden. Zudem ist die Ausrichtung der Texte immer identisch. Ein rechtsbündiger Text wird in beiden Versionen rechtsbündig angezeigt.
Schriftgrößen ändern
Die Schriftgröße bestimmter Textelemente kann in der mobilen Variante größer oder kleiner dargestellt werden.
Farben ändern
Anpassung des Layouts an die jeweilige Anzeigegröße
Das Layout kann automatisch z. B. von einem 3-spaltigen in ein 1-spaltiges Layout wechseln.
Bilder: skalieren, ein-, ausblenden und geänderte Ausrichtung
Bild- und Grafikelemente (auch Buttons), die nicht im regulären Newsletter angezeigt werden, können im mobilen Design eingeblendet werden. Dazu wird die betreffende Grafik in der regulären Variante auf eine Höhe und Breite von 0 Pixeln gesetzt. Um das Bild in der mobilen Version anzuzeigen, wird lediglich für Höhe und Breite des Elementes eine Pixelanzahl größer 0 (z. B. 300 x 220 Pixel) angegeben.
Bild- und Grafikelemente eines regulären Newsletters können in der mobilen Variante ausgeblendet werden. Dies geschieht bequem über den Befehl (display:none). Bilder, die in der regulären Newsletter-Version linksbündig ausgerichtet waren, können in der mobilen Variante zentriert oder auch rechtsbündig dargestellt werden.
Grenzen des Responsive E-Mail Designs
Einige Einschränkungen, denen Gestalter bei der Umsetzung ihrer Newsletter-Layout unterliegen, wurden bereits oben beschrieben. Hinzu kommt jedoch auch die Tatsache, dass die verschiedenen zum Rendern von E-Mails eingesetzten Engines wie etwa Gecko, Word oder Webkit Responsive Design unterschiedlich unterstützen.
Responsive Design und iOS funktionieren sehr gut. Bei Android-Geräten hingegen gibt es gravierende Unterschiede: Während die Samsungs Galaxy-Serie Responsive Design quasi ignoriert und vom Empfänger gescrollt werden muss, interpretiert das HTC One Responsive Design ohne Einschränkungen wie Geräte mit iOS. Entscheidend dafür ist der vom Hersteller vorinstallierte E-Mail Client. Bei Galaxy-Geräten ist dies Gmail.
Unterstützung von Responsive E-Mail Design
Die iOS Mail App, Android 4.X Email/OEM App, Windows Phone 7.5 und das BlackBerry OS7 und OS10 unterstützen Responsive E-Mail Design.
Keine Unterstützung bieten hingegen: die iPhone Gmail App, iPhone Mailbox App, iPhone Yahoo! Mail App, die Android Gmail App, die Android Yahoo! Mail App, BlackBerry OS5, Windows Mobile 6.1, Windows Phone 7 und Windows Phone 8.