Mobile E-Mail: Jetzt optimieren – mit Responsive Design

Mobile E.Mail: Jetzt optimieren - mit Responsive Design

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.

 

Grenzen des responsive E-Mail Design


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.

 



Hinweis: Bitte die mit * gekennzeichneten Felder ausfüllen.


Kommentar schreiben

Kommentare: 0