$30 off During Our Annual Pro Sale. View Details »

Building HTML Email Doesn't Have To Suck

Lee Munroe
April 22, 2015
Design
0
480

Building HTML Email Doesn't Have To Suck

Building HTML email sucks. Tables. Inline CSS. 30+ clients to support. We now have lots of cool front-end dev tools that can make our lives easier. Know the quirks of the major email clients, build a modular design system and automate your workflow with Grunt to make your life 100x easier.

Presented at Fluent Conf, San Francisco 2015.

Lee Munroe

April 22, 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 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
Lean UX and Landing Page Design
leemunroe
6
480

Other Decks in Design

See All in Design
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
920
世界中のチームワークを どうデザインしているのか
ka3zu1ma10
0
220
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
590
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
360
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
510
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.5k
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
380
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
210
我做了一個詐騙網站...嗎？
crboy
1
160
アフォーダンスとシグニファイア
ryokanakai
1
330
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
880
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Docker and Python
trallard
40
3.1k
Building Your Own Lightsaber
phodgson
103
6.1k
Navigating Team Friction
lara
183
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.3k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Building Applications with DynamoDB
mza
90
6.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The Invisible Side of Design
smashingmag
298
50k
Building an army of robots
kneath
302
43k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
0
57
Bootstrapping a Software Product
garrettdimon
PRO
305
110k

Transcript

  1. BUILDING HTML EMAIL DOESN'T HAVE TO SUCK @leemunroe

  2. @leemunroe

  3. @leemunroe

  4. @leemunroe

  5. @leemunroe

  6. @leemunroe

  7. PLAIN TEXT @leemunroe

  8. HTML @leemunroe

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

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

  11. @leemunroe

  12. LITMUS TEST @leemunroe

  13. APPLE MAIL @leemunroe

  14. IPHONE @leemunroe

  15. OUTLOOK 2002 @leemunroe

  16. OUTLOOK 2013 @leemunroe

  17. GMAIL @leemunroe

  18. STATE OF HTML EMAIL @leemunroe

  19. @leemunroe

  20. 30+ EMAIL CLIENTS @leemunroe

  21. @leemunroe

  22. 53% MOBILE OPENS 1 1 Litmus 2015 State of Email

    Report. @leemunroe

  23. Email Client Share 2 2 Litmus February 2015. @leemunroe

  24. <DIV> @leemunroe

  25. STYLESHEETS @leemunroe

  26. CSS3 @leemunroe

  27. Support for border-radius @leemunroe

  28. HTML5 @leemunroe

  29. Support for <video> @leemunroe

  30. JAVASCRIPT @leemunroe

  31. IMAGES @leemunroe

  32. IMAGES ON BY DEFAULT? @leemunroe

  33. BUILDING HTML EMAIL @leemunroe

  34. TABLES @leemunroe

  35. Kevin Mandeville, Litmus @leemunroe

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

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

    Litmus @leemunroe

  38. INLINE CSS @leemunroe

  39. <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">Activate Mailgun Account</a> @leemunroe

  40. <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;"> Activate Mailgun Account </a> </td> </tr> </table> @leemunroe

  41. TARGET OUTLOOK <!--[if mso]> SHOW ELEMENT OR CUSTOM CSS <![endif]-->

    <!--[if IE]> SHOW ELEMENT OR CUSTOM CSS <![endif]--> <!--[if mso 12]> SHOW ELEMENT OR CUSTOM CSS <![endif]--> @leemunroe

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

    ELEMENTS } @leemunroe

  43. MEDIA QUERIES @media only screen and (max-width: 640px) { STYLES

    TO HIDE/SHOW/MODIFY ELEMENTS } @leemunroe

  44. UBER - APPLE MAIL @leemunroe

  45. UBER - IPHONE MAIL @leemunroe

  46. UBER - IPHONE GMAIL @leemunroe

  47. PROGRESSIVE ENHANCEMENT @leemunroe

  48. MOO - GMAIL @leemunroe

  49. MOO - OUTLOOK 2013 @leemunroe

  50. INTERCOM - GMAIL @leemunroe

  51. INTERCOM - OUTLOOK 2007 @leemunroe

  52. @leemunroe

  53. @leemunroe

  54. @leemunroe

  55. @leemunroe

  56. @leemunroe

  57. @leemunroe

  58. WORKFLOW FOR HTML EMAIL @leemunroe

  59. DESIGN SYSTEMS @leemunroe

  60. Dave Rupert, Paravel @leemunroe

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

  62. @leemunroe

  63. @leemunroe

  64. @leemunroe

  65. STATIC SITE GENERATORS . @leemunroe

  66. $ jekyll serve @leemunroe

  67. $ sass css/scss:css @leemunroe

  68. INLINE CSS @leemunroe

  69. $ premailer email.html @leemunroe

  70. COMPRESS IMAGES @leemunroe

  71. $ imagemin images @leemunroe

  72. ENOUGH IS ENOUGH @leemunroe

  73. AUTOMATE @leemunroe

  74. $ grunt @leemunroe

  75. GRUNTFILE.JS @leemunroe

  76. COMPILES SCSS TO CSS @leemunroe

  77. BUILDS HTML TEMPLATES WITH ASSEMBLE @leemunroe

  78. INLINES CSS WITH PREMAILER @leemunroe

  79. GENERATE PLAIN TEXT grunt-premailer @leemunroe

  80. COMPRESS & UPLOAD IMAGES grunt-contrib-imagemin @leemunroe

  81. SEND MYSELF THE EMAIL grunt-mailgun @leemunroe

  82. SEND LITMUS THE EMAIL grunt-litmus @leemunroe

  83. SEND TEMPLATES TO YOUR ESP @leemunroe

  84. SEND TEMPLATES TO YOUR CODEBASE @leemunroe

  85. SHOW ME @leemunroe

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

  87. @leemunroe

  88. @leemunroe

  89. @leemunroe

  90. @leemunroe

  91. $ grunt @leemunroe

  92. @leemunroe

  93. @leemunroe

  94. @leemunroe

  95. @leemunroe

  96. @leemunroe

  97. @leemunroe

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

  99. @leemunroe @leemunroe

  100. RESOURCES REFERENCED * Grunt Email Workflow (github.com/leemunroe/grunt-email-workflow) * Mailgun (mailgun.com)

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