$30 off During Our Annual Pro Sale. View Details »

You're Gonna Love HTML Emails

Dan Denney
April 29, 2016

You're Gonna Love HTML Emails

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

Dan Denney

April 29, 2016
Tweet

More Decks by Dan Denney

Other Decks in Design

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