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

You're Gonna Love HTML Emails Converge

Dan Denney
June 15, 2017

You're Gonna Love HTML Emails Converge

I love them and I hope you will too

Dan Denney

June 15, 2017
Tweet

More Decks by Dan Denney

Other Decks in Design

Transcript

  1. SLIDES
    bit.ly/love-emails
    If you're into that kind of thing

    View Slide

  2. You’re Gonna Love
    HTML Emails
    Dan Denney, ConvergeSE ‘17
    that one dude from Code School

    View Slide

  3. KOALAFI
    CATIONS
    4 years, 3-5 promos monthly, ~40 recurring, ~7M total
    http://static1.squarespace.com/static/5005afd7e4b0a6953320bf3f/t/528cfce6e4b0c1452601a558/1384971527352/4651364311_f505cc3cc3_o.jpg

    View Slide

  4. THE GOOD
    THE BAD
    THE GREAT
    http://images.agoramedia.com/ugcphotoservice/100/2015/4/13/61491466/79790b56-81a7-46a2-be04-81e62a06f9c3.jpg

    View Slide

  5. THE GOOD
    - Low-tech
    - Testable (The A/B kind)
    - Tied to revenue
    - Personal

    View Slide

  6. I AM NOT A
    MARKETER
    - Best ROI
    - Outperforms social media
    - Compliments social media

    View Slide

  7. PERSONAL

    View Slide

  8. I’ve learned that people will forget
    what you said, people will forget
    what you did, but people will never
    forget how you made them feel.


    - Maya Angelou
    http://www.mayaangelou.com/wp-content/uploads/2015/05/mayaremembered-slider.jpg

    View Slide

  9. SMALL
    GESTURES

    View Slide

  10. We Miss You
    Life can get busy, we understand. If you're
    ready to continue learning, check out our new
    content, or even some courses you missed the
    first time around.

    View Slide

  11. View Slide

  12. - Abraham Lincoln
    http://a1.files.biography.com/image/upload/c_fit,cs_srgb,dpr_1.0,h_1200,q_80,w_1200/MTIwNjA4NjMzODE4MjIwMDQ0.jpg
    Send emails that you want to receive.
    “ ”

    View Slide

  13. THE BAD
    - Low-tech
    - Minimal standards

    View Slide

  14. Tables are a Lie!
    Well, kinda

    View Slide

  15. (screen of email)
    collectUI.com

    View Slide

  16. kyle loaney
    https://dribbble.com/KLoaney

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Modern Workflow
    - Write for a preprocessor
    - Build
    - Deploy

    View Slide

  23. Email Workflow
    - Write for a preprocessor
    - Build
    - Deploy

    View Slide

  24. Email’s “Gotcha”
    1. Preprocess
    2. Build
    3. Deploy
    4. Client
    Web
    1. Preprocess
    2. Build
    3. Deploy
    4. Preprocess
    5. Client
    Email

    View Slide

  25. Email Client Preprocessors
    - Sneaky disguised horse feathers
    - People talking on their cellphone in the 

    bathroom evil
    - Evil worse than a dragon
    - Not cute
    - Not funny
    - Not clever

    View Slide

  26. Disclaimer
    I make bad decisions.

    View Slide

  27. Webmail
    Decisions
    Do not support linked CSS.
    - CSS has to be in a <br/>tag in the doc<br/>

    View Slide

  28. It's not a
    bug...
    #perf,yo

    View Slide

  29. Gmail’s
    Decision
    Support CSS in a <br/>tag most of the time.<br/>- CSS has to be inline<br/>- No hover events<br/>- No media queries<br/>- And more! (of less)<br/>

    View Slide

  30. View Slide

  31. (female dev)
    https://emailclientmarketshare.com
    23000
    .15
    x
    3450
    90000
    .15
    x
    $13,500
    Our Gmail Persona

    View Slide

  32. View Slide

  33. Obligatory MS Joke
    Microsoft

    View Slide

  34. Outlook’s
    Decision
    Render HTML and CSS
    using Microsoft Word
    - No box model
    - Support for word
    processor styles only

    View Slide

  35. Tables aren’t a Lie!
    For reals this time

    View Slide

  36. (female dev)
    https://emailclientmarketshare.com
    23000
    .07
    x
    1610
    90000
    .07
    x
    $6,300
    Our Outlook Persona

    View Slide

  37. View Slide

  38. BEATING THE BAD
    - Use tables for markup
    - Apply basic layout CSS to
    - Apply text/spacing styles to
    - Apply critical CSS inline
    - Apply enhancement CSS to <br/>- Use padding, not margin<br/>

    View Slide

  39. THE GREAT
    - The Community
    - Shared Code
    - Tools

    View Slide

  40. COMMUNITY

    View Slide

  41. email-toolbox.com

    View Slide

  42. litmus.com/community/snippets

    View Slide

  43. litmus.com/community

    View Slide

  44. THE GOOD
    - Low-tech
    - Testable (The A/B kind)
    - Tied to revenue
    - Personal
    THE BAD
    - Low-tech
    - Minimal standards
    THE GREAT
    - The Community
    - Shared Code
    - Tools
    HTML Emails

    View Slide

  45. https://litmus.com/builder/beeedcf
    Webkit
    https://litmus.com/builder/16016d1
    Gmail
    https://litmus.com/builder/56fdbdd
    Outlook
    Examples
    There are still bugs!

    View Slide

  46. Questions?
    Now or later, with beer

    View Slide

  47. Thank you

    View Slide