Squeezing Emails onto Mobile

F4612f9492cccc0c61c9b5f80d0ca8a1?s=47 jng
August 28, 2014
Programming
3
180

Squeezing Emails onto Mobile

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

F4612f9492cccc0c61c9b5f80d0ca8a1?s=128

jng

August 28, 2014
Tweet

Want more?

F4612f9492cccc0c61c9b5f80d0ca8a1?s=48 jng
0
31
F4612f9492cccc0c61c9b5f80d0ca8a1?s=48 jng
0
9
F4612f9492cccc0c61c9b5f80d0ca8a1?s=48 jng
0
120
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
1
380
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
13
840
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
4
450
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
280
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
600
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
320
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
350
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
850
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
230

Transcript

  1. 1.

    Squeezing E-Mails onto Mobile Julie Ng 28 August 2014 Frontend

    Conference Zürich
  2. 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. 3.

    Email is... "this beautiful cockroach 
 of a social network

    " Graphic: Gilad Fried, Noun Project. Quote: Alexis C. Madrigal, The Atlantic.
  4. 4.
    None
  5. 5.

    You secretly love Email

  6. 6.
    None
  7. 7.

    E-Mail done right is teamwork

  8. 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. 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. 10.

    Good Email is Teamwork Marketing Marketing 
 Managers Automated E-Mails


    ! Marketing Manager UX Designer Visual/Web Designer Frontend Developer Backend Architect
  11. 11.

    Exercise A simple invoice?

  12. 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. 13.

    Examples (in Browser)

  14. 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. 15.

    Tools

  16. 16.

    Campaign Monitor: the Ultimate Guide to CSS https://www.campaignmonitor.com/css/

  17. 17.

    Litmus Email Testing https://litmus.com/

  18. 18.

    Mailchimp CSS Inliner Tool http://templates.mailchimp.com/resources/inline-css/ Premailer http://premailer.dialect.ca/

  19. 19.

    Bulletproof Email Buttons http://buttons.cm/ Litmus Buttons https://litmus.com/blog/

  20. 20.

    Ink http://zurb.com/ink/

  21. 21.
    None
  22. 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. 23.

    Responsive Email Patterns http://responsiveemailpatterns.com/

  24. 24.

    Live Coding See code on GitHub
 github.com/jng5/fec14-demo

  25. 25.

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

    or hello@julie.io