Responsive HTML Email Design

Schöne E-Mails für Smartphone und Tablet

Responsive HTML Email (image: Vermeer van Delft, Woman in Blue Reading a Letter) Vermeer van Delft, Woman in Blue Reading a Letter

Responsive HTML Email ist das E-Mail Format der Zukunft. Warum? Natürlich weil die Zukunft Mobile ist. Und Mobile-ready Design bedeutet responsives Design. Das gilt auch für E-Mails. Daher werden wir an Responsive HTML Email nicht vorbei kommen.

Warum Responsive HTML Email?

Responsive HTML Email heißt das Stichwort, denn E-Mails werden zunehmend Mobile First gelesen. 65% of all email gets opened first on a mobile device titelt Venturebeat.

Of the 65 percent of email that gets opened on mobile gadgets, smartphones take home the lion’s share of messages. Around 16 percent of messages get opened on tablets — up one percent quarter over quarter..

Marketing Land fügt in einem eigenen Artikel an:

smartphone email opens peak in the “early morning,” (before working hours) whereas tablet email usage is concentrated in the evening, between 8 pm and 11 pm. However smartphone usage is dominant throughout the day.

Responsive HTML Email werden also immer wichtiger, wenn man Mobile-ready kommunizieren mag oder modernes E-Mail Marketing betreiben will.

Designing HTML email can be quite challenging, considering the limited capabilities of many email clients (readers). In contrast, most new email readers supports many of the latest trends in web design. What to do? Enter Responsive HTML Email. This course will show you how to design and construct an HTML email design that will render properly in such email readers and Outlook 2003 and Gmail, all the way through modern Android, Apple, and Windows phones. …

… schreibt Chris Converse. Sein populärer online Kurs (Udemy) befasst sich genau mit dem Thema und scheint eine gute Möglichkeit zu sein, sich schnell einen Überblick über Responsive HTML Emails zu verschaffen.

Auf A List Apart fragt ein Artikel Can Email Be Responsive? Natürlich liefert der Autor Jason Rodriguez selbst eine Antwort: Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile.

Was also tun um seine geliebten Marketing Mails und Newsletter Smartphone-ready zu bekommen und auf jedem Tablet gut aussehen lassen?

iconNatürlich könnte man sagen, der einfachste Weg um E-Mail grundsätzlich auf jedem Ausgabegerät gut aussehen zu lassen, ist reine Text-Mails zu schreiben. Fließtext ist ja schließlich von Grund auf Mobile First … äh, also irgendwie.

Reiner Fließtext ist natürlich super langweilig. Klickbare Links sind Mangelware. Die Conversion Rate sinkt und die Marketinabteilung trägt Trauer. Textwüsten sind abschreckend. Auch eine E-Mail sollte ein gewisses Maß an User Experience bieten. Ein attraktiver Call to Action Button hier, ein hübsches Bild da: schon hat man mit Darstellungsproblemen zu kämpfen und die gängigen Device-übergreifenden Sorgenfalten auf der Stirn.

Responsive HTML Email

Im Video weiter unten nennt Travis folgende Punkte die bei Responsive HTML Email zu berücksichtigen sind:

  • Eine HTML E-Mail ist keine Webseite, sie muss also auch nicht so strukturiert sein.
  • HEAD, BODY, Media Queries und andere Styles beeinflussende Elemente werden oft vom E-Mail Client “abgeschnitten”.
  • Alle Styles müssen inline sein.
  • Am besten bleibt man bei einspaltigem Layout.

31% of email marketers do not know their mobile email open rate, schreibt MarketingSherpa. Wisst Ihr wie viele Euerer Marketing E-Mails auf einem mobilen Endgerät betrachtet werden? Ich habe eben in MailChimp nachgesehen, wie hoch der Wert bei unserem IA Konferenz. Die Konzepter-Konferenz. Newsletter ist … und die Antwort ist: ich weiß es nicht. Die (kostenlose) MailChimp Version zeigt es nicht an.

E-Mail Newsletter für Smartphones und Tablets zu optimieren heißt:

  • Die Schrift etwas größer machen.
  • Einspaltige Layouts bevorzugen.
  • Inhalte abspecken.
  • Klare Call-to-Action Buttons haben (weniger ist auch hier mehr).
  • Fingerfreundliche, große Touchelemente (z. B. besagter CTA Button)
  • Sicherstellen, dass die E-Mail auch ohne Bilder gut lesbar ist

Wer seinen Boss überzeugen muss, dass Responsive HTML Email der einzige auf Dauer gangbare Weg ist, findet in The ultimate mobile email statistics overview viele wertvolle Angaben. Darunter zum Beispiel:

  • More email is read Mobile than on a desktop email client.
  • Mobile email opens have grown with 180% in three years.
  • The first link in a responsive design email on mobile has a 30% higher click rate than non-responsive design.
  • 68% of Gmail and Yahoo! users’ opens occur on a smartphone or tablet
  • und so weiter…

Zurück zum A List Apart Artikel:

Whether or not you like HTML email, it is a vital tool for nearly every business. When it comes to marketing, email consistently outperforms other channels like Facebook and Twitter. More importantly, email allows you to interact with a potentially massive audience in an increasingly personal way.

Responsive HTML Email Design basiert wie das bekannte Responsive Web Design auf flexiblen Bildern, flexiblem Layout und Media Queries. Wenn man Media Queries weg lässt (sie werden von Email Clients nicht so breit unterstützt wie man es gerne hätte) ist man auf der sicheren Seite und merkt, dass Responsive HTML Email Design tatsächlich recht einfach ist.

About Jan (456 Articles)
Informationsarchitekt und Konferenz-Veranstalter (IA Konferenz, die Konzepter-Konferenz: http://iakonferenz.org, MOBX Mobile UX Konferenz: http://mobxcon.com), Podcaster und Twitter Addict. Geboren in Prag, sesshaft in Berlin.

Leave a comment

Your email address will not be published.


*


css.php