Infografik

So funktioniert Responsive E-Mail-Design [Infografik]

Responsive Email-Design. (Screenshot: litmus)

Derzeit werden etwa die Hälfte aller E-Mails auf mobilen Endgeräten aufgerufen – aber nicht unbedingt gelesen. Ein Grund dafür: Das Design der E-Mails ist nicht für mobile Geräte optimiert. Die Lösung heißt Responsive E-Mail-Design.

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)

So funktioniert responsive Email-Design. (Screenshot: litmus)

Ebenfalls interessant:

via litmus.com

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

9 Kommentare
Zylol
Zylol

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‘.

Antworten
Thomas Quensen
Thomas Quensen

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.

Antworten
Katrin Krenn
Katrin Krenn

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.

Antworten
hans_helb
hans_helb

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

Antworten
Mailjet
Mailjet

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/

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung