Thinking Outside the <table>

A presentation at The Email Design Conference in July 2016 in London, UK by Rémi Parmentier

Litmus Conf London, 2016/07/27

Rémi Parmentier @HTeuMeuLeu

THINKING

THINKING OUTSIDE THE
<TABLE>

Super Mail Forward Part I

What happens when you forward an email? (from a webmail)

Not much more than when the webmail receives it in the first place.

.cell {
color : white ;
background : green
url ( image.jpg ); }

.cell {
color : white ; }

AOL Yahoo Outlook.com Gmail

AOL Yahoo Outlook.com Gmail AOL

< 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

< 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

< 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

< 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

AOL

< 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

< 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

< 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

< 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 ( "<a href="spacer.gif&quot" target=_blank>spacer.gif</a>; ) !important ;
background : grey !important ; } </ style
CSS HTML

< 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

Yahoo

< 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

< 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

< 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

< 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

< 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

< 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

< 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

Outlook.com

< 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

< 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

< 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

< 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

< 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

< 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

Gmail

< 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

< 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

AOL fixed their bug. The good news is…

Webmail security Part II

< a
style
"position:fixed; left:0; right:0; top:0; bottom:0;"
href
"http://example.com"
…
</ a

< div
style
"overflow:hidden;"
…
</ div

< div
style
"java-script:hidden;"
…
</ div

Why java-script ?

onload ✖

onanimationend

< style
@keyframes bar {} </ style

< style
@keyframes bar {}
.foo { animation : bar ; } </ style

< style
@keyframes bar {}
.foo { animation : bar ; } </ style
< div
class
"foo"
</ div

< style
@keyframes bar {}
.foo { animation : bar ; } </ style
< div
class
"foo"
onanimationend
"alert('Hi !');"
</ div

I reported this bug and all I got was a lousy thank you.

How do you
filter JavaScript
out of an email ? Use a white list.

No class , no id

No class , no id No
<style> on mobile No media queries on mobile

There are two hard things in Computer Science:   cache invalidation   and naming things. “ — Phil Karlton ”

There are three hard things in Computer Science:   cache invalidation   and naming things and responsive emails. “ ”

It's hard to code responsive emails.

Source : http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

without media queries? How can we make a column grow on mobile

FLEXBOX

Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886

.grid {
display : flex ;
flex-wrap : wrap ;
flex-direction : row ; }
.grid
{
flex : 1 1
auto ; }

.grid {
display : flex ; }

Source : https://emails.hteumeuleu.com/using-flexbox-in-an-email-4b1aa7a69886

without media queries? How can we make a column grow on mobile

without media queries and without flexbox? How can we make a column grow on mobile

Three ideas that put me on track

Three ideas
Gmail CSS support

.hero {
background : url ( image.jpg )
0 0 ;
background-size : cover ; }

.hero {
background : url ( image.jpg )
0 0
/ cover ; }

.hero {
background :radial-gradient( circle at 30 %
107 % , #fdf497
0 % , #fdf497
5 % , #fd5949
45 % , #d6249f
60 % , #285aeb
90 % ); }

Source : http://emailweekly.co/

.main {
width : calc( 100 %
200 px ); }

200px calc(100% - 200px)

200px calc(100% - 200px)

200px calc(100% - 200px)

Three ideas 2. Responsive typography

Source : http://madebymike.com.au/writing/precise-control-responsive-typography/

font-size : calc( 12 px
( 24
12 ) * ( ( 100 vw
400 px ) / ( 800
400 ) ));

Three ideas 3. « Size matters »

Source : http://goetter.tumblr.com/post/64119638003/quiz-parce-que-la-taille-%C3%A7a-compte

min-width,
width
and max-width Which is the strongest one ?

min-width :
; width :
; max-width :
; 160 px 320 px 480 px

320 px min-width :
; width :
; max-width :
; 160 px 480 px

480 px min-width :
; width :
; max-width :
; 320 px 160 px

