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

Think Like an Email Geek

HTeuMeuLeu
September 09, 2019
Technology
1
100

Think Like an Email Geek

Coding HTML emails is a beast of its own, often perceived as relying solely on outdated practices. And for a good reason, email client quirks can make even the most clever front-end developer crazy. Emails are still part of your user’s journey, from commercial newsletters to transactional emails.

The first step to thinking like an email geek is to understand how email clients change our code and why this happens. From technical and security constraints to user experience enhancements, every quirk is there for a reason.

Those constraints then allow email geeks to invent new ways to use HTML and CSS. From building responsive layouts without media queries to creating interactive emails without any JavaScript—”Life finds a way” to quote my favorite mathematician.

HTeuMeuLeu

September 09, 2019
Tweet

More Decks by HTeuMeuLeu

See All by HTeuMeuLeu
Des bonnes pratiques de l'intégration d'e-mails
hteumeuleu
1
970
The Current State of Email Clients
hteumeuleu
1
530
The Great Mess of Alternative Text
hteumeuleu
0
2.4k
Email Camera #EmailHacks at Litmus Live 2017
hteumeuleu
0
580
Les campagnes inspirantes et les dispositifs innovants de demain
hteumeuleu
1
950
La technique des Fab Four
hteumeuleu
0
800
Thinking Outside the table
hteumeuleu
0
840
Le blues des préfixes navigateurs
hteumeuleu
0
54
Comment sortir l'intégration d'e-mails de la préhistoire ?
hteumeuleu
5
3.1k

Other Decks in Technology

See All in Technology
Platform Engineering for Software Developers and Architects
syntasso
1
510
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.1k
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
470
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
1
2.3k
複雑なState管理からの脱却
sansantech
PRO
1
140
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
第1回 国土交通省 データコンペ参加者向け勉強会③ - Snowflake x estie編 -
estie
0
120
フルカイテン株式会社 採用資料
fullkaiten
0
40k
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
280
TypeScriptの次なる大進化なるか！？　条件型を返り値とする関数の型推論
uhyo
2
1.6k

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Happy Clients
brianwarren
98
6.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Designing the Hi-DPI Web
ddemaree
280
34k
Faster Mobile Websites
deanohume
305
30k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Fireside Chat
paigeccino
34
3k
GraphQLとの向き合い方2022年版
quramy
43
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k

