You're Gonna Love HTML Emails Converge

I love them and I hope you will too

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