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

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
ito aya|Portfolio2409
itoaya116
0
260
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
410
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
300
Night Shift concept 9/15/2024
cpineda57
0
740
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
550
Credence
lratmansunu
0
460
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
350
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.2k
我做了一個詐騙網站...嗎？
crboy
1
150
Yahoo Newsletter Clicker Template
xuechunwu
0
290

Featured

See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
The Invisible Side of Design
smashingmag
298
50k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
What's new in Ruby 2.0
geeforr
343
31k
Agile that works and the tools we love
rasmusluckow
327
21k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Fireside Chat
paigeccino
34
3k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k

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