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

Creating HTML Emails Can Be Fun

Dan Denney
October 04, 2013

Creating HTML Emails Can Be Fun

In this talk, I shared that it requires having a purpose of making things nice for the people on the other side of the screen to get past the (still) horrible code you have to write.

Dan Denney

October 04, 2013
Tweet

More Decks by Dan Denney

Other Decks in Design

Transcript

  1. creating
    html
    can be fun
    emails
    creating
    html
    can be fun
    emails
    creating
    html
    can be fun
    emails
    creating
    html
    can be fun
    emails
    creating
    html
    can be fun
    emails
    creating
    html
    can be fun
    emails

    View Slide

  2. Once
    upon
    a time
    Once
    upon
    a time
    Once
    upon
    a time

    View Slide

  3. In a land not
    too far away...
    In a land not
    too far away...
    In a land not
    too far away...

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. I like-a you
    do da email

    View Slide

  8. View Slide

  9. The End
    of the awkward
    third-person
    fairy tale
    The End
    of the awkward
    third-person
    fairy tale
    The End
    of the awkward
    third-person
    fairy tale

    View Slide

  10. View Slide

  11. emails sent from
    multiple sources
    changing service
    marketing needs
    editing access
    we might change
    again soon
    !
    !
    !
    !
    emails sent from
    multiple sources
    changing service
    marketing needs
    editing access
    we might change
    again soon
    !
    !
    !
    !
    emails sent from
    multiple sources
    changing service
    marketing needs
    editing access
    we might change
    again soon
    !
    !
    !
    !

    View Slide

  12. http://wikicedia.net/images/4/45/Cool-story-bro.jpg

    View Slide

  13. Responsive?
    Responsive?
    Responsive?
    Responsive?

    View Slide

  14. it
    for
    Go
    it
    for
    Go
    it
    for
    Go

    View Slide

  15. 17
    17
    17

    View Slide

  16. View Slide

  17. 17 + 17 + 4
    38
    17 + 17 + 4
    38
    17 + 17 + 4
    38

    View Slide

  18. autonomy
    mastery
    purpose
    autonomy
    mastery
    purpose
    autonomy
    mastery
    purpose

    View Slide

  19. View Slide

  20. View Slide

  21. http://blog.mailchimp.com/mobile-email-research

    View Slide

  22. 46%
    46%
    46%

    View Slide

  23. Delight
    Delight
    Delight

    View Slide

  24. https://litmus.com/blog/mobile-opens-hit-record-high-of-47

    View Slide

  25. View Slide

  26. 80%
    80%
    80%
    http://www.bizreport.com/2013/03/bluehornet-302-unsubscribe-on-receipt-of-a-badly-formatted-m.html

    View Slide

  27. $
    $
    $

    View Slide

  28. View Slide

  29. View Slide

  30. Successes
    Successes
    Successes

    View Slide

  31. View Slide

  32. View Slide

  33. feedback ftw
    feedback ftw
    feedback ftw

    View Slide

  34. Getting
    Started
    Getting
    Started
    Getting
    Started

    View Slide

  35. It’s not
    more
    difficult.
    It’s not
    more
    difficult.
    It’s not
    more
    difficult.
    too much
    too much
    too much

    View Slide

  36. Create a
    system
    Create a
    system
    Create a
    system

    View Slide

  37. View Slide

  38. Choose a
    great
    service
    Choose a
    great
    service
    Choose a
    great
    service

    View Slide

  39. View Slide

  40. Build where
    comfortable.
    you are
    Build where
    comfortable.
    you are
    Build where
    comfortable.
    you are

    View Slide

  41. View Slide

  42. Embrace
    the tech
    Embrace
    the tech
    Embrace
    the tech

    View Slide

  43. Test in
    clients
    Test in
    clients
    Test in
    clients

    View Slide

  44. Use a service
    when you can’t
    Use a service
    when you can’t
    Use a service
    when you can’t

    View Slide

  45. https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic/full-view

    View Slide

  46. Resources
    Resources
    Resources
    campaignmonitor.com/css
    zurb.com/playground/responsive-email-templates
    internations.github.io/antwort
    mailchimp.com
    litmus.com
    modernhtmlemail.com
    Code
    services
    book
    Code
    services
    book
    Code
    services
    book

    View Slide

  47. @dandenney
    [email protected]
    github.com/dandenney/email-design
    @dandenney
    [email protected]
    kippt.com/dandenney/email-design
    @dandenney
    [email protected]

    View Slide

  48. Thank
    you
    Thank
    you
    Thank
    you

    View Slide