Thinking Outside the table

Email constraints can be frustrating for a web developer (damn you, [insert your most loathed email client here]). But aside from annoying bugs, these constraints are sometimes here for very important security reasons. These constraints can also be a fuel for brand new ideas and techniques unique to emails. From a goofy email that evolves as you forward it, to a brand new technique to build responsive email without media queries, this talk will guide you inside the mind of an email geek.

Read the full transcript here: https://emails.hteumeuleu.com/thinking-outside-the-table-at-tedc16-a58a76c7c625

Transcript

1. Litmus Conf London, 2016/07/27
2. Rémi Parmentier @HTeuMeuLeu
3. THINKING OUTSIDE THE <TABLE>
4. Super Mail Forward Part I
7. What happens when you forward an email? (from a webmail)
9. Not much more than when the webmail receives it in the first place.
10. .cell { color: white; background: green url(image.jpg); }
11. .cell { color: white; }
12. AOL Yahoo Outlook.com Gmail
13. AOL Yahoo Outlook.com Gmail AOL
14. ! <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> <style> * [aria-labelledby="step1"], .step2, .step4 { background:grey!important; } ! @media yahoo { .step2 { background:green!important; } } ! .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
15. ! <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> <style> * [aria-labelledby="step1"], .step2, .step4 { background:grey!important; } ! @media yahoo { .step2 { background:green!important; } } ! .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
16. ! <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> <style> * [aria-labelledby="step1"], .step2, .step4 { background:grey!important; } ! @media yahoo { .step2 { background:green!important; } } ! .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
18. <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
19. <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
20. <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
21. <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url(&quot;<a href="spacer.gif&quot" target=_blank>spacer.gif</a>;)!important; background:grey!important; } </style> CSS HTML
22. <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } </style> CSS HTML
23. Yahoo
24. <div class="yiv113aolReplacedBody"> <table> <tr> <td style="background:green;" class="yiv113step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> .yiv113aolReplacedBody * [aria-labelledby="step1"], .yiv113aolReplacedBody .yiv113step2, .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
25. <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"], #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
26. <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"], #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
27. <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * .filtered99999, #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
28. <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * .filtered99999, #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
29. <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * .filtered99999, #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
30. Outlook.com
31. <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step3">Outlook.com</td <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
32. <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step3">Outlook.com</td <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
33. <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;" class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
34. <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;" class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
35. <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;" class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
36. Gmail
37. <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;" class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
38. <div> <table> <tr> <td style="background:green;">AOL</td> <td style="background:green;">Yahoo</td> <td style="background:green;">Outlook.com</td> <td style="background:green;">Gmail</td> </tr> </table> </div> CSS HTML
54. AOL fixed their bug. The good news is…
57. Webmail security Part II
58. <a style="position:fixed; left:0; right:0; top:0; bottom:0;" href="http://example.com"> … </a>
59. <div style="overflow:hidden;"> … </div>
60. <div style="java-script:hidden;"> … </div>
63. Why java-script ?
68. onload ✖
69. onanimationend
70. <style> @keyframes bar {} </style>
71. <style> @keyframes bar {} .foo { animation:bar; } </style>
72. <style> @keyframes bar {} .foo { animation:bar; } </style> <div class="foo"></div>
73. <style> @keyframes bar {} .foo { animation:bar; } </style> <div class="foo" onanimationend="alert('Hi !');"></div>
75. I reported this bug and all I got was a lousy thank you.
76. How do you filter JavaScript out of an email ? Use a white list.
78. No class, no id No <style> on mobile No media queries on mobile
79. There are two hard things in Computer Science:
 cache invalidation 
 and naming things. “ — Phil Karlton ”
80. There are three hard things in Computer Science:
 cache invalidation 
 and naming things and responsive emails. “ ”
