You're Gonna Love HTML Emails

Presentation for Squares Conf 2016, attempting to make people love this dark art.

Transcript

1. You’re Gonna Love
   HTML Emails
   Dan Denney, Squares Conf ‘16
   that one dude from Code School
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. PERSONAL
   

   View Slide

7. 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

8. 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

9. View Slide

10. - 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

11. THE BAD
    - Low-tech
    - Minimal standards
    

    View Slide

12. Tables are a Lie!
    Well, kinda
    

    View Slide

13. (screen of email)
    collectUI.com
    

    View Slide

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

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

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

    View Slide

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

    View Slide

21. 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

22. 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

23. Disclaimer
    I make bad decisions.
    

    View Slide

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

    View Slide

25. Gmail’s
    Decision
    Do not support CSS
    in a tag.<br/>- CSS has to be inline<br/>- No hover events<br/>- No media queries<br/>- And more! (of less)<br/>

    View Slide

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

    View Slide

27. View Slide

28. Obligatory MS Joke
    Microsoft
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. View Slide

33. 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

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

    View Slide

35. COMMUNITY
    

    View Slide

36. email-toolbox.com
    

    View Slide

37. litmus.com/community/snippets
    

    View Slide

38. litmus.com/community
    

    View Slide

39. 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

40. https://litmus.com/builder/5e7f81f
    Webkit
    https://litmus.com/builder/1e31db9
    Gmail
    https://litmus.com/builder/c969340
    Outlook
    Examples
    There are still bugs!
    

    View Slide

41. Questions?
    Now or later, with beer
    

    View Slide