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

How to make your email design workflow fun again

Lee Munroe
October 30, 2015

How to make your email design workflow fun again

Building emails sucks. Poor CSS support, old school HTML, tables, various email clients and platforms, writing inline CSS, multi-part mime… the list goes on.

However, in today’s world we can use some of our favourite front-end dev tools to make things fun again:

* Task runners
* Static site generators
* APIs
* Pattern libraries
* CSS preprocessors
* Media queries

We’ll take a look at the current state of email design, the problems we face as developers, and how to make things better using the likes of Sass, Grunt and other magic.

Presented at Future of Web Design, San Francisco 2015

Lee Munroe

October 30, 2015
Tweet

More Decks by Lee Munroe

Other Decks in Technology

Transcript

  1. <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. <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. <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
  4. <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
  5. Target Devices @media only screen and (max-width: 640px) { td

    { font-size: 18px; padding: 0; } } @leemunroe
  6. "I choose a lazy person to do a hard job.

    Because a lazy person will find an easy way to do it." — Bill Gates, Founder Microsoft @leemunroe
  7. Advantages → Automation → DRY (Don't Repeat Yourself) → Single

    Source Of Truth → Consistent UX → Not Locked In (Open-Source) @leemunroe
  8. Make Email Fun 1. Know the email client quirks 2.

    Create a modular design system 3. Automate your tasks w/ Grunt or Gulp @leemunroe
  9. Resources Referenced * Grunt Email Workflow (github.com/leemunroe/grunt-email-workflow) * Mailgun (mailgun.com)

    * Rackspace (rackspace.com) * Litmus (litmus.com/lp/mailgun) * 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