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

Squeezing Emails onto Mobile

August 28, 2014

Squeezing Emails onto Mobile

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


August 28, 2014

More Decks by jng

Other Decks in Programming


  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