Source : https://www.w3.org/TR/REC-CSS2/visudet.html#min-max-widths

Bingo !

width, min-width, max-width, & calc()

The Fab Four Technique Part III

The Fab Four Technique Illustrations by Elias Stein : https://dribbble.com/shots/2012203-Paul-George

There are three hard things in Computer Science:   cache invalidation   and naming things and responsive emails. “ ”

The Fab Four Technique

Above 480px

480px

480px

Below 480px

Below 480px

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px
100 % ) * 480 ) ; Below breakpoint width Above breakpoint width Breakpoint

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px
100 % ) * 480 ) ; with a 500px parent 500 px 125 px 500 px

max-width : min -width : width : with a 500px parent 500 px 125 px -9600 px

max-width : min -width : width : avec un parent à 500px 500 px -9600 px 125 px

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px
100 % ) * 480 ) ; with a 400px parent 400 px 100 px 400 px

max-width : 100 % ; min -width : 25 % ; width :calc( with a 400px parent 400 px 100 px 38400 px

max-width : 100 % ; min -width : 25 % ; width :calc( avec un parent à 400px 200 px 38400 px 400 px

max-width : 100 % ; min -width : 25 % ; width :calc(( 480 px
100 % ) * 480 ) ;

max-width : 50 % ; min -width : 25 % ; width :calc(( 480 px
100 % ) * 480 ) ;

Support Apple Mail Gmail Outlook.com   (2015) Thunderbird Orange AOL

Support for Outlook.com (2015 version)

width :calc(( 480 px
100 % ) * 480 ) ;

width :calc( 480 px * 480
100 % * 480 ) ;

Support for   older WebKit Safari 6 and less Android 4 and less

max-width : 100 % ; min -width : 25 % ; width :calc( 480 px * 480
100 % * 480 ) ;

max-width : 100 % ; min -width : 25 % ; width :-webkit-calc( 480 px * 480
100 % * 480 ) ;
width :calc( 480 px * 480
100 % * 480 ) ;

Graceful degradation   without calc()

display : inline-block ; min -width : 120 px ; width : 25 % ;

max-width : 100 % ; min -width : 25 % ; width :-webkit-calc( 480 px * 480
100 % * 480 ) ;
width :calc( 480 px * 480
100 % * 480 ) ; display : inline-block ; min -width : 120 px ; width : 25 % ;

max-width : 100 % ; min -width :-webkit-calc( 25 % ) ; min -width :calc( 25 % ) ; width :-webkit-calc( 480 px * 480
100 % * 480 ) ;
width :calc( 480 px * 480
100 % * 480 ) ; display : inline-block ; min -width : 120 px ; width : 25 % ;

Support for Outlook.com (2016 version)

< div
style =" display : inline-block ;
min-width : 120 px ; width : 25 % ; max-width : 100 % ;
min-width :-webkit-calc( 25 % );
min-width :calc( 25 % );
width :-webkit-calc( 480 px * 480
100 % * 480 ); width :calc( 480 px * 480
100 % * 480 ); "
… </ div

< div
style =""
… </ div

width :calc( 480 px * 480
100 % * 480 ) ;

width :calc( 230400 px
48000 % ) ;

< div
style =" display : inline-block ;
min-width : 120 px ; width : 25 % ; max-width : 100 % ;
min-width :-webkit-calc( 25 % );
min-width :calc( 25 % );
width :-webkit-calc( 230400 px
48000 % ); width :calc( 230400 px
48000 % ); "
… </ div

< div
style =" display : inline-block ;
min-width : 120 px ; width : 25 % ; max-width : 100 % ; "
… </ div

Constraints
drive creativity.

Thank you ! @HTeuMeuLeu emails.hteumeuleu.com tilt-studio.fr

<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
< script src
"https://rawgit.com/…/legitscript.js"
</ script
< script
var x
document . createElement ( 'script' );
x. src
'https://rawgit.com/…/dontfilterme.js' ;
var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
< table border
"0"
cellpadding
"0"
onload
"alert('Hi!')"
< tr
< td align
"center" onmouseover
"alert('Oops…')"
<
a href
"#" onclick
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html

<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
< script src
"https://rawgit.com/…/legitscript.js"
</ script
< script
var x
document . createElement ( 'script' );
x. src
'https://rawgit.com/…/dontfilterme.js' ;
var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
< table border
"0"
cellpadding
"0"
onload
"alert('Hi!')"
< tr
< td align
"center" onmouseover
"alert('Oops…')"
<
a href
"#" onclick
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html

<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
< script src
"https://rawgit.com/…/legitscript.js"
</ script
< script
var x
document . createElement ( 'script' );
x. src
'https://rawgit.com/…/dontfilterme.js' ;
var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
< table border
"0"
cellpadding
"0"
onload
"alert('Hi!')"
< tr
< td align
"center" onmouseover
"alert('Oops…')"
<
a href
"#" onclick
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html

<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
< script src
"https://rawgit.com/…/legitscript.js"
</ script
< script
var x
document . createElement ( 'script' );
x. src
'https://rawgit.com/…/dontfilterme.js' ;
var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
< table border
"0"
cellpadding
"0"
onload
"alert('Hi!')"
< tr
< td align
"center" onmouseover
"alert('Oops…')"
<
a href
"#" onclick
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html

<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
< script src
"https://rawgit.com/…/legitscript.js"
</ script
< script
var x
document . createElement ( 'script' );
x. src
'https://rawgit.com/…/dontfilterme.js' ;
var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
< table border
"0"
cellpadding
"0"
onload
"alert('Hi!')"
< tr
< td align
"center" onmouseover
"alert('Oops…')"
<
a href
"#" onclick
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html

<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
< script src
"https://rawgit.com/…/legitscript.js"
</ script
< script
var x
document . createElement ( 'script' );
x. src
'https://rawgit.com/…/dontfilterme.js' ;
var s = document . getElementsByTagName ( 'script' )[ 0 ];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
< table border
"0"
cellpadding
"0"
< tr
< td align
"center"
<
a href
"#"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html

< td
style
"background:green;"
Gmail
</ t

< td
style
"background:green;"
Gmail
</ t

CSS HTML .step4
{
background : grey !important ; } < td
style
"background:green;" class
"step4"
Gmail
</ t

CSS HTML .step3
{
background : grey !important ; } < td
style
"background:green;" class
"step3"
Outlook.com
</ t

CSS HTML .OutlookCell
{
background : green !important ; } < td
class
"OutlookCell"
</ td

CSS HTML .ecxOutlookCell
{
background : green !important ; } < td
class
"ecxOutlookCell"
</ td

CSS HTML .ecxOutlookCell
{
background : green !important ; } < td
class
"OutlookCell"
</ td

CSS HTML .NewOutlookCell
{
background : green !important ; } < td
class
"NewOutlookCell"
</ td

CSS HTML .x_NewOutlookCell
{
background : green !important ; } < td
class
"x_NewOutlookCell"
</ td

CSS HTML [ owa ]
.NewOutlookCell
{
background : green !important ; } < td
class
"NewOutlookCell"
</ td

CSS HTML .x_NewOutlookCell
{
background : green !important ; } < td
class
"x_NewOutlookCell"
</ td

CSS HTML @media yahoo {
.YahooCell
{
background : green !important ; } } < td
class
"YahooCell"
</ td

CSS HTML @media {
.yiv6296153149YahooCell
{
background : green !important ; } } < td
class
"yiv6296153149YahooCell"
</ td

CSS HTML .GmailCell
{
background : green !important ; } < td
class
"GmailCell"
</ td

CSS HTML div .m152c2c4a69cb7d40 .GmailCell
{
background : green !important ; } < td
</ td

CSS HTML < td
class
"GmailCell" lang
"GmailCell"
</ td
.GmailCell ,
* [ lang
"GmailCell" ]
{
background : green !important ; }

CSS HTML div .m152c2c4a69cb7d40 .GmailCell ,   div .m152c2c4a69cb7d40 * [ lang
"GmailCell" ]
{
background : green !important ; } < td
lang
"GmailCell"
</ td

CSS HTML < td
class
"AOLCell"
</ td
.AOLCell
{
background : green !important ;
background : white url ( '#' ) !important ;
background : white !important ; }

CSS HTML < td
class
"AOLCell"
</ td
.aolReplacedBody .AOLCell
{
background : green !important ;
background : white url ( '#' ) !important ;
background : white !important ; }

Rémi Parmentier
@hteumeuleu

1 / 195

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.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Thinking Outside the <table> at TED16

Full transcript of the talk.

Buzz and feedback

Here’s what was said about this presentation on social media.

Absolutely cannot wait for this... @HTeuMeuLeu #LitmusLive
— Matthew Slaymaker (@mattslaymaker) July 27, 2016
.@HTeuMeuLeu's mind-blowing Super Mail Forward can be found here https://t.co/JCgsp1a9e8 - contest: https://t.co/86JqsrKh5C #LitmusLive
— Kevin Mandeville (@KevinMandeville) July 27, 2016
Getting my thinking cap on now with @HTeuMeuLeu 🙌#LitmusLive
— Mike Ragan (@Mike_Ragan) July 27, 2016
Thinking outside the <table> with @HTeuMeuLeu #LitmusLive pic.twitter.com/lkPyk6Eqcm
— Jaina Mistry (@jainamistry) July 27, 2016
So great getting to hear from @HTeuMeuLeu #LitmusLive. Always giving, alwayd experimenting, always pushing boundaries.
— Kristian Robinson (@joon82) July 27, 2016
MAD to see how important security is in webmail. Great insight, thank you. @HTeuMeuLeu #LitmusLive
— Jonny_P (@JonnyPryer) July 27, 2016
@HTeuMeuLeu my new man crush #LitmusLive
— DavidW (@Mr_DW_Brighton) July 27, 2016
Awesome stuff from @HTeuMeuLeu at #LitmusLive
— Robin Stroobants✌️ (@stroobants) July 27, 2016
Mind. Blown. @HTeuMeuLeu is *the* coder to follow in email right now. Amazing. #LitmusLive
— Matthew Slaymaker (@mattslaymaker) July 27, 2016
My brain hurts @HTeuMeuLeu #LitmusLive
— Richard Chapman (@chapmanio) July 27, 2016
.@HTeuMeuLeu Has officially blown my mind #LitmusLive pic.twitter.com/Gn3CVoygCd
— Jonny_P (@JonnyPryer) July 27, 2016
Blown away by @HTeuMeuLeu. So inspiring. Don't see something that can't be done, see a challenge to fix #LitmusLive pic.twitter.com/PSZHpA2g4R
— Claire (@CSifah) July 27, 2016
Great talk @HTeuMeuLeu at #litmuslive showing how constraints drive creativity. great work with gmail app.
— Paul Dyke (@pauldyke) July 27, 2016
is on another planet. Inspiring stuff.
— Richard Chapman (@chapmanio) July 27, 2016
"Constraints drive creativity." Stop complaining and and embrace the challenge. Absolutely loved @HTeuMeuLeu's talk at #LitmusLive
— Bettina Specht (@BettinaSpecht) July 27, 2016
Constraints drive creativity. @HTeuMeuLeu #LitmusLive pic.twitter.com/5x90gGCT1n
— Aaron Simmonds (@otherside_uk) July 27, 2016
really enjoyed your talk today. You've inspired me to learn and adopt the Fab Four technique - Thank you.
— Gavin Hughes (@twodotscreative) July 27, 2016