Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Squeezing Emails onto Mobile

F4612f9492cccc0c61c9b5f80d0ca8a1?s=47 jng
August 28, 2014

Squeezing Emails onto Mobile

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



August 28, 2014


  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

 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

  25. Fin Thanks! ! Questions, Comments?! Get in touch ! @jng5

    or hello@julie.io