Für alle, die von Responsive und reaktionsfähigem HTML5 Voodoo die Schnauze voll haben: Kein Problem. Mach‘ doch was mit E-Mail. Alles mit Tabellen, alles inline, alles old-school und obendrauf gibt es noch den ganzen responsive Kram. Das können die jungen Wilden mit ihrem CSS3 gar nicht mehr, hier ist solides Handwerk aus mehreren Jahrzehnten nötig. Denn nur bei E-Mails ist gleichzeitig Technik aus dem Jahr 1996 und 2011 gefragt.
Ich bin nicht der Meinung, dass E-Mail tot ist. Heutzutage hat jeder ein Smartphone und trägt seine E-Mail Inbox mit sich herum. E-Mail ist vorerst weiterhin das Ding überhaupt und ich finde es jedesmal schade, dass selbst im Jahr 2012 Mails auf meinem Smartphone falsch dargestellt werden.
Warum ich mich mit dem Thema beschäftige? Weil es geht. Der Markt der E-Mail Programme ist global gesehen genauso fragmentiert wie bei den Browsern. Das wird in Statistiken wie dem email client market share as of June 2011 deutlich. Liste ohne Unterversionen.
- 27.62% Outlook
- 16.01% iOS Devices (iPhone, iPad and iPod Touch)
- 12.14% Hotmail
- 11.13% Apple Mail
Achtung. Völlig anderes Bild. Jetzt kommen die Feiertage zwischen den Jahren. Logisch.
- 37.4% iPhone
- 14.8% Gmail
- 10.4% iPad
- 6.1% Android
Quelle 1 und 2. Man beachte bitte, dass Statistik bei E-Mail generell immer nur eine vage Ahnung sind. Es gibt aus techn. Gründen keine genauen Zahlen.
Los geht’s.
Einen guten und umfangreichen Einstieg in englischer Sprache bietet campaignmonitor.com: Designing and building emails. Da finden sich Perlen wie email design guidelines und die legendäre guide to css support in email Tabelle. Die gibt es auch als PDF oder Excel.
Alternativ und nicht ganz so umfangreich reicht für den Einstieg der ältere Artikel Rock Solid HTML Emails von David Greiner, einem Co-Founder von Campaign Monitor.
Für Leute, die es noch umfassender mögen gibt es die weltweit einmalige Sammlung der MailChimp Guides. Die beschreiben fast alles, was auch nur ansatzweise mit E-Mail zu tun hat.
Da ihr den Kram sowieso nicht lest:
Man kann auch einfach loslegen und sich ein Template kopieren um es anzupassen (ja, das machen alle. Läuft). Vorher reicht ein schneller Blick in den Artikel Coding Your HTML Emails: Fundamental Principles. Der ist wirklich kurz und kommt auf den Punkt.
Keep it simple. TABLES are your friend. 600 pixels wide max. 99% of your CSS won’t work. plain-old FONT tags are safest. Webmail will strip out your DOCTYPE, BODY, and HEAD tags.
E-Mail Templates in englisch
Pro-Tipp: campaignmonitor.com – 100+ templates, die gibt es auch als Packet, mit PSD und allem. Unten rechts kann man die runterladen. Mehr braucht man eigentlich nicht.
Bei github liegen die 36 Email-Blueprints von mailchimp.com. Die sind auch gut.
E-Mail Templates in deutsch
Ich schätze Cleverreach.de sehr. Guter Dienst, schneller Service und Firmensitz in DE. Die bieten ihren Kunden kostenlose HTML-Templates an und haben deutschsprachige Tipps zur Erstellung von E-Mails und Vorlagen.
Tools
Ein Spielzeug. Für den Anfang ganz nett. Damit kann man die normalen CSS-Styles in Inline-Styles umwandeln. Richtig arbeiten kann man damit natürlich nicht, aber das Tool zeigt auf, worum es eigentlich geht. inlinestyler: Converts CSS rules into inline style attributes
Das war aber bislang alles nur Kindergarten.
Die Kunst kommt jetzt.
Was den Artikeln generell bislang fehlt, sind die Smartphones, denn jeder, wirklich jeder liest seine Mails auf dem Handy, da darf man sich nichts vormachen. Egal ob Frisöse, Busfahrer oder das ganze B2B, alle schauen sich ihre Mails auf dem Smartphone an. Und da geht noch was. Mails sehen auf dem Handy meistens doof aus. Wer sich damit beschäftigt, hat dann den im ersten Absatz erwähnten, reaktionsfähigen Kram dann doch wieder an der Backe.
Responsive Layout in Newslettern. Was es alles gibt. Tolle Sache, das ist wirklich schick.
Los geht es mit den mobile optimized template von campaignmonitor. Ausführlich wird das im Artikel optimizing your emails for mobile devices with @media beschrieben.
Umfassend ist der Artikel From Monitor To Mobile: Optimizing Email Newsletters With CSS auf smashing magazine. Der vermittelt auch Einsteigern sehr gut, wie unterschiedlich die Mails heutzutage dargestellt werden. Das ist der ÜBER-Artikel mit sehr vielen Links, die das Thema umfassend behandeln. Empfehlung.
Nebenbei. Es ist schon ein wenig witzig, dass alle mobilen Webbrowser mehr können als Outlook. Verrückte Welt. In Newslettern, bzw. auf den Smartphones dieser Welt funktionieren plötzlich so Spielereien wie
In Chrome und Safari, bzw auf deinem Handy, nicht in Outlook, FF, IE, sieht man hier einen leuchtenden Button. via ebiene.de: Pulsierender Call-to-Action Button mit CSS3 und WebKit-Animation
Eher zufällig gefunden habe ich das da: HTML EMAIL BOILERPLATE. Das ist ein Knaller, voll mit allen Gaga-Features mit denen man einfach los legen kann. Sensationelles Ding (auf den ersten Blick).
Und ein Wort zur Schrift: In der mobilen Version von Mail wird ein 17 – 22 pixel font empfohlen.
So. Jetzt habe ich genug für meine kleine Linksammlung zu Email im Jahr 2012. Das reicht auch. Falls ihr noch klicken wollt, seht euch die Präsentation an, wenn möglich im Vollbild. Eine eigentlich furchtbare Präsentation. Aber sie gibt einen guten Eindruck, worum es bei dem ganzen mobilen Geschnacksel geht.
Slideshare Präsentation: Mobile email – chasing context direkt Link
…ich behaupte mal das 9 von 10 „Smartphon Junkies“ nicht den Unterschied wissen zwischen e-mail + Email ??!!
Eine Kunst ist es aber auch, einen Beiträg leserlich zu schreiben und das ist hier in der letzten Hälfte, des inhaltich guten und amüsanten Beitrages, ein bisschen abhanden gegekommen!