Squeezing Emails onto Mobile

Slides from my talk at Frontend Conference Zürich (28 August 2014).

Transcript

1. Squeezing E-Mails onto Mobile Julie Ng 28 August 2014 Frontend Conference Zürich
2. Julie Ng • American Designer living in Munich • Previously Designer at ancestry.com for European Markets • UX Designer, Developer, Consultant • Refresh Munich • Runner, Climber
3. Email is... "this beautiful cockroach 
 of a social network " Graphic: Gilad Fried, Noun Project. Quote: Alexis C. Madrigal, The Atlantic.
5. You secretly love Email
7. E-Mail done right is teamwork
8. 6+ months ago Newsletter Offer for Asia 6 months ago Book Fight 6 months ago Email Confirmation Flight details
 Pricing incl. taxes
 Calendar .ics as attachment 4 days before Trip Reminder Time Zone Difference
 Pricing incl. Weather
 Currency 1 day before Boarding Pass Confirmation 1 day before Online Check-in Reminder Holistic User Experience with Email
9. Types of Email Source: Mailjet Marketing Notification Transactional Characteristic Bulk Auto-responder, Alerts Expected Relation one-to-many one-to-one one-to-one Unsubscribe Yes Yes No Examples Newsletter, announcements, etc. Feedback Request, new followers, etc. Invoice, shipping notifications, etc.
10. Good Email is Teamwork Marketing Marketing 
 Managers Automated E-Mails
 ! Marketing Manager UX Designer Visual/Web Designer Frontend Developer Backend Architect
11. Exercise A simple invoice?
12. Alert: Credit Card Expiring... Not just an invoice Reminder Upcoming payment. Esp. if longer billing periods. Confirmation With PDF invoice for your records. Billing Error :-(
13. Examples (in Browser)
14. Frontend: Mobile Design Strategy • SCALABLE
 Default scaling from email client
 Example: Jawbone Up Weekly Summary • FLUID
 Some adjustments: fonts, widths
 Example: Heroku invoice • RESPONSIVE
 Layout changes
 Example: Lufthansa Trip Reminder with weather, currency, support phone, etc. Terminology Source: Rodriguez, Jason. 10 April 2014.
 Understanding Mobile Email Approaches (Litmus)
15. Tools
16. Campaign Monitor: the Ultimate Guide to CSS https://www.campaignmonitor.com/css/
17. Litmus Email Testing https://litmus.com/
18. Mailchimp CSS Inliner Tool http://templates.mailchimp.com/resources/inline-css/ Premailer http://premailer.dialect.ca/
19. Bulletproof Email Buttons http://buttons.cm/ Litmus Buttons https://litmus.com/blog/
20. Ink http://zurb.com/ink/
22. Frameworks are bloated • Gmail clips email at 20k in iOS App (EmailOnAcid) • Gmail clips email at ca. 102 on web. • Do we really need a framework for E-Mail?
23. Responsive Email Patterns http://responsiveemailpatterns.com/
24. Live Coding See code on GitHub
 github.com/jng5/fec14-demo
25. Fin Thanks! ! Questions, Comments?! Get in touch ! @jng5 or hello@julie.io