Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

How to make your email design workflow fun again

Lee Munroe
September 16, 2015
Technology
2
280

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

See All by Lee Munroe
How to make your email design workflow fun again
leemunroe
3
210
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
480
Lean UX and Landing Page Design
leemunroe
6
480

Other Decks in Technology

See All in Technology
もう一度、 事業を支えるシステムに。
leveragestech
6
3k
2024年のAmazon Bedrockアップデート一挙おさらい 〜まだ間に合う！ re:Invent直前までの重大ニュースを速習しよう〜
minorun365
PRO
3
160
プラットフォームエンジニアリングアーキテクチャ道場 on AWS & EKS Kubernetes / Platform Engineering Architecture Dojo
riita10069
7
16k
Kubernetesを知る
logica0419
17
4.4k
データカタログを自作したけど 運用しなかった話@Findy Lunch LT「データカタログ 事例から学ぶメタデータ管理の実態」
ryo_suzuki
2
410
全社員に向けて生成AI活用を促進！～電通総研の生成AI活用ロードマップ～
iotcomjpadmin
0
300
共創するアーキテクチャ ～チーム全体で築く持続可能な開発エコシステム～ / Co-Creating Architecture - A Sustainable Development Ecosystem Built by the Entire Team
bitkey
PRO
1
3.9k
クルマのサブスクを Next.jsで内製化した経験とその1年後
kintotechdev
2
450
【CNDW2024】SIerで200人クラウドネイティブのファンを増やした話
yuta1979
1
280
Kubernetes だけじゃない！Amazon ECS で実現するクラウドネイティブな GitHub Actions セルフホストランナー / CNDW2024
ponkio_o
PRO
6
420
2024/11/29_失敗談から学ぶ！ エンジニア向けre:Invent攻略アンチパターン集
hiashisan
0
270
GeminiとUnityで実現するインタラクティブアート
hokkey621
0
340

Featured

See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Side Projects
sachag
452
42k
Rails Girls Zürich Keynote
gr2m
94
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
880
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
What's in a price? How to price your products and services
michaelherold
243
12k
Happy Clients
brianwarren
98
6.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Typedesign – Prime Four
hannesfritz
40
2.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k

Transcript

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

  2. @leemunroe

  3. @leemunroe

  4. @leemunroe

  5. @leemunroe

  6. Northern Ireland @leemunroe

  7. @leemunroe

  8. @leemunroe

  9. @leemunroe

  10. @leemunroe

  11. @leemunroe

  12. @leemunroe

  13. @leemunroe

  14. Plain Text @leemunroe

  15. HTML @leemunroe

  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

  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

  18. @leemunroe

  19. Litmus Test @leemunroe

  20. Apple Mail @leemunroe

  21. iPhone @leemunroe

  22. Outlook 2002 @leemunroe

  23. Outlook 2013 @leemunroe

  24. Gmail @leemunroe

  25. STATE OF HTML EMAIL @leemunroe

  26. 30+ EMAIL CLIENTS @leemunroe

  27. @leemunroe

  28. > 50% MOBILE OPENS @leemunroe

  29. Email Client Share @leemunroe

  30. <DIV> @leemunroe

  31. STYLESHEETS @leemunroe

  32. CSS3 @leemunroe

  33. Support for border-radius @leemunroe

  34. HTML5 @leemunroe

  35. Support for <video> @leemunroe

  36. JAVASCRIPT @leemunroe

  37. IMAGES @leemunroe

  38. Images On? @leemunroe

  39. BUILDING HTML EMAIL @leemunroe

  40. TABLES @leemunroe

  41. Kevin Mandeville, Litmus @leemunroe

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

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

    Litmus @leemunroe

  44. INLINE CSS @leemunroe

  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

  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

  47. TARGET OUTLOOK <!--[if (gte mso 9)]> SHOW ELEMENT OR WRITE

    CUSTOM CSS <![endif]--> @leemunroe

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

    ELEMENTS } @leemunroe

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

    TO HIDE/SHOW/MODIFY ELEMENTS } @leemunroe

  50. Uber - Apple Mail @leemunroe

  51. Uber - iPhone Mail @leemunroe

  52. Uber - iPhone Gmail @leemunroe

  53. PROGRESSIVE ENHANCEMENT @leemunroe

  54. Moo - Gmail @leemunroe

  55. Moo - Outlook 2013 @leemunroe

  56. Intercom - Gmail @leemunroe

  57. Intercom - Outlook 2007 @leemunroe

  58. @leemunroe

  59. @leemunroe

  60. @leemunroe

  61. @leemunroe

  62. WRITE HTML @leemunroe

  63. COMPILE TEMPLATES @leemunroe

  64. COMPILE SASS @leemunroe

  65. INLINE CSS @leemunroe

  66. PLAIN TEXT @leemunroe

  67. COMPRESS IMAGES @leemunroe

  68. UPLOAD IMAGES @leemunroe

  69. ADD TRACKING @leemunroe

  70. SEND TO MYSELF @leemunroe

  71. SEND TO COLLEAGUE @leemunroe

  72. SEND TO LITMUS @leemunroe

  73. COPY & PASTE @leemunroe

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

  75. @leemunroe

  76. @leemunroe

  77. @leemunroe

  78. WORKFLOW @leemunroe

  79. Design Systems @leemunroe

  80. Dave Rupert, Paravel @leemunroe

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

  82. @leemunroe

  83. @leemunroe

  84. @leemunroe

  85. STATIC SITE GENERATORS . @leemunroe

  86. Bill Gates, Founder Microsoft @leemunroe

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

    Because a lazy person will find an easy way to do it." @leemunroe

  88. AUTOMATE @leemunroe

  89. @leemunroe

  90. Gruntfile.js @leemunroe

  91. Compiles Sass to CSS @leemunroe

  92. Builds HTML Templates @leemunroe

  93. Inlines CSS @leemunroe

  94. Generate Plain Text grunt-premailer @leemunroe

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

  96. Send To Myself grunt-mailgun @leemunroe

  97. Send To Litmus grunt-litmus @leemunroe

  98. Send To Your ESP or Template Host @leemunroe

  99. Single Source Of Truth @leemunroe

  100. SHOW ME @leemunroe

  101. @leemunroe

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

  103. @leemunroe

  104. @leemunroe

  105. @leemunroe

  106. @leemunroe

  107. $ npm install @leemunroe

  108. $ grunt @leemunroe

  109. @leemunroe

  110. @leemunroe

  111. @leemunroe

  112. @leemunroe

  113. @leemunroe

  114. @leemunroe

  115. $ grunt s3upload @leemunroe

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

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

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

  119. @leemunroe

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

    source of truth ▸ Consistency ▸ Not locked in @leemunroe

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

    modular system 3. Automate your tasks @leemunroe

  122. @leemunroe @leemunroe

  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