#RED - Responsive Email Design (german)

A brief brief introduction into responsive email design, with it's biggest pitfalls. The main focus is on design, content strategy and best practices in gerneral.

If you like this make sure to follow me on twitter @fbnlrt.

Transcript

1. #RED Responsive Email Design oder auch Von Fabian Liehret @fbnlrt
2. –Eathan Marcotte „Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)“
3. 1. Warum #RED? 2. Das Problem 3. Falsche Methoden 4. Content Strategy 5. Design
4. 1. Warum #RED? 2. Probleme 3. Falsche Methoden 4. Content Strategy 5. Design
5. 47% aller Emails werden auf einem mobilen Gerät geöffnet. (Laut Litmus im September 2013) Fakt #1
6. Bis zu 80% aller mobilen User löschen eine Email, wenn diese nicht für mobile Geräte optimiert ist. (Amerikanische Studie Anfang 2013) Fakt #2
7. Bis zu 150 Mal täglich schauen wir auf unser Smartphone. Fakt #3
9. Daher...
10. #RED = Wichtig !
11. 1. Warum #RED? 2.Probleme 3. Falsche Methoden 4. Content Strategy 5. Design
12. Problem #1
14. Die Anzahl der Display-Größen von mobilen Geräten, auf denen eine Email empfangen und gelesen werden kann…
15. Problem #2
17. Die große Anzahl der dazu gehörenden Mail-Clients, die verwendet werden die Emails anzuzeigen, sie zu rendern…
18. Problem #3
20. Beim programmieren eines HTML-Newsletter, muss man so tun als wären wir gerade im Jahr 1999…
21. Stichwort: HTML TABLE LAYOUT
23. 1. Warum #RED? 2.Probleme 3. Falsche Methoden 4. Content Strategy 5. Design
24. • Der Inhalt der Email wird einfach auf die Breite des Mobilen Endgeräts skaliert • Es werden keine Layout- anpassungen vorgenommen Skalieren
25. • Das Layout ist so gewählt, dass es auf einer mobilen Breite gut aussieht • Auch der Desktop User erhält das mobile Layout > Platz wird verschenkt Mobile Only
26. 1. Warum #RED? 2.Probleme 3. Falsche Methoden 4. Content Strategy 5. Design
27. Es gibt eine Sache zu überdenken, bevor man überhaupt damit beginnt, sich über das Design oder die technische Umsetzung Gedanken zu machen: 
 Den Inhalt der Email
28. ✓ So viel wie nötig, so wenig wie möglich! ✓ Bekannte Design Patterns nutzen ✓ Minimalismus ✓ Lange Texte an der richtigen Stelle ✓ Call-to-Action wiederholen
29. 1. Warum #RED? 2.Probleme 3. Falsche Methoden 4. Content Strategy 5. Design
30. Mehrspaltigkeit vs Einspaltig
31. Mehrspaltigkeit ist möglich!
33. aber…
34. ✓ Das Layout kann komplexeren Inhalt darstellen ✓ Optisch raffinierter - Höherer Aufwand in der Entwicklung - Durch schmale Spalten kann sich die Lesbarkeit verschlechtern > 1 Spalten ✓ Sehr gut scanbar auf mobilen Geräten ✓ Einfachere Konzeption und Programmierung ✓ Sehr gute Lesbarkeit, da die Schriftgröße frei gewählt werden kann - Gestalterische Möglichkeiten werden begrenzt 1 Spalte
36. Pro Tip: Go Mobile First!
37. Typography
38. Auf mobilen Geräten sollte der Fließtext eine Schriftgröße von 16-19px haben. Ebenfalls sollte der Zeilenabstand auf ca. 140% erhöht werden. Richtig Die Schriftgröße und der Zeilenabstand des Fließtextes ist im mobilen Layout nicht angepasst worden und somit viel zu klein. In diesem Beispiel:
 12px / 120% Falsch
39. Bilder
40. -Hintergrundbilder können nicht verwendet werden
 => Text auf Bild muss als ganzes Bild eingesetzt werden -Einige Email-Clients (MS Outlook) haben standardmäßig den Bilder-Download deaktiviert -Der User muss erst bestätigen dass Bilder heruntergeladen werden dürfen -Solange werden keine Bilder angezeigt
42. Positiv Beispiel
43. Bilder: AN Bilder: AUS
45. Call-to-Action
46. Auf mobilen Geräten sollte der CTA eine Größe von mindestens 44 x 44px haben. Ebenfalls sollte die Breite auf 100% erhöht werden. Richtig Der CTA wurde weder in der Höhe, noch in der Breite geändert. In diesem Beispiel:
 20 x 140px Falsch
47. ✓ Der Call-to-Action sollte bei langen Newslettern im Unteren Bereich wiederholt werden ✓ Das Wording des Call-to-Actions sollte aussagekräftig sein
48. Links
49. ✓ Der Text-Link muss eindeutig als Link erkennbar sein ✓ Text Links sollten genügend Abstand zu einander haben ✓ Im Idealfall sollten Links nur auf mobil optimierte Websiten verlinken
50. Danke. follow me @fbnlrt