Squeezing Emails onto Mobile

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.
4. None

5. You secretly love Email

6. None

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/

21. None

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