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
   

   View Slide

2. Julie Ng
   • American Designer living in
   Munich
   • Previously Designer at
   ancestry.com for European
   Markets
   • UX Designer, Developer,
   Consultant
   • Refresh Munich
   • Runner, Climber
   

   View Slide

3. Email is...
   "this beautiful cockroach 

   of a social network "
   Graphic: Gilad Fried, Noun Project.
   Quote: Alexis C. Madrigal, The Atlantic.
   

   View Slide

4. View Slide

5. You secretly love Email
   

   View Slide

6. View Slide

7. E-Mail done right is teamwork
   

   View Slide

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
   

   View Slide

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.
   

   View Slide

10. Good Email is Teamwork
    Marketing
    Marketing 

    Managers
    Automated E-Mails

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

    View Slide

11. Exercise
    A simple invoice?
    

    View Slide

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
    :-(
    

    View Slide

13. Examples
    (in Browser)
    

    View Slide

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)
    

    View Slide

15. Tools
    

    View Slide

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

    View Slide

17. Litmus Email Testing
    https://litmus.com/
    

    View Slide

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

    View Slide

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

    View Slide

20. Ink
    http://zurb.com/ink/
    

    View Slide

21. View Slide

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?
    

    View Slide

23. Responsive Email Patterns
    http://responsiveemailpatterns.com/
    

    View Slide

24. Live Coding
    See code on GitHub

    github.com/jng5/fec14-demo
    

    View Slide

25. Fin
    Thanks!
    !
    Questions, Comments?!
    Get in touch
    !
    @jng5 or hello@julie.io
    

    View Slide