You're Gonna Love HTML Emails Converge

I love them and I hope you will too

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.
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
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)
31. (female dev) https://emailclientmarketshare.com 23000 .15 x 3450 90000 .15 x $13,500 Our Gmail Persona
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
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