Think Like an Email Geek

A6201a057eac39e2b97a5a58d5f8601e?s=47 HTeuMeuLeu
September 09, 2019

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.

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

September 09, 2019
Tweet

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: webmaster@nintendo.fr 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: service@nintendo.de. Nintendo Co., Ltd., 11-1 Hokotate-cho, Kamitoba, Minami-ku, Kyoto 601-8501, Japan. Registration number: 1300-01-011420. Directors: Shuntaro Furukawa, Shigeru Miyamoto. webmaster@nintendo.fr September 25th 08 92 68 77 55 https://support.nintendo.com service@nintendo.de 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 remi@hteumeuleu.fr https://emails.hteumeuleu.com