Building HTML Email and Workflow Tips From Mailgun

Building HTML Email and Workflow Tips From Mailgun

452521c3fd3cbad0609ba4a685feef7c?s=128

Lee Munroe

July 22, 2015
Tweet

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