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. AGENDA * State of HTML email in 2015 * Solutions

    to building HTML email * Design systems * Automating your build system * Grunt workflow demo @leemunroe
  2. <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
  3. <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
  4. <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
  5. <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
  6. 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
  7. MEDIA QUERIES @media only screen and (max-width: 640px) { STYLES

    TO HIDE/SHOW/MODIFY ELEMENTS ON SMALLER DEVICES } @leemunroe
  8. 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
  9. GMAIL ACTIONS <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "EmailMessage", "action":

    { "@type": "ViewAction", "url": "${link}", "name": "Reset Mailgun Password" } } </script> @leemunroe
  10. 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
  11. 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