Transcript

  1. SMASHING CONF Freiburg, 09/09/2019

  2. RÉMI PARMENTIER @HTeuMeuLeu

  3. EMAIL GEEK

  4. THINK LIKE AN EMAIL GEEK

  5. None

  6. What was the name of the !rst Egyptian email developer?

    Neferteedee.

  7. JUST USE PLAIN TEXT.

  8. Dear Friend, You've requested a new password for your account.

    If you actually requested this change, please reset your password now. https://www.smashingmagazine.com/auth/recover/ fXSETxkGlkece0cvAlHiAx If the link and button above don't work for some reason, Please copy and paste the URL into your browser instead. If you didn't actually send this request, just ignore this email. Of course, your password will remain the same. From cats with love. The Smashing Family

  9. Dear Friend, You've requested a new password for your account.

    If you actually requested this change, please reset your password now. https://www.smashingmagazine.com/auth/recover/ fXSETxkGlkece0cvAlHiAx If the link and button above don't work for some reason, Please copy and paste the URL into your browser instead. If you didn't actually send this request, just ignore this email. Of course, your password will remain the same. From cats with love. The Smashing Family VoiceOver
  10. None

  11. EMAIL IS HARD. HARD

  12. None
  13. None

  14. VoiceOver book_1_alt_text

  15. None
  16. None

  17. EMAIL IS HARD. But…

  18. EVERYTHING
 IS POSSIBLE.

  19. None
  20. None
  21. None
  22. None

  23. EVERYTHING IS POSSIBLE. But…

  24. NOTHING WORKS EVERYWHERE. NOTHING

  25. None
  26. None
  27. None

  28. Every email […] has approximately 15,000 potential renderings (and that’s

    using conservative math). CHAD S. WHITE (LITMUS): “

  29. EMAIL CLIENTS EGNAHC YOUR CODE. CHANGE

  30. EMAIL CLIENTS ADD LINKS. LINKS

  31. Mario Kart Tour is coming on September 25th. © 2019

    Nintendo Co., Ltd. | Nintendo 3DS, Wii U and Nintendo Switch are trademarks of Nintendo. Customer service in France: [email protected] Phone : (+33) 08 92 68 77 55 (0,40 €/min) For informations regarding customer service in another country, please visit https://support.nintendo.com. For questions related to your Nintendo account, please contacter the dedicated customer service: [email protected]. Nintendo Co., Ltd., 11-1 Hokotate-cho, Kamitoba, Minami-ku, Kyoto 601-8501, Japan. Registration number: 1300-01-011420. Directors: Shuntaro Furukawa, Shigeru Miyamoto. [email protected] September 25th 08 92 68 77 55 https://support.nintendo.com [email protected] 11-1 Hokotate-cho, Kamitoba, Minami-ku, Kyoto 601-8501, Japan 1300-01-011420
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None

  38. EMAIL CLIENTS CHANGE YOUR STYLES.

  39. None

  40. <!DOCTYPE html> <html lang="en"> <head> <title>Smashing</title> <style> .main { color:red;

    } </style> </head> <body> <div class="main"> <h1>Dear friend</h1> </div> </body> </html>

  41. <style> .main { color:red; } </style> <div class="main"> <h1>Dear friend</h1>

    </div>

  42. <style> .x123_main { color:red; } </style> <div class="x123_main"> <h1>Dear friend</h1>

    </div>

  43. html; charset=UTF-8"><title>Messagerie</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="google" value="notranslate"><meta name="application- name" content="Messagerie"><meta name="description"

    content="La messagerie selon Google"><meta name="application-url" content="https://mail.google.com/mail/u/1"><meta name="google" content="notranslate"><link rel="canonical" href="https:// mail.google.com/mail/"/><link rel="shortcut icon" href="https://www.google.com/a/ images/favicon.ico" type="image/x-icon"><link rel="alternate" type="application/ atom+xml" title="Flux Atom de Messagerie Gmail" href="feed/atom"> <style> .x123_main { color:red; } </style> </head> <body> <div class="nH"><div class="nH"><div class="nH w-asV"><div class="nH bKL"><div class="no"><div class="nH oy8n Bf nn aEn"><div class="nH"><div class><div class="AO"><div class="nH g id"> <div class="nH"><div class="nH"><div class="nH w- asV"><div class="nH bKL"><div class="no"><div class="nH oy8n Bf nn aEn"><div class="nH"><div class><div class="AO"><div class="nH g id"> <div class="nH"><div class="nH"><div class="nH w-asV"><div class="nH bKL"><div class="no"><div class="nH oy8n Bf nn aEn"><div class="nH"><div class><div class="AO"><div class="nH g id »><div id=":zm" class="a3s aXjCH msg23902384912146"><u></u> <div class="x123_main"> <h1>Dear friend</h1> </div> </div></div></div></div></div></div></div></div></div></div></div></div></div></div></

  44. .foo { background: red; } /* This is a comment.

    */ .bar { background: green; } Yahoo! Mail

  45. #yiv6500658075 .yiv6500658075foo { background: red; } /* This is a

    comment. */ #yiv6500658075 .yiv6500658075bar { background: green; } Yahoo! Mail

  46. #yiv6500658075 .yiv6500658075foo { background: red; } #yiv6500658075 #yiv6500658075 .yiv6500658075bar {

    background: green; } Yahoo! Mail

  47. #yiv6500658075 .yiv6500658075foo { background: red; } #yiv6500658075 #yiv6500658075 .yiv6500658075bar {

    background: green; } Yahoo! Mail
  48. None

  49. .foo.bar { background: green; } Outlook.com

  50. .x_foo.bar { background: green; } Outlook.com

  51. None

  52. .foo { background: black; animation: bar linear 0.3s; } @keyframes

    bar { 0% { background: red; } 33.33% { background: green; } } Yahoo! Mail

  53. .foo { background: black; animation: bar linear 0.3s; } @keyframes

    bar { 0% { background: red; } 33.33% { background: green; } } Yahoo! Mail

  54. .foo { background: black; } _filtered #yiv2616938952 { background: red;

    } 33.33% { background: green; } } Yahoo! Mail

  55. #yiv6523362013 .yiv2616938952foo { background: black; } _filtered #yiv2616938952 { background:

    red; } #yiv6523362013 33.yiv261693895233 { background: green; } } Yahoo! Mail

  56. #yiv6523362013 .yiv2616938952foo { background: black; } _filtered #yiv2616938952 { background:

    red; } #yiv6523362013 33.yiv261693895233 { background: green; } #yiv2616938952 Yahoo! Mail
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None

  64. Source : https://github.com/hteumeuleu/email-bugs/issues

  65. BUT THEN THERE'S OUTLOOK.

  66. 1997 A SHORT TIMELINE OF OUTLOOK Dinosaurs Outlook uses IE’s

    rendering engine

  67. 2007 2003 A SHORT TIMELINE OF OUTLOOK STILL uses IE’s

    rendering engine NOW uses WORD’s rendering engine

  68. 2019 2016 2013 2010 2007 A SHORT TIMELINE OF OUTLOOK

    NOW uses WORD’s rendering engine

  69. CSS SUPPORT IN OUTLOOK 2007-2019 <body> <span> CORE COREEXTENDED FULL

    color font text-align background-color text-indent margin width height padding border etc. <div> <p> <table> <td> <hn> Others

  70. <!--[if mso]> <p>This is only for Outlook.</p> <![endif]-->

  71. <!--[if mso 12]> // Outlook 2007 <!--[if mso 14]> //

    Outlook 2010 <!--[if mso 15]> // Outlook 2013 <!--[if mso 16]> // Outlook 2016 <!--[if mso 16]> // Outlook 2019 ?
  72. None

  73. text-effect:outline;

  74. text-fit:600px;

  75. VML

  76. mso-text-animation

  77. CONSTRAINTS DRIVE CREATIVITY.

  78. None
  79. None

  80. <!DOCTYPE html> <html lang="en"> <head> <style> .foo { background: green;

    } </style> </head> <body> <div class="foo">…</div> </body> </html> Yahoo! Mail Android

  81. <!DOCTYPE html> <html lang="en"> <body> <div class="foo">…</div> </body> </html> Yahoo!

    Mail Android

  82. <!DOCTYPE html> <html lang="en"> <head></head> <head> <style> .foo { background:

    green; } </style> </head> <body> <div class="foo">…</div> </body> </html> Yahoo! Mail Android

  83. <!DOCTYPE html> <html lang="en"> <head> <style> .foo { background: green;

    } </style> </head> <body> <div class="foo">…</div> </body> </html> Yahoo! Mail Android

  84. FAKE IT 'TIL YOU MAKE IT. DEMO TIME

  85. One more thing…

  86. None

  87. THANK YOU! @HTeuMeuLeu [email protected] https://emails.hteumeuleu.com