You're Gonna Love HTML Emails

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