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

How to make your email design workflow fun again

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

Lee Munroe

September 16, 2015
Tweet

More Decks by Lee Munroe

Other Decks in Technology

Transcript

  1. HOW TO MAKE YOUR
    EMAIL DESIGN WORKFLOW
    FUN (AGAIN)
    @leemunroe

    View full-size slide

  2. Northern Ireland
    @leemunroe

    View full-size slide

  3. Plain Text
    @leemunroe

    View full-size slide

  4. HTML
    @leemunroe

    View full-size slide


  5. Thanks for choosing Mailgun. Please activate your account by clicking the button below.
    Activate Mailgun Account
    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.
    Thanks and happy emailing, The Mailgunners

    @leemunroe

    View full-size slide


  6. <br/>.container {<br/>background: #fff;<br/>border: 1px solid #eee;<br/>margin: 20px auto;<br/>max-width: 600px;<br/>padding: 20px;<br/>}<br/>p {<br/>margin: 0 0 20px;<br/>}<br/>.btn-primary {<br/>background: blue;<br/>border-radius: 5px;<br/>color: white;<br/>display: inline-block;<br/>padding: 5px 15px;<br/>}<br/>

    @leemunroe

    View full-size slide

  7. Litmus Test
    @leemunroe

    View full-size slide

  8. Apple Mail
    @leemunroe

    View full-size slide

  9. iPhone
    @leemunroe

    View full-size slide

  10. Outlook 2002
    @leemunroe

    View full-size slide

  11. Outlook 2013
    @leemunroe

    View full-size slide

  12. Gmail
    @leemunroe

    View full-size slide

  13. STATE
    OF HTML EMAIL
    @leemunroe

    View full-size slide

  14. 30+
    EMAIL CLIENTS
    @leemunroe

    View full-size slide

  15. > 50%
    MOBILE OPENS
    @leemunroe

    View full-size slide

  16. Email Client Share
    @leemunroe

    View full-size slide

  17. STYLESHEETS
    @leemunroe

    View full-size slide

  18. CSS3
    @leemunroe

    View full-size slide

  19. Support for border-radius
    @leemunroe

    View full-size slide

  20. HTML5
    @leemunroe

    View full-size slide

  21. Support for
    @leemunroe

    View full-size slide

  22. JAVASCRIPT
    @leemunroe

    View full-size slide

  23. IMAGES
    @leemunroe

    View full-size slide

  24. Images On?
    @leemunroe

    View full-size slide

  25. BUILDING
    HTML EMAIL
    @leemunroe

    View full-size slide

  26. TABLES
    @leemunroe

    View full-size slide

  27. Kevin Mandeville, Litmus
    @leemunroe

    View full-size slide

  28. or GTFO
    — Kevin Mandeville, Litmus
    @leemunroe

    View full-size slide

  29. or GTFO (Get To Fixing Outlook)
    — Kevin Mandeville, Litmus
    @leemunroe

    View full-size slide

  30. INLINE CSS
    @leemunroe

    View full-size slide

  31. <br/>.btn-primary {<br/>background-color: #348eda;<br/>border-radius: 5px;<br/>color: #fff;<br/>display: inline-block;<br/>font-weight: bold;<br/>padding: 12px 25px;<br/>text-align: center;<br/>text-decoration: none;<br/>}<br/>
    Click Button
    @leemunroe

    View full-size slide





  32. Click Button




    @leemunroe

    View full-size slide

  33. TARGET OUTLOOK

    @leemunroe

    View full-size slide

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

    View full-size slide

  35. TARGET DEVICES
    @media only screen and (max-width: 640px) {
    STYLES TO HIDE/SHOW/MODIFY ELEMENTS
    }
    @leemunroe

    View full-size slide

  36. Uber - Apple Mail
    @leemunroe

    View full-size slide

  37. Uber - iPhone Mail
    @leemunroe

    View full-size slide

  38. Uber - iPhone Gmail
    @leemunroe

    View full-size slide

  39. PROGRESSIVE
    ENHANCEMENT
    @leemunroe

    View full-size slide

  40. Moo - Gmail
    @leemunroe

    View full-size slide

  41. Moo - Outlook 2013
    @leemunroe

    View full-size slide

  42. Intercom - Gmail
    @leemunroe

    View full-size slide

  43. Intercom - Outlook 2007
    @leemunroe

    View full-size slide

  44. WRITE
    HTML
    @leemunroe

    View full-size slide

  45. COMPILE
    TEMPLATES
    @leemunroe

    View full-size slide

  46. COMPILE
    SASS
    @leemunroe

    View full-size slide

  47. INLINE
    CSS
    @leemunroe

    View full-size slide

  48. PLAIN
    TEXT
    @leemunroe

    View full-size slide

  49. COMPRESS
    IMAGES
    @leemunroe

    View full-size slide

  50. UPLOAD
    IMAGES
    @leemunroe

    View full-size slide

  51. ADD
    TRACKING
    @leemunroe

    View full-size slide

  52. SEND
    TO MYSELF
    @leemunroe

    View full-size slide

  53. SEND
    TO COLLEAGUE
    @leemunroe

    View full-size slide

  54. SEND
    TO LITMUS
    @leemunroe

    View full-size slide

  55. COPY & PASTE
    @leemunroe

    View full-size slide

  56. "Hey, can you make the logo bigger?"
    @leemunroe

    View full-size slide

  57. WORKFLOW
    @leemunroe

    View full-size slide

  58. Design Systems
    @leemunroe

    View full-size slide

  59. Dave Rupert, Paravel
    @leemunroe

    View full-size slide

  60. Modules, not pages
    — Dave Rupert, Paravel
    @leemunroe

    View full-size slide

  61. STATIC SITE GENERATORS
    .
    @leemunroe

    View full-size slide

  62. Bill Gates, Founder Microsoft
    @leemunroe

    View full-size slide

  63. "I choose a lazy person to do a hard
    job. Because a lazy person will find an
    easy way to do it."
    @leemunroe

    View full-size slide

  64. AUTOMATE
    @leemunroe

    View full-size slide

  65. Gruntfile.js
    @leemunroe

    View full-size slide

  66. Compiles Sass to CSS
    @leemunroe

    View full-size slide

  67. Builds HTML Templates
    @leemunroe

    View full-size slide

  68. Inlines CSS
    @leemunroe

    View full-size slide

  69. Generate Plain Text
    grunt-premailer
    @leemunroe

    View full-size slide

  70. Compress & Upload Images
    grunt-contrib-imagemin
    @leemunroe

    View full-size slide

  71. Send To Myself
    grunt-mailgun
    @leemunroe

    View full-size slide

  72. Send To Litmus
    grunt-litmus
    @leemunroe

    View full-size slide

  73. Send To Your ESP or Template Host
    @leemunroe

    View full-size slide

  74. Single Source Of Truth
    @leemunroe

    View full-size slide

  75. SHOW ME
    @leemunroe

    View full-size slide

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

    View full-size slide

  77. $ npm install
    @leemunroe

    View full-size slide

  78. $ grunt
    @leemunroe

    View full-size slide

  79. $ grunt s3upload
    @leemunroe

    View full-size slide

  80. $ grunt send --template=transaction.html
    @leemunroe

    View full-size slide

  81. $ grunt litmus --template=transaction.html
    @leemunroe

    View full-size slide

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

    View full-size slide

  83. ADVANTAGES
    ▸ Automation
    ▸ DRY (Don't Repeat Yourself)
    ▸ Single source of truth
    ▸ Consistency
    ▸ Not locked in
    @leemunroe

    View full-size slide

  84. EMAIL WORKFLOW
    1. Know the client quirks
    2. Create a modular system
    3. Automate your tasks
    @leemunroe

    View full-size slide

  85. @leemunroe
    @leemunroe

    View full-size slide

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

    View full-size slide