Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung

So funktioniert Responsive E-Mail-Design

    So funktioniert Responsive E-Mail-Design
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)

via litmus.com

Finde einen Job, den du liebst zum Thema Webdesign, Mediengestalter

4 Reaktionen
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

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

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

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 (1x1-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

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

Abbrechen