You're Gonna Love HTML Emails Converge

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