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

Think Like an Email Geek

HTeuMeuLeu
September 09, 2019
Technology
1
90

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
900
The Current State of Email Clients
hteumeuleu
1
510
The Great Mess of Alternative Text
hteumeuleu
0
2.2k
Email Camera #EmailHacks at Litmus Live 2017
hteumeuleu
0
490
Les campagnes inspirantes et les dispositifs innovants de demain
hteumeuleu
1
890
La technique des Fab Four
hteumeuleu
0
720
Thinking Outside the table
hteumeuleu
0
720
Le blues des préfixes navigateurs
hteumeuleu
0
49
Comment sortir l'intégration d'e-mails de la préhistoire ?
hteumeuleu
5
2.9k

Other Decks in Technology

See All in Technology
一生覚えておきたい「システム開発＝コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
120
ワールドカフェI ／チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
MapLibreとAmazon Location Service
dayjournal
1
150
本当のAWS基礎
toru_kubota
0
510
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
240
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
220
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
SPI原点回帰論：事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.9k

Featured

See All Featured
Bash Introduction
62gerente
604
210k
Clear Off the Table
cherdarchuk
84
310k
A better future with KSS
kneath
231
16k
Making Projects Easy
brettharned
108
5.5k
BBQ
matthewcrist
80
8.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Infographics Made Easy
chrislema
238
18k
Navigating Team Friction
lara
178
13k

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