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. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 43.

    MEDIA QUERIES @media only screen and (max-width: 640px) { STYLES

    TO HIDE/SHOW/MODIFY ELEMENTS } @leemunroe
  7. 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