You're Gonna Love HTML Emails

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

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.
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
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
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
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