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
490

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
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
210
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
56k
LayerX DesignersDeck
layerx
PRO
0
910
東急URBAN HACKSのデザイナーって何やってるの？ 〜Designer Night #1〜
tak073
0
170
【pmconf2024】ユーザーになりきる「コスプレUX」で リサーチ解像度を上げる
kamechi7222222
1
7.1k
(第１回) アーキテクト・テックリード育成講座
masakaya
0
110
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
今日から始める グラレコ チャレンジ　DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
140
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン｜TOKYO CREATIVE COLLECTION
madue
1
1.3k
プロダクトデザイナー視点から見た チームでの意思決定の難しさと 重要ポイント3点
kei141
0
510
SaaSのマーケティングを進めるサービスサイトを育てる取り組み / Designship 2024 Main Stage
sms_tech
1
1.3k

Featured

See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Designing for humans not robots
tammielis
250
25k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
A better future with KSS
kneath
238
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Raft: Consensus for Rubyists
vanstee
137
6.7k

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