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

You're Gonna Love HTML Emails Converge

Cd62d88a83461e0b1daa8f2fa31c4dcb?s=47 Dan Denney
June 15, 2017

You're Gonna Love HTML Emails Converge

I love them and I hope you will too

Cd62d88a83461e0b1daa8f2fa31c4dcb?s=128

Dan Denney

June 15, 2017
Tweet

Transcript

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

  2. You’re Gonna Love HTML Emails Dan Denney, ConvergeSE ‘17 that

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

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

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

    social media - Compliments social media
  7. PERSONAL

  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
  9. SMALL GESTURES

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

  14. Tables are a Lie! Well, kinda

  15. (screen of email) collectUI.com

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

  17. None
  18. None
  19. None
  20. None
  21. None
  22. Modern Workflow - Write for a preprocessor - Build -

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

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

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

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

    to be in a <style> tag in the doc
  28. It's not a bug... #perf,yo

  29. Gmail’s Decision Support CSS in a <style> tag most of

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

    $13,500 Our Gmail Persona
  32. None
  33. Obligatory MS Joke Microsoft

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

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

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

    $6,300 Our Outlook Persona
  37. None
  38. 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
  39. THE GREAT - The Community - Shared Code - Tools

  40. COMMUNITY

  41. email-toolbox.com

  42. litmus.com/community/snippets

  43. litmus.com/community

  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
  45. https://litmus.com/builder/beeedcf Webkit https://litmus.com/builder/16016d1 Gmail https://litmus.com/builder/56fdbdd Outlook Examples There are still

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

  47. Thank you