81. It's hard to code responsive emails.
82. Source : http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
85. without media queries? How can we make a column grow on mobile
86. F L E X B O X
87. Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886
88. .grid { display: flex; flex-wrap: wrap; flex-direction: row; } ! .grid > * { flex: 1 1 auto; }
89. .grid { display: flex; }
90. Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886
91. without media queries? How can we make a column grow on mobile
92. without media queries and without flexbox? How can we make a column grow on mobile
93. Three ideas that put me on track
94. Three ideas 1. Gmail CSS support
95. .hero { background: url(image.jpg) 0 0; background-size: cover; }
96. .hero { background: url(image.jpg) 0 0 / cover; }
97. .hero { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%); }
98. Source : http://emailweekly.co/
99. .main { width: calc(100% - 200px); }
100. 200px calc(100% - 200px)
101. 200px calc(100% - 200px)
102. Three ideas 2. Responsive typography
103. Source : http://madebymike.com.au/writing/precise-control-responsive-typography/
104. font-size: calc( 12px + (24 - 12) * ( (100vw - 400px) / ( 800 - 400) ));
105. Three ideas 3. « Size matters »
106. Source : http://goetter.tumblr.com/post/64119638003/quiz-parce-que-la-taille-%C3%A7a-compte
107. min-width, width and max-width Which is the strongest one ?
108. min-width: ; width: ; max-width: ; 160px 320px 480px
109. 320px min-width: ; width: ; max-width: ; 160px 480px
110. 480px min-width: ; width: ; max-width: ; 320px 160px
111. Source : https://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths
113. Bingo !
114. width,! min-width,! max-width,! & calc()
115. The Fab Four Technique Part III
116. The Fab Four Technique Illustrations by Elias Stein : https://dribbble.com/shots/2012203-Paul-George
118. There are three hard things in Computer Science:
 cache invalidation 
 and naming things and responsive emails. “ ”
119. The Fab Four Technique
120. Above 480px
121. Below 480px
122. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480); Below breakpoint width Above breakpoint width Breakpoint
123. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480); with a 500px parent 500px 125px 500px
124. max$width:/ min$width:/ width: with a 500px parent 500px 125px $9600px
125. max$width:/ min$width:/ width: avec un parent à 500px 500px $9600px 125px
126. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480); with a 400px parent 400px 100px 400px
127. max$width:100%;/ min$width:25%;/ width:calc( with a 400px parent 400px 100px 38400px
128. max$width:100%;/ min$width:25%;/ width:calc( avec un parent à 400px 200px 38400px 400px
129. max$width:100%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480);
130. max$width:50%;/ min$width:25%;/ width:calc((480px/$/100%)/*/480);
132. Support Apple Mail Gmail Outlook.com
 (2015) Thunderbird Orange AOL
133. Support for Outlook.com (2015 version
135. width:calc((480px/$/100%)/*/480);
136. width:calc(480px/*/480/$/100%/*/480);
137. Support for 
 older WebKit Safari 6 and less Android 4 and less
138. max$width:100%;/ min$width:25%;/ width:calc(480px/*/480/$/100%/*/480);
139. max$width:100%;/ min$width:25%;/ width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480);
140. Graceful degradation
 without calc()
141. display:inline$block;/ min$width:120px;/ width:25%;
142. max$width:100%;/ min$width:25%;/ width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480); display:inline$block;/ min$width:120px;/ width:25%;
143. max$width:100%;/ min$width:$webkit$calc(25%);/ min$width:calc(25%);/ width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480); display:inline$block;/ min$width:120px;/ width:25%;
144. Support for Outlook.com (2016 version
146. <div/style="display:inline$block;// min$width:120px;/ width:25%;/ max$width:100%;// min$width:$webkit$calc(25%);// min$width:calc(25%);// width:$webkit$calc(480px/*/480/$/100%/*/480);/ width:calc(480px/*/480/$/100%/*/480);">/ / …/ </div>
147. <div/style="">/ / …/ </div>
148. width:calc(480px/*/480/$/100%/*/480);
149. width:calc(230400px/$/48000%);
150. <div/style="display:inline$block;// min$width:120px;/ width:25%;/ max$width:100%;// min$width:$webkit$calc(25%);// min$width:calc(25%);// width:$webkit$calc(230400px/$/48000%);/ width:calc(230400px/$/48000%);">/ / …/ </div>
151. <div/style="display:inline$block;// min$width:120px;/ width:25%;/ max$width:100%;">/ / …/ </div>
152. Constraints drive creativity.
153. Thank you ! @HTeuMeuLeu emails.hteumeuleu.com tilt-studio.fr