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

Squeezing Emails onto Mobile

jng
August 28, 2014

Squeezing Emails onto Mobile

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

jng

August 28, 2014
Tweet

More Decks by jng

Other Decks in Programming

Transcript

  1. Squeezing E-Mails onto
    Mobile
    Julie Ng
    28 August 2014
    Frontend Conference Zürich

    View full-size 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 full-size slide

  3. Email is...
    "this beautiful cockroach 

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

    View full-size slide

  4. You secretly love Email

    View full-size slide

  5. E-Mail done right is teamwork

    View full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. Good Email is Teamwork
    Marketing
    Marketing 

    Managers
    Automated E-Mails

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

    View full-size slide

  9. Exercise
    A simple invoice?

    View full-size slide

  10. 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 full-size slide

  11. Examples
    (in Browser)

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

  20. Live Coding
    See code on GitHub

    github.com/jng5/fec14-demo

    View full-size slide

  21. Fin
    Thanks!
    !
    Questions, Comments?!
    Get in touch
    !
    @jng5 or [email protected]

    View full-size slide