t3n News Entwicklung

So funktioniert Responsive E-Mail-Design [Infografik]

So funktioniert Responsive E-Mail-Design [Infografik]

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

So funktioniert Responsive E-Mail-Design [Infografik]
Responsive Email-Design. (Screenshot: litmus)

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

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
4 Antworten
  1. von Zylol am 11.09.2013 (16:49 Uhr)

    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 Teilen
  2. von Thomas Quensen am 11.09.2013 (17:09 Uhr)

    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 Teilen
  3. von Katrin Krenn am 13.09.2013 (10:19 Uhr)

    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 Teilen
  4. von hans_helb am 03.02.2014 (16:35 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Design
Noch leichter zu responsiven E-Mails: Foundation for E-Mails 2 ist da
Noch leichter zu responsiven E-Mails: Foundation for E-Mails 2 ist da

Mit Foundation for E-Mails 2 ist jetzt der Nachfolger von Ink veröffentlicht worden. Wir verraten euch, was das Framework für responsive E-Mails für Neuerungen im Gepäck hat. » weiterlesen

Wie diese 14 Unternehmen mit E-Mails erfolgreich werben
Wie diese 14 Unternehmen mit E-Mails erfolgreich werben

Der E-Mail-Posteingang wird immer wichtiger und im Jahr 2016 zu einem essentiellem Teil der Kunden-Erfahrung. In diesem Artikel zeigen wir einige brillante Beispiele für Behavioral … » weiterlesen

Plain: So einfach kann E-Mail sein
Plain: So einfach kann E-Mail sein

Plain Email ist ein App-Konzept für einen effizienteren Umgang mit der täglichen E-Mail-Flut. Wir haben einen Blick auf den Prototyp geworfen. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?