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

Building HTML Email and Workflow Tips From Mailgun

Building HTML Email and Workflow Tips From Mailgun

Lee Munroe

July 22, 2015
Tweet

More Decks by Lee Munroe

Other Decks in Technology

Transcript

  1. BUILDING HTML EMAIL @leemunroe

  2. @leemunroe

  3. @leemunroe

  4. @leemunroe

  5. @leemunroe

  6. AGENDA * State of HTML email in 2015 * Solutions

    to building HTML email * Design systems * Automating your build system * Grunt workflow demo @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. 30+ EMAIL CLIENTS @leemunroe

  20. @leemunroe

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

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

  23. <DIV> @leemunroe

  24. STYLESHEETS @leemunroe

  25. CSS3 @leemunroe

  26. Support for border-radius @leemunroe

  27. HTML5 @leemunroe

  28. Support for <video> @leemunroe

  29. JAVASCRIPT @leemunroe

  30. IMAGES @leemunroe

  31. IMAGES ON BY DEFAULT? @leemunroe

  32. BUILDING HTML EMAIL @leemunroe

  33. TABLES @leemunroe

  34. Kevin Mandeville, Litmus @leemunroe

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

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

    Litmus @leemunroe
  37. INLINE CSS @leemunroe

  38. <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">Click Button</a> @leemunroe
  39. <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;"> Click Button </a> </td> </tr> </table> @leemunroe
  40. TARGET OUTLOOK <!--[if mso]> SHOW ELEMENT OR CUSTOM CSS FOR

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

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

    TO HIDE/SHOW/MODIFY ELEMENTS ON SMALLER DEVICES } @leemunroe
  43. UBER - APPLE MAIL @leemunroe

  44. UBER - IPHONE MAIL @leemunroe

  45. UBER - IPHONE GMAIL @leemunroe

  46. PROGRESSIVE ENHANCEMENT @leemunroe

  47. MOO - GMAIL @leemunroe

  48. MOO - OUTLOOK 2013 @leemunroe

  49. INTERCOM - GMAIL @leemunroe

  50. INTERCOM - OUTLOOK 2007 @leemunroe

  51. @leemunroe

  52. @leemunroe

  53. @leemunroe

  54. @leemunroe

  55. @leemunroe

  56. @leemunroe

  57. WORKFLOW FOR HTML EMAIL @leemunroe

  58. DESIGN SYSTEMS @leemunroe

  59. Dave Rupert, Paravel @leemunroe

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

  61. @leemunroe

  62. @leemunroe

  63. @leemunroe

  64. STATIC SITE GENERATORS . @leemunroe

  65. INLINE CSS @leemunroe

  66. COMPRESS IMAGES @leemunroe

  67. LITMUS TEST @leemunroe

  68. ENOUGH IS ENOUGH @leemunroe

  69. AUTOMATE @leemunroe

  70. GRUNTFILE.JS @leemunroe

  71. $ grunt @leemunroe

  72. INLINE CSS @leemunroe

  73. COMPRESS IMAGES @leemunroe

  74. SEND TO LITMUS TO TEST @leemunroe

  75. GENERATE PLAIN TEXT grunt-premailer @leemunroe

  76. UPLOAD IMAGES grunt-contrib-imagemin @leemunroe

  77. SEND MYSELF THE EMAIL grunt-mailgun @leemunroe

  78. SEND LITMUS THE EMAIL grunt-litmus @leemunroe

  79. SEND TEMPLATES TO YOUR ESP @leemunroe

  80. SEND TEMPLATES TO YOUR CODEBASE @leemunroe

  81. SHOW ME @leemunroe

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

  83. @leemunroe

  84. @leemunroe

  85. @leemunroe

  86. @leemunroe

  87. $ grunt @leemunroe

  88. @leemunroe

  89. @leemunroe

  90. @leemunroe

  91. @leemunroe

  92. @leemunroe

  93. @leemunroe

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

  95. RESPONSIVE EMAIL @leemunroe

  96. RESPONSIVE EMAIL @leemunroe

  97. RESPONSIVE EMAIL * Media queries don't work on Gmail (web,

    native) * Stick to a fluid width * Stick to narrow fixed width * Left/right align cells @leemunroe
  98. j.mp/responsive-email-tut By Nicole Merlin @leemunroe

  99. GMAIL ACTIONS @leemunroe

  100. GMAIL ACTIONS <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "EmailMessage", "action":

    { "@type": "ViewAction", "url": "${link}", "name": "Reset Mailgun Password" } } </script> @leemunroe
  101. developers.google.com/gmail/markup/ @leemunroe

  102. PREHEADER TEXT @leemunroe

  103. PREHEADER TEXT <span style=" color: transparent; display: none !important; height:

    0; max-height: 0; max-width: 0; mso-hide: all; opacity: 0; overflow: hidden; visibility: hidden; width: 0;">Preheader text goes here</span> @leemunroe
  104. @leemunroe litmus.com/lp/mailgun @leemunroe

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

    * Rackspace (rackspace.com) * Litmus (litmus.com/lp/mailgun) * Middleman (middlemanapp.com) * Assemble (assemble.io) * Premailer (premailer.dialect.ca) * Grunt (gruntjs.com) * Gulp (gulpjs.com) * Sendwithus (sendwithus.com) * Gmail Events (developers.google.com/gmail/markup/) * Responsive Tutorial (j.mp/responsive-email-tut) @leemunroe