So funktioniert Responsive E-Mail-Design [Infografik]
![So funktioniert Responsive E-Mail-Design [Infografik]](https://images.t3n.de/news/wp-content/uploads/2013/09/Bildschirmfoto-2013-09-11-um-12.22.34.png?class=hero "So funktioniert Responsive E-Mail-Design [Infografik]")
Die Verwendung von Responsive E-Mail-Design hat in der letzten Zeit zugenommen. Grund dafür ist, dass gegenwärtig etwa die Hälfte aller E-Mails über mobile Endgeräte aufgerufen werden. Doch bei 80 Prozent der Smartphone-Nutzer landen die Nachrichten direkt im digitalen Mülleimer, da sie – ohne optimiertes Layout – auf Smartphones oder Tablets schlecht zu lesen sind.
Responsive E-Mail-Design für optimale Ansicht
Die meisten E-Mails, die verschickt werden, sind für die Desktop-Ansicht optimiert. Wenn die E-Mail also mit einem Smartphone oder Tablet geöffnet wird, werden enthaltende Bilder eventuell nicht korrekt angezeigt oder sich in der E-Mail befindende Links können nicht geöffnet werden.
Was neben der richtigen Schriftgröße, Schriftart und Farbgebung entscheidend für Responsive E-Mail-Design ist und welche E-Mail-Apps die Optimierung nicht akzeptieren, könnt ihr der folgenden Infografik entnehmen. Sie bietet euch auch gleich einen CSS-Code für eine Media-Query, die die Darstellung von E-Mails für Bildschirmgrößen von 480 Pixeln abwärts anpasst. Damit könnt ihr direkt loslegen, die Lesbarkeit eurer E-Mails auf mobilen Endgeräten zu optimieren.
Ein Klick auf den unten stehenden Ausschnitt öffnet die komplette Infografik.
So funktioniert responsive Email-Design. (Screenshot: litmus)
Ebenfalls interessant:
via litmus.com
Eine angepasste (maßgeschneiderte) Werbe-E-Mail für das entsprechende Endgerät ist eine gute Idee. Jedoch kann ich mit die in HTML-eingebauten personalisierten
Schnüffel- (Tracking)-Links bzw. Tracking-Images (1×1-Pixel-Bilder) nicht toll finden.
Datenschutz ist da wirklich Fehlanzeige – vor-allem dann wenn die E-Mailadresse via
von Dritten ohne Zustimmung bei normalen Opt-in-Newsletter eingetragen werden kann.
Siehe: ‚Zalando-Newsletter‘.
Da das weder bei Gmail (iOS und Android) noch bei aktuellen Windows-Phones und schon garnicht bei irgendwelchen Feature-Phones funktioniert macht das leider wenig Sinn.
Besser wäre da „Fluid“-Design, also Tabellen mit relativen Breitenangaben statt festen Pixelwerten.
Wie Thomas Quensen schon schrieb, funktionieren responsive Emails nicht auf den Apps, d.h. öffne ich einen Newsletter z.B. mit meiner Gmail App auf meinem Smartphone, werden hier die responsiven Ansätze ignoriert.
Ich habe in einer Studie ca 680 Tests durchgeführt, um zu prüfen, welche der neuen Email-HTML-Ansätze auf welchen Endgeräten, in welchen Browsern, in welchen Webclients, Desktopclients, nativen Emailprogrammen und auch Apps wie dargestellt werden.
Mein Ergebnis: Die Versprechungen der „mobilen Revolution“ verschiedener Anbieter hat ihre Grenzen, die auf jeden Fall berücksichtigt werden sollten, bevor man seinen Kunden den „ganzheitlichen“ Newsletter verspricht.
Super Artikel, der bringts genau auf den Punkt. Auch wenn es nicht überall funktioniert, auf iphone und android (default-email-app) werden responsive designs unterstützt! Ich denk da kommt man nicht mehr drumrum…
Hier ein Artikel zu Responsive Email Designs: http://www.responsive-emails.com/de/5-schritte-zum-responsive-email-design.html
Vg, Hans-Helb
Danke für diesen hilfreichen Beitrag. Die Optimierung von E-Mails wird ein immer größeres Thema und vor allem in der Zeit der Smartphones sollte unbedingt mit dem responsive E-Mail Design gearbeitet werden. Für Interessierte gibt es hier einen weiteren tollen Artikel zu diesem Thema. https://www.mailjet.de/blog/news/tipps-und-tricks-fuer-mobil-optimierte-emails/