Building HTML Email and Workflow Tips From Mailgun

BUILDING HTML EMAIL @leemunroe

@leemunroe

AGENDA * State of HTML email in 2015 * Solutions
to building HTML email * Design systems * Automating your build system * Grunt workflow demo @leemunroe

PLAIN TEXT @leemunroe

HTML @leemunroe

<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

<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

@leemunroe

LITMUS TEST @leemunroe

APPLE MAIL @leemunroe

IPHONE @leemunroe

OUTLOOK 2002 @leemunroe

OUTLOOK 2013 @leemunroe

GMAIL @leemunroe

STATE OF HTML EMAIL @leemunroe

30+ EMAIL CLIENTS @leemunroe

@leemunroe

53% MOBILE OPENS 1 1 Litmus 2015 State of Email
Report. @leemunroe

Email Client Share 2 2 Litmus February 2015. @leemunroe

<DIV> @leemunroe

STYLESHEETS @leemunroe

CSS3 @leemunroe

Support for border-radius @leemunroe

HTML5 @leemunroe

Support for <video> @leemunroe

JAVASCRIPT @leemunroe

IMAGES @leemunroe

IMAGES ON BY DEFAULT? @leemunroe

BUILDING HTML EMAIL @leemunroe

TABLES @leemunroe

Kevin Mandeville, Litmus @leemunroe

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

<td> or GTFO (Get To Fixing Outlook) — Kevin Mandeville,
Litmus @leemunroe

INLINE CSS @leemunroe

<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

TARGET OUTLOOK    @leemunroe

TARGET WEBKIT @media screen and (-webkit-min-device-pixel-ratio:0) { STYLES TO HIDE/SHOW/MODIFY
ELEMENTS IN WEBKIT } @leemunroe

MEDIA QUERIES @media only screen and (max-width: 640px) { STYLES
TO HIDE/SHOW/MODIFY ELEMENTS ON SMALLER DEVICES } @leemunroe

UBER - APPLE MAIL @leemunroe

UBER - IPHONE MAIL @leemunroe

UBER - IPHONE GMAIL @leemunroe

PROGRESSIVE ENHANCEMENT @leemunroe

MOO - GMAIL @leemunroe

MOO - OUTLOOK 2013 @leemunroe

INTERCOM - GMAIL @leemunroe

INTERCOM - OUTLOOK 2007 @leemunroe

@leemunroe

WORKFLOW FOR HTML EMAIL @leemunroe

DESIGN SYSTEMS @leemunroe

Dave Rupert, Paravel @leemunroe

Modules, not pages — Dave Rupert, Paravel @leemunroe

@leemunroe

STATIC SITE GENERATORS . @leemunroe

COMPRESS IMAGES @leemunroe

LITMUS TEST @leemunroe

ENOUGH IS ENOUGH @leemunroe

AUTOMATE @leemunroe

GRUNTFILE.JS @leemunroe

$ grunt @leemunroe

COMPRESS IMAGES @leemunroe

SEND TO LITMUS TO TEST @leemunroe

GENERATE PLAIN TEXT grunt-premailer @leemunroe

UPLOAD IMAGES grunt-contrib-imagemin @leemunroe

SEND MYSELF THE EMAIL grunt-mailgun @leemunroe

SEND LITMUS THE EMAIL grunt-litmus @leemunroe

SEND TEMPLATES TO YOUR ESP @leemunroe

SEND TEMPLATES TO YOUR CODEBASE @leemunroe

SHOW ME @leemunroe

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

@leemunroe

$ grunt @leemunroe

@leemunroe

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

RESPONSIVE EMAIL @leemunroe

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

j.mp/responsive-email-tut By Nicole Merlin @leemunroe

GMAIL ACTIONS @leemunroe

GMAIL ACTIONS <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "EmailMessage", "action":
{ "@type": "ViewAction", "url": "${link}", "name": "Reset Mailgun Password" } } </script> @leemunroe

developers.google.com/gmail/markup/ @leemunroe

PREHEADER TEXT @leemunroe

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

@leemunroe litmus.com/lp/mailgun @leemunroe

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

Building HTML Email and Workflow Tips From Mailgun

Building HTML Email and Workflow Tips From Mailgun

More Decks by Lee Munroe

Other Decks in Technology

Featured

Transcript