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
Technology
3
210

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

See All by Lee Munroe
How to make your email design workflow fun again
leemunroe
2
280
How to automate your email design workflow with task runners & Grunt.js
leemunroe
0
890
Building HTML Email and Workflow Tips From Mailgun
leemunroe
4
1k
Building HTML Email Doesn't Have To Suck
leemunroe
0
490
Lean UX and Landing Page Design
leemunroe
6
480

Other Decks in Technology

See All in Technology
オプトインカメラ：UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
170
How to be an AWS Community Builder | 君もAWS Community Builderになろう！〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
260
ずっと昔に Star をつけたはずの 思い出せない GitHub リポジトリを見つけたい！
rokuosan
0
150
Storage Browser for Amazon S3
miu_crescent
1
140
サーバレスアプリ開発者向けアップデートをキャッチアップしてきた #AWSreInvent #regrowth_fuk
drumnistnakano
0
190
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
2
2.2k
サイバー攻撃を想定したセキュリティガイドライン 策定とASM及びCNAPPの活用方法
syoshie
3
1.2k
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
220
サービスでLLMを採用したばっかりに振り回され続けたこの一年のあれやこれや
segavvy
2
390

Featured

See All Featured
It's Worth the Effort
3n
183
28k
RailsConf 2023
tenderlove
29
940
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
The Invisible Side of Design
smashingmag
298
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Done Done
chrislema
181
16k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Docker and Python
trallard
42
3.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k

Transcript

  1. How To Make Your Email Design Workflow Fun (Again) @leemunroe

  2. @leemunroe

  3. @leemunroe

  4. @leemunroe

  5. @leemunroe

  6. @leemunroe

  7. @leemunroe

  8. British Isles @leemunroe

  9. Great Britain @leemunroe

  10. Ireland @leemunroe

  11. Northern Ireland @leemunroe

  12. United Kingdom @leemunroe

  13. @leemunroe

  14. @leemunroe

  15. @leemunroe

  16. @leemunroe

  17. @leemunroe

  18. @leemunroe

  19. @leemunroe

  20. Plain Text @leemunroe

  21. HTML @leemunroe

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

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

  24. @leemunroe

  25. Litmus Test @leemunroe

  26. Apple Mail @leemunroe

  27. iPhone @leemunroe

  28. Outlook 2002 @leemunroe

  29. Outlook 2013 @leemunroe

  30. Gmail @leemunroe

  31. State Of HTML Email @leemunroe

  32. 30+ Email Clients @leemunroe

  33. @leemunroe

  34. > 50% Mobile Opens @leemunroe

  35. Email Client Share @leemunroe

  36. <div> @leemunroe

  37. Stylesheets @leemunroe

  38. CSS3 @leemunroe

  39. Support for border-radius @leemunroe

  40. HTML5 @leemunroe

  41. Support for <video> @leemunroe

  42. Javascript @leemunroe

  43. Images @leemunroe

  44. Images On? @leemunroe

  45. Building HTML Email @leemunroe

  46. Tables @leemunroe

  47. Kevin Mandeville, Litmus @leemunroe

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

  49. <td> or GTFO (Get To Fixing Outlook) — Kevin Mandeville,

    Litmus @leemunroe

  50. Inline CSS @leemunroe

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

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

  53. Conditionals And Media Queries @leemunroe

  54. Target Outlook <!--[if (gte mso 9)]> <table width="600px" align="center"><tr><td> ...

    </td></tr></table> <![endif]--> @leemunroe

  55. Target Webkit @media screen and (-webkit-min-device-pixel-ratio:0) { .video-element { display:

    block; } } @leemunroe

  56. Target Devices @media only screen and (max-width: 640px) { td

    { font-size: 18px; padding: 0; } } @leemunroe

  57. Uber - Apple Mail @leemunroe

  58. Uber - iPhone Mail @leemunroe

  59. Uber - iPhone Gmail @leemunroe

  60. Progressive Enhancement @leemunroe

  61. Moo - Gmail @leemunroe

  62. Moo - Outlook 2013 @leemunroe

  63. Intercom - Gmail @leemunroe

  64. Intercom - Outlook 2007 @leemunroe

  65. @leemunroe

  66. @leemunroe

  67. @leemunroe

  68. @leemunroe

  69. @leemunroe

  70. @leemunroe

  71. Workflow @leemunroe

  72. Design Systems @leemunroe

  73. Dave Rupert, Paravel @leemunroe

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

  75. @leemunroe

  76. @leemunroe

  77. @leemunroe

  78. Static Site Generators . @leemunroe

  79. @leemunroe

  80. @leemunroe

  81. @leemunroe

  82. 12 Hours @leemunroe

  83. 12 Hours 2½ Hours @leemunroe

  84. @leemunroe

  85. Write HTML @leemunroe

  86. Compile Templates @leemunroe

  87. Compile Sass / Less @leemunroe

  88. Inline CSS @leemunroe

  89. Plain Text @leemunroe

  90. Compress Images @leemunroe

  91. Upload Images @leemunroe

  92. Add Tracking @leemunroe

  93. Send To Myself @leemunroe

  94. Send To Colleague @leemunroe

  95. Send To Litmus @leemunroe

  96. Copy/Paste @leemunroe

  97. "Hey, can you make the logo bigger?" — Some Stakeholder

    @leemunroe

  98. @leemunroe

  99. Bill Gates, Founder Microsoft @leemunroe

  100. "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

  101. @leemunroe

  102. Why use a task runner? Automation @leemunroe

  103. "Makes performing repetitive but necessary tasks ... trivial" — Ben

    Alman, Grunt @leemunroe

  104. @leemunroe

  105. @leemunroe

  106. Gruntfile.js @leemunroe

  107. Compiles Sass to CSS @leemunroe

  108. Builds HTML Templates @leemunroe

  109. Inlines CSS @leemunroe

  110. Generate Plain Text grunt-premailer @leemunroe

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

  112. Send To Myself grunt-mailgun @leemunroe

  113. Send To Litmus grunt-litmus @leemunroe

  114. Send To Your ESP or Template Host @leemunroe

  115. Single Source Of Truth @leemunroe

  116. Show Me @leemunroe

  117. @leemunroe

  118. How To Automate Your Email Design Workflow Using Grunt @leemunroe

  119. Command Line @leemunroe

  120. nodejs.org/download @leemunroe

  121. $ npm install -g grunt-cli @leemunroe

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

  123. @leemunroe

  124. @leemunroe

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

  126. @leemunroe

  127. Advantages → Automation → DRY (Don't Repeat Yourself) → Single

    Source Of Truth → Consistent UX → Not Locked In (Open-Source) @leemunroe

  128. Make Email Fun 1. Know the email client quirks 2.

    Create a modular design system 3. Automate your tasks w/ Grunt or Gulp @leemunroe

  129. @leemunroe @leemunroe

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