Thinking Outside the <table>

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

Slide 1

Slide 1

Litmus Conf London, 2016/07/27

Slide 2

Slide 2

Rémi Parmentier @HTeuMeuLeu

Slide 3

Slide 3

THINKING

Slide 4

Slide 4

THINKING OUTSIDE THE

<TABLE>

Slide 5

Slide 5

Super Mail Forward Part I

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

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

Slide 9

Slide 9

Slide 10

Slide 10

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

Slide 11

Slide 11

.cell {

color : white ;

background : green

url ( image.jpg ); }

Slide 12

Slide 12

.cell {

color : white ; }

Slide 13

Slide 13

AOL Yahoo Outlook.com Gmail

Slide 14

Slide 14

AOL Yahoo Outlook.com Gmail AOL

Slide 15

Slide 15

Slide 16

Slide 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

Slide 17

Slide 17

< 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

Slide 18

Slide 18

< 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

Slide 19

Slide 19

< 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

Slide 20

Slide 20

AOL

Slide 21

Slide 21

Slide 22

Slide 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 ; } }

.aolReplacedBody .step1 {

background : grey url ( 'spacer.gif' ) !important ;

background : grey !important ; } </ style

CSS HTML

Slide 23

Slide 23

< 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

Slide 24

Slide 24

< 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

Slide 25

Slide 25

< 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

Slide 26

Slide 26

< 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

Slide 27

Slide 27

Yahoo

Slide 28

Slide 28

Slide 29

Slide 29

< 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

Slide 30

Slide 30

< 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

Slide 31

Slide 31

< 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

Slide 32

Slide 32

< 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

Slide 33

Slide 33

< 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

Slide 34

Slide 34

< 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

Slide 35

Slide 35

< 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

Slide 36

Slide 36

Outlook.com

Slide 37

Slide 37

Slide 38

Slide 38

< 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

Slide 39

Slide 39

< 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

Slide 40

Slide 40

< 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

Slide 41

Slide 41

< 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

Slide 42

Slide 42

< 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

Slide 43

Slide 43

< 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

Slide 44

Slide 44

Gmail

Slide 45

Slide 45

Slide 46

Slide 46

< 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

Slide 47

Slide 47

< 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

Slide 48

Slide 48

Slide 49

Slide 49

Slide 50

Slide 50

Slide 51

Slide 51

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

Slide 64

Slide 64

Slide 65

Slide 65

AOL fixed their bug. The good news is…

Slide 66

Slide 66

Slide 67

Slide 67

Slide 68

Slide 68

Webmail security Part II

Slide 69

Slide 69

< a

style

"position:fixed; left:0; right:0; top:0; bottom:0;"

href

"http://example.com"

…

</ a

Slide 70

Slide 70

< div

style

"overflow:hidden;"

…

</ div

Slide 71

Slide 71

< div

style

"java-script:hidden;"

…

</ div

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

Why java-script ?

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

Slide 78

Slide 78

Slide 79

Slide 79

onload ✖

Slide 80

Slide 80

onanimationend

Slide 81

Slide 81

< style

@keyframes bar {} </ style

Slide 82

Slide 82

< style

@keyframes bar {}

.foo { animation : bar ; } </ style

Slide 83

Slide 83

< style

@keyframes bar {}

.foo { animation : bar ; } </ style

< div

class

"foo"

</ div

Slide 84

Slide 84

< style

@keyframes bar {}

.foo { animation : bar ; } </ style

< div

class

"foo"

onanimationend

"alert('Hi !');"

</ div

Slide 85

Slide 85

Slide 86

Slide 86

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

Slide 87

Slide 87

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

Slide 88

Slide 88

Slide 89

Slide 89

No class , no id

Slide 90

Slide 90

No class , no id No

<style> on mobile No media queries on mobile

Slide 91

Slide 91

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

Slide 92

Slide 92

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

Slide 93

Slide 93

It's hard to code responsive emails.

Slide 94

Slide 94

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

Slide 95

Slide 95

Slide 96

Slide 96

Slide 97

Slide 97

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

Slide 98

Slide 98

FLEXBOX

Slide 99

Slide 99

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

Slide 100

Slide 100

.grid {

display : flex ;

flex-wrap : wrap ;

flex-direction : row ; }

.grid

{

flex : 1 1

auto ; }

Slide 101

Slide 101

.grid {

display : flex ; }

Slide 102

Slide 102

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

Slide 103

Slide 103

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

Slide 104

Slide 104

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

Slide 105

Slide 105

Three ideas that put me on track

Slide 106

Slide 106

Three ideas

  1. Gmail CSS support

Slide 107

Slide 107

.hero {

background : url ( image.jpg )

0 0 ;

background-size : cover ; }

Slide 108

Slide 108

.hero {

background : url ( image.jpg )

0 0

/ cover ; }

Slide 109

Slide 109

.hero {

background :radial-gradient( circle at 30 %

107 % , #fdf497

0 % , #fdf497

5 % , #fd5949

45 % , #d6249f

60 % , #285aeb

90 % ); }

Slide 110

Slide 110

Source : http://emailweekly.co/

Slide 111

Slide 111

.main {

width : calc( 100 %

200 px ); }

Slide 112

Slide 112

200px calc(100% - 200px)

Slide 113

Slide 113

200px calc(100% - 200px)

Slide 114

Slide 114

200px calc(100% - 200px)

Slide 115

Slide 115

Three ideas 2. Responsive typography

Slide 116

Slide 116

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

Slide 117

Slide 117

font-size : calc( 12 px

  • ( 24

12 ) * ( ( 100 vw

400 px ) / ( 800

400 ) ));

Slide 118

Slide 118

Three ideas 3. « Size matters »

Slide 119

Slide 119

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

Slide 120

Slide 120

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

Slide 121

Slide 121

min-width :

; width :

; max-width :

; 160 px 320 px 480 px

Slide 122

Slide 122

320 px min-width :

; width :

; max-width :

; 160 px 480 px

Slide 123

Slide 123

480 px min-width :

; width :

; max-width :

; 320 px 160 px

Slide 124

Slide 124

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

Slide 125

Slide 125

Slide 126

Slide 126

Bingo !

Slide 127

Slide 127

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

Slide 128

Slide 128

The Fab Four Technique Part III

Slide 129

Slide 129

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

Slide 130

Slide 130

Slide 131

Slide 131

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

Slide 132

Slide 132

The Fab Four Technique

Slide 133

Slide 133

Slide 134

Slide 134

Above 480px

Slide 135

Slide 135

480px

Slide 136

Slide 136

480px

Slide 137

Slide 137

Below 480px

Slide 138

Slide 138

Below 480px

Slide 139

Slide 139

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

100 % ) * 480 ) ; Below breakpoint width Above breakpoint width Breakpoint

Slide 140

Slide 140

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

100 % ) * 480 ) ; with a 500px parent 500 px 125 px 500 px

Slide 141

Slide 141

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

Slide 142

Slide 142

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

Slide 143

Slide 143

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

100 % ) * 480 ) ; with a 400px parent 400 px 100 px 400 px

Slide 144

Slide 144

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

Slide 145

Slide 145

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

Slide 146

Slide 146

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

100 % ) * 480 ) ;

Slide 147

Slide 147

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

100 % ) * 480 ) ;

Slide 148

Slide 148

Slide 149

Slide 149

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

Slide 150

Slide 150

Support for Outlook.com (2015 version)

Slide 151

Slide 151

Slide 152

Slide 152

width :calc(( 480 px

100 % ) * 480 ) ;

Slide 153

Slide 153

width :calc( 480 px * 480

100 % * 480 ) ;

Slide 154

Slide 154

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

Slide 155

Slide 155

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

100 % * 480 ) ;

Slide 156

Slide 156

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

100 % * 480 ) ;

width :calc( 480 px * 480

100 % * 480 ) ;

Slide 157

Slide 157

Graceful degradation 
 without calc()

Slide 158

Slide 158

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

Slide 159

Slide 159

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 % ;

Slide 160

Slide 160

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 % ;

Slide 161

Slide 161

Support for Outlook.com (2016 version)

Slide 162

Slide 162

Slide 163

Slide 163

< 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

Slide 164

Slide 164

< div

style =""

… </ div

Slide 165

Slide 165

width :calc( 480 px * 480

100 % * 480 ) ;

Slide 166

Slide 166

width :calc( 230400 px

48000 % ) ;

Slide 167

Slide 167

< 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

Slide 168

Slide 168

< div

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

… </ div

Slide 169

Slide 169

Constraints
drive creativity.

Slide 170

Slide 170

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

Slide 171

Slide 171

<!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

Slide 172

Slide 172

<!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

Slide 173

Slide 173

<!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

Slide 174

Slide 174

<!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

Slide 175

Slide 175

<!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

Slide 176

Slide 176

<!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

Slide 177

Slide 177

< td

style

"background:green;"

Gmail

</ t

Slide 178

Slide 178

< td

style

"background:green;"

Gmail

</ t

Slide 179

Slide 179

CSS HTML .step4

{

background : grey !important ; } < td

style

"background:green;" class

"step4"

Gmail

</ t

Slide 180

Slide 180

CSS HTML .step3

{

background : grey !important ; } < td

style

"background:green;" class

"step3"

Outlook.com

</ t

Slide 181

Slide 181

CSS HTML .OutlookCell

{

background : green !important ; } < td

class

"OutlookCell"

</ td

Slide 182

Slide 182

CSS HTML .ecxOutlookCell

{

background : green !important ; } < td

class

"ecxOutlookCell"

</ td

Slide 183

Slide 183

CSS HTML .ecxOutlookCell

{

background : green !important ; } < td

class

"OutlookCell"

</ td

Slide 184

Slide 184

CSS HTML .NewOutlookCell

{

background : green !important ; } < td

class

"NewOutlookCell"

</ td

Slide 185

Slide 185

CSS HTML .x_NewOutlookCell

{

background : green !important ; } < td

class

"x_NewOutlookCell"

</ td

Slide 186

Slide 186

CSS HTML [ owa ]

.NewOutlookCell

{

background : green !important ; } < td

class

"NewOutlookCell"

</ td

Slide 187

Slide 187

CSS HTML .x_NewOutlookCell

{

background : green !important ; } < td

class

"x_NewOutlookCell"

</ td

Slide 188

Slide 188

CSS HTML @media yahoo {

.YahooCell

{

background : green !important ; } } < td

class

"YahooCell"

</ td

Slide 189

Slide 189

CSS HTML @media {

.yiv6296153149YahooCell

{

background : green !important ; } } < td

class

"yiv6296153149YahooCell"

</ td

Slide 190

Slide 190

CSS HTML .GmailCell

{

background : green !important ; } < td

class

"GmailCell"

</ td

Slide 191

Slide 191

CSS HTML div .m152c2c4a69cb7d40 .GmailCell

{

background : green !important ; } < td

</ td

Slide 192

Slide 192

CSS HTML < td

class

"GmailCell" lang

"GmailCell"

</ td

.GmailCell ,
* [ lang

"GmailCell" ]

{

background : green !important ; }

Slide 193

Slide 193

CSS HTML div .m152c2c4a69cb7d40 .GmailCell , 
 div .m152c2c4a69cb7d40 * [ lang

"GmailCell" ]

{

background : green !important ; } < td

lang

"GmailCell"

</ td

Slide 194

Slide 194

CSS HTML < td

class

"AOLCell"

</ td

.AOLCell

{

background : green !important ;

background : white url ( '#' ) !important ;

background : white !important ; }

Slide 195

Slide 195

CSS HTML < td

class

"AOLCell"

</ td

.aolReplacedBody .AOLCell

{

background : green !important ;

background : white url ( '#' ) !important ;

background : white !important ; }