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

Building HTML Email Doesn't Have To Suck

452521c3fd3cbad0609ba4a685feef7c?s=47 Lee Munroe
April 22, 2015

Building HTML Email Doesn't Have To Suck

Building HTML email sucks. Tables. Inline CSS. 30+ clients to support. We now have lots of cool front-end dev tools that can make our lives easier. Know the quirks of the major email clients, build a modular design system and automate your workflow with Grunt to make your life 100x easier.

Presented at Fluent Conf, San Francisco 2015.

452521c3fd3cbad0609ba4a685feef7c?s=128

Lee Munroe

April 22, 2015
Tweet

Transcript

  1. BUILDING HTML EMAIL DOESN'T HAVE TO SUCK @leemunroe

  2. @leemunroe

  3. @leemunroe

  4. @leemunroe

  5. @leemunroe

  6. @leemunroe

  7. PLAIN TEXT @leemunroe

  8. HTML @leemunroe

  9. <div class="container"> <p>Thanks for choosing Mailgun. Please activate your account

    by clicking the button below.</p> <p><a href="{{url}}" class="btn-primary">Activate Mailgun Account</a></p> <p>We may need to communicate important service level issues with you from time to time, so it's important we have an up-to-date email address for you on file.</p> <p>Thanks and happy emailing, The Mailgunners</p> </div> @leemunroe
  10. <head> <style> .container { background: #fff; border: 1px solid #eee;

    margin: 20px auto; max-width: 600px; padding: 20px; } p { margin: 0 0 20px; } .btn-primary { background: blue; border-radius: 5px; color: white; display: inline-block; padding: 5px 15px; } </style> </head> @leemunroe
  11. @leemunroe

  12. LITMUS TEST @leemunroe

  13. APPLE MAIL @leemunroe

  14. IPHONE @leemunroe

  15. OUTLOOK 2002 @leemunroe

  16. OUTLOOK 2013 @leemunroe

  17. GMAIL @leemunroe

  18. STATE OF HTML EMAIL @leemunroe

  19. @leemunroe

  20. 30+ EMAIL CLIENTS @leemunroe

  21. @leemunroe

  22. 53% MOBILE OPENS 1 1 Litmus 2015 State of Email

    Report. @leemunroe
  23. Email Client Share 2 2 Litmus February 2015. @leemunroe

  24. <DIV> @leemunroe

  25. STYLESHEETS @leemunroe

  26. CSS3 @leemunroe

  27. Support for border-radius @leemunroe

  28. HTML5 @leemunroe

  29. Support for <video> @leemunroe

  30. JAVASCRIPT @leemunroe

  31. IMAGES @leemunroe

  32. IMAGES ON BY DEFAULT? @leemunroe

  33. BUILDING HTML EMAIL @leemunroe

  34. TABLES @leemunroe

  35. Kevin Mandeville, Litmus @leemunroe

  36. <td> or GTFO — Kevin Mandeville, Litmus @leemunroe

  37. <td> or GTFO (Get To Fixing Outlook) — Kevin Mandeville,

    Litmus @leemunroe
  38. INLINE CSS @leemunroe

  39. <style> .btn-primary { background-color: #348eda; border-radius: 5px; color: #fff; display:

    inline-block; font-weight: bold; padding: 12px 25px; text-align: center; text-decoration: none; } </style> <a href="" class="btn-primary">Activate Mailgun Account</a> @leemunroe
  40. <table style="display: inline-block; padding-bottom: 15px;"> <tr> <td style="box-sizing: border-box; vertical-align:

    top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-radius: 5px; text-align: center; background: #fff;" align="center" valign="top"> <a href="" style=" box-sizing: border-box; color: #348eda; text-decoration: none; border-radius: 5px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; text-transform: capitalize; background: #fff; margin: 0; padding: 12px 25px; border: 1px solid #348eda;"> Activate Mailgun Account </a> </td> </tr> </table> @leemunroe
  41. TARGET OUTLOOK <!--[if mso]> SHOW ELEMENT OR CUSTOM CSS <![endif]-->

    <!--[if IE]> SHOW ELEMENT OR CUSTOM CSS <![endif]--> <!--[if mso 12]> SHOW ELEMENT OR CUSTOM CSS <![endif]--> @leemunroe
  42. TARGET WEBKIT @media screen and (-webkit-min-device-pixel-ratio:0) { STYLES TO HIDE/SHOW/MODIFY

    ELEMENTS } @leemunroe
  43. MEDIA QUERIES @media only screen and (max-width: 640px) { STYLES

    TO HIDE/SHOW/MODIFY ELEMENTS } @leemunroe
  44. UBER - APPLE MAIL @leemunroe

  45. UBER - IPHONE MAIL @leemunroe

  46. UBER - IPHONE GMAIL @leemunroe

  47. PROGRESSIVE ENHANCEMENT @leemunroe

  48. MOO - GMAIL @leemunroe

  49. MOO - OUTLOOK 2013 @leemunroe

  50. INTERCOM - GMAIL @leemunroe

  51. INTERCOM - OUTLOOK 2007 @leemunroe

  52. @leemunroe

  53. @leemunroe

  54. @leemunroe

  55. @leemunroe

  56. @leemunroe

  57. @leemunroe

  58. WORKFLOW FOR HTML EMAIL @leemunroe

  59. DESIGN SYSTEMS @leemunroe

  60. Dave Rupert, Paravel @leemunroe

  61. Modules, not pages — Dave Rupert, Paravel @leemunroe

  62. @leemunroe

  63. @leemunroe

  64. @leemunroe

  65. STATIC SITE GENERATORS . @leemunroe

  66. $ jekyll serve @leemunroe

  67. $ sass css/scss:css @leemunroe

  68. INLINE CSS @leemunroe

  69. $ premailer email.html @leemunroe

  70. COMPRESS IMAGES @leemunroe

  71. $ imagemin images @leemunroe

  72. ENOUGH IS ENOUGH @leemunroe

  73. AUTOMATE @leemunroe

  74. $ grunt @leemunroe

  75. GRUNTFILE.JS @leemunroe

  76. COMPILES SCSS TO CSS @leemunroe

  77. BUILDS HTML TEMPLATES WITH ASSEMBLE @leemunroe

  78. INLINES CSS WITH PREMAILER @leemunroe

  79. GENERATE PLAIN TEXT grunt-premailer @leemunroe

  80. COMPRESS & UPLOAD IMAGES grunt-contrib-imagemin @leemunroe

  81. SEND MYSELF THE EMAIL grunt-mailgun @leemunroe

  82. SEND LITMUS THE EMAIL grunt-litmus @leemunroe

  83. SEND TEMPLATES TO YOUR ESP @leemunroe

  84. SEND TEMPLATES TO YOUR CODEBASE @leemunroe

  85. SHOW ME @leemunroe

  86. github.com/leemunroe/grunt-email-workflow @leemunroe

  87. @leemunroe

  88. @leemunroe

  89. @leemunroe

  90. @leemunroe

  91. $ grunt @leemunroe

  92. @leemunroe

  93. @leemunroe

  94. @leemunroe

  95. @leemunroe

  96. @leemunroe

  97. @leemunroe

  98. github.com/leemunroe/grunt-email-workflow @leemunroe

  99. @leemunroe @leemunroe

  100. RESOURCES REFERENCED * Grunt Email Workflow (github.com/leemunroe/grunt-email-workflow) * Mailgun (mailgun.com)

    * Rackspace (rackspace.com) * Litmus (litmus.com) * Jekyll (jekyllrb.com) * Middleman (middlemanapp.com) * Assemble (assemble.io) * Premailer (premailer.dialect.ca) * Grunt (gruntjs.com) * Gulp (gulpjs.com) * Sendwithus (sendwithus.com) * Mailchimp (mailchimp.com) * Campaign Monitor (campaignmonitor.com) @leemunroe