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

You're Gonna Love HTML Emails

Cd62d88a83461e0b1daa8f2fa31c4dcb?s=47 Dan Denney
April 29, 2016

You're Gonna Love HTML Emails

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

Cd62d88a83461e0b1daa8f2fa31c4dcb?s=128

Dan Denney

April 29, 2016
Tweet

Transcript

  1. You’re Gonna Love HTML Emails Dan Denney, Squares Conf ‘16

    that one dude from Code School
  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
  3. THE GOOD THE BAD THE GREAT http://images.agoramedia.com/ugcphotoservice/100/2015/4/13/61491466/79790b56-81a7-46a2-be04-81e62a06f9c3.jpg

  4. THE GOOD - Low-tech - Testable (The A/B kind) -

    Tied to revenue - Personal
  5. I AM NOT A MARKETER - Best ROI - Outperforms

    social media - Compliments social media
  6. PERSONAL

  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
  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.
  9. None
  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. “ ”
  11. THE BAD - Low-tech - Minimal standards

  12. Tables are a Lie! Well, kinda

  13. (screen of email) collectUI.com

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

  15. None
  16. None
  17. None
  18. None
  19. Modern Workflow - Write for a preprocessor - Build -

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

    Deploy
  21. Email’s “Gotcha” 1. Preprocess 2. Build 3. Deploy 4. Client

    Web 1. Preprocess 2. Build 3. Deploy 4. Preprocess 5. Client Email
  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
  23. Disclaimer I make bad decisions.

  24. Webmail Decisions Do not support linked CSS. - CSS has

    to be in a <style> tag in the doc
  25. Gmail’s Decision Do not support CSS in a <style> tag.

    - CSS has to be inline - No hover events - No media queries - And more! (of less)
  26. (female dev) https://emailclientmarketshare.com 23000 .15 x 3450 90000 .15 x

    $13,500 Our Gmail Persona
  27. None
  28. Obligatory MS Joke Microsoft

  29. Outlook’s Decision Render HTML and CSS using Microsoft Word -

    No box model - Support for word processor styles only
  30. Tables aren’t a Lie! For reals this time

  31. (female dev) https://emailclientmarketshare.com 23000 .07 x 1610 90000 .07 x

    $6,300 Our Outlook Persona
  32. None
  33. BEATING THE BAD - Use tables for markup - Apply

    basic layout CSS to <table> - Apply text/spacing styles to <td> - Apply critical CSS inline - Apply enhancement CSS to <style> - Use padding, not margin
  34. THE GREAT - The Community - Shared Code - Tools

  35. COMMUNITY

  36. email-toolbox.com

  37. litmus.com/community/snippets

  38. litmus.com/community

  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
  40. https://litmus.com/builder/5e7f81f Webkit https://litmus.com/builder/1e31db9 Gmail https://litmus.com/builder/c969340 Outlook Examples There are still

    bugs!
  41. Questions? Now or later, with beer