How to make your email design workflow fun again

452521c3fd3cbad0609ba4a685feef7c?s=47 Lee Munroe
September 16, 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 Web Unleashed Developer Conference, Toronto 2015

452521c3fd3cbad0609ba4a685feef7c?s=128

Lee Munroe

September 16, 2015
Tweet

Transcript

  1. 16.

    <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. 17.

    <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. 45.

    <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. 46.

    <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. 47.
  6. 49.

    TARGET DEVICES @media only screen and (max-width: 640px) { STYLES

    TO HIDE/SHOW/MODIFY ELEMENTS } @leemunroe
  7. 87.

    "I choose a lazy person to do a hard job.

    Because a lazy person will find an easy way to do it." @leemunroe
  8. 101.
  9. 103.
  10. 104.
  11. 105.
  12. 106.
  13. 109.
  14. 110.
  15. 111.
  16. 112.
  17. 113.
  18. 114.
  19. 119.
  20. 120.

    ADVANTAGES ▸ Automation ▸ DRY (Don't Repeat Yourself) ▸ Single

    source of truth ▸ Consistency ▸ Not locked in @leemunroe
  21. 121.

    EMAIL WORKFLOW 1. Know the client quirks 2. Create a

    modular system 3. Automate your tasks @leemunroe
  22. 123.

    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