A presentation at The Email Design Conference in 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
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
< style
"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
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
< style
"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
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
< style
"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
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
< style
"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
"aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
</ div
< style
"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
"aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
</ div
< style
"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
"aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
</ div
< style
"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
"aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
</ div
< style
"step1" ],
.aolReplacedBody .step2 ,
.aolReplacedBody .step4 {
background : grey !important ; }
@media yahoo
{
.aolReplacedBody .step2 {
background : green !important ; } }
.aolReplacedBody .step1 {
background : grey url ( "<a href="spacer.gif"" target=_blank>spacer.gif</a>; ) !important ;
background : grey !important ; } </ style
CSS HTML
"aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
</ div
< style
"step1" ],
.aolReplacedBody .step2 ,
.aolReplacedBody .step4 {
background : grey !important ; }
@media yahoo
{
.aolReplacedBody .step2 {
background : green !important ; } } </ style
CSS HTML
Yahoo
"aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"step2"
Yahoo</ td
< td
"step3"
Outlook.com</ td
< td
"step4"
Gmail</ td
</ tr
</ table
</ div
< style
"step1" ],
.aolReplacedBody .step2 ,
.aolReplacedBody .step4 {
background : grey !important ; }
@media yahoo
{
.aolReplacedBody .step2 {
background : green !important ; } } </ style
CSS HTML
"yiv113aolReplacedBody"
< table
< tr
< td
"step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"yiv113step4"
Gmail</ td
</ tr
</ table
</ div
< style
"step1" ],
.yiv113aolReplacedBody .yiv113step2 ,
.yiv113aolReplacedBody .yiv113step4 {
background : grey !important ; }
@media yahoo
{
.yiv113aolReplacedBody .yiv113step2 {
background : green !important ; } } </ style
CSS HTML
"yiv113aolReplacedBody"
"yui_123456789"
< table
< tr
< td
"step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"yiv113step4"
Gmail</ td
</ tr
</ table
</ div
< style
"step1" ],
#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,
#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {
background : grey !important ; }
@media yahoo
{
#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {
background : green !important ; } } </ style
CSS HTML
"yiv113aolReplacedBody"
"yui_123456789"
< table
< tr
< td
"step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"yiv113step4"
Gmail</ td
</ tr
</ table
</ div
< style
"step1" ],
#yui_123456789 .yiv113aolReplacedBody .yiv113step2 ,
#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {
background : grey !important ; }
@media yahoo
{
#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {
background : green !important ; } } </ style
CSS HTML
"yui_123456789"
< table
< tr
< td
"yiv113step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"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
"yiv113aolReplacedBody"
"yui_123456789"
< table
< tr
< td
"yiv113step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"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
"yiv113aolReplacedBody"
"yui_123456789"
< table
< tr
< td
"yiv113step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"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
"yiv113aolReplacedBody"
"yui_123456789"
< table
< tr
< td
"yiv113step1"
AOL</ td
< td
"yiv113step2"
Yahoo</ td
< td
"yiv113step3"
Outlook.com</ td
< td
"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
"ecxyiv113aolReplacedBody"
"ecxyui_123456789"
< table
< tr
< td
"ecxyiv113step1"
AOL</ td
< td
"ecxyiv113step2"
Yahoo</ td
< td
"ecxyiv113step3"
Outlook.com</ td
< td
"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
"ecxyiv113aolReplacedBody"
"ecxyui_123456789"
< table
< tr
< td
"ecxyiv113step1"
AOL</ td
< td
"ecxyiv113step2"
Yahoo</ td
< td
"ecxyiv113step3"
Outlook.com</ td
< td
"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
"ecxyiv113aolReplacedBody"
"ecxyui_123456789"
< table
< tr
< td
"ecxyiv113step1"
AOL</ td
< td
"ecxyiv113step2"
Yahoo</ td
< td
"ecxyiv113step3"
Outlook.com</ td
< td
"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
"ecxyiv113aolReplacedBody"
"ecxyui_123456789"
< table
< tr
< td
"ecxyiv113step1"
AOL</ td
< td
"ecxyiv113step2"
Yahoo</ td
< td
"ecxyiv113step3"
Outlook.com</ td
< td
"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
"ecxyiv113aolReplacedBody"
"ecxyui_123456789"
< table
< tr
< td
"ecxyiv113step1"
AOL</ td
< td
"ecxyiv113step2"
Yahoo</ td
< td
"ecxyiv113step3"
Outlook.com</ td
< td
"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
"ecxyiv113aolReplacedBody"
"ecxyui_123456789"
< table
< tr
< td
"ecxyiv113step1"
AOL</ td
< td
"ecxyiv113step2"
Yahoo</ td
< td
"ecxyiv113step3"
Outlook.com</ td
< td
"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
"background:green;"
AOL</ td
< td
"background:green;"
Yahoo</ td
< td
"background:green;"
Outlook.com</ td
< td
"background:green;"
Gmail</ td
</ tr
</ table
</ div
CSS HTML
AOL fixed their bug. The good news is…
Webmail security Part II
< a
"position:fixed; left:0; right:0; top:0; bottom:0;"
"http://example.com"
…
</ a
< div
"overflow:hidden;"
…
</ div
< div
"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
"foo"
</ div
< style
@keyframes bar {}
.foo { animation : bar ; } </ style
< div
"foo"
"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 mobileThere 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
.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 {
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
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
100 % ) * 480 ) ; Below breakpoint width Above breakpoint width Breakpoint
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
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
100 % ) * 480 ) ;
100 % ) * 480 ) ;
Support Apple Mail Gmail Outlook.com (2015) Thunderbird Orange AOL
Support for Outlook.com (2015 version)
100 % ) * 480 ) ;
100 % * 480 ) ;
Support for older WebKit Safari 6 and less Android 4 and less
100 % * 480 ) ;
100 % * 480 ) ;
100 % * 480 ) ;
Graceful degradation without calc()
display : inline-block ; min -width : 120 px ; width : 25 % ;
100 % * 480 ) ;
100 % * 480 ) ; display : inline-block ; min -width : 120 px ; width : 25 % ;
100 % * 480 ) ;
100 % * 480 ) ; display : inline-block ; min -width : 120 px ; width : 25 % ;
Support for Outlook.com (2016 version)
< div
100 % * 480 ); "
… </ div
< div
style =""
… </ div
100 % * 480 ) ;
48000 % ) ;
< div
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
"https://rawgit.com/…/legitscript.js"
</ script
< script
'https://rawgit.com/…/dontfilterme.js' ;
var
s =
document
.
getElementsByTagName
(
'script'
)[
0
];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
"0"
"0"
"alert('Hi!')"
< tr
"alert('Oops…')"
<
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html
<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
"https://rawgit.com/…/legitscript.js"
</ script
< script
'https://rawgit.com/…/dontfilterme.js' ;
var
s =
document
.
getElementsByTagName
(
'script'
)[
0
];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
"0"
"0"
"alert('Hi!')"
< tr
"alert('Oops…')"
<
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html
<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
"https://rawgit.com/…/legitscript.js"
</ script
< script
'https://rawgit.com/…/dontfilterme.js' ;
var
s =
document
.
getElementsByTagName
(
'script'
)[
0
];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
"0"
"0"
"alert('Hi!')"
< tr
"alert('Oops…')"
<
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html
<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
"https://rawgit.com/…/legitscript.js"
</ script
< script
'https://rawgit.com/…/dontfilterme.js' ;
var
s =
document
.
getElementsByTagName
(
'script'
)[
0
];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
"0"
"0"
"alert('Hi!')"
< tr
"alert('Oops…')"
<
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html
<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
"https://rawgit.com/…/legitscript.js"
</ script
< script
'https://rawgit.com/…/dontfilterme.js' ;
var
s =
document
.
getElementsByTagName
(
'script'
)[
0
];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
"0"
"0"
"alert('Hi!')"
< tr
"alert('Oops…')"
<
"alert('Sorry')"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html
<!doctype html> < html
< head
< title
Super dangerous e ‑ mail</ title
"https://rawgit.com/…/legitscript.js"
</ script
< script
'https://rawgit.com/…/dontfilterme.js' ;
var
s =
document
.
getElementsByTagName
(
'script'
)[
0
];
s.parentNode.insertBefore(x, s);
</ script
</ head
< body
"0"
"0"
< tr
"center"
<
"#"
Legit link</ a
</ td
</ tr
</ table
</ body
</ html
< td
"background:green;"
Gmail
</ t
< td
"background:green;"
Gmail
</ t
CSS HTML .step4
{
background : grey !important ; } < td
"step4"
Gmail
</ t
CSS HTML .step3
{
background : grey !important ; } < td
"step3"
Outlook.com
</ t
CSS HTML .OutlookCell
{
background : green !important ; } < td
"OutlookCell"
</ td
CSS HTML .ecxOutlookCell
{
background : green !important ; } < td
"ecxOutlookCell"
</ td
CSS HTML .ecxOutlookCell
{
background : green !important ; } < td
"OutlookCell"
</ td
CSS HTML .NewOutlookCell
{
background : green !important ; } < td
"NewOutlookCell"
</ td
CSS HTML .x_NewOutlookCell
{
background : green !important ; } < td
"x_NewOutlookCell"
</ td
CSS HTML [ owa ]
.NewOutlookCell
{
background : green !important ; } < td
"NewOutlookCell"
</ td
CSS HTML .x_NewOutlookCell
{
background : green !important ; } < td
"x_NewOutlookCell"
</ td
CSS HTML @media yahoo {
.YahooCell
{
background : green !important ; } } < td
"YahooCell"
</ td
CSS HTML @media {
.yiv6296153149YahooCell
{
background : green !important ; } } < td
"yiv6296153149YahooCell"
</ td
CSS HTML .GmailCell
{
background : green !important ; } < td
"GmailCell"
</ td
CSS HTML div .m152c2c4a69cb7d40 .GmailCell
{
background : green !important ; } < td
</ td
CSS HTML < td
"GmailCell"
</ td
"GmailCell" ]
{
background : green !important ; }
"GmailCell" ]
{
background : green !important ; } < td
"GmailCell"
</ td
CSS HTML < td
"AOLCell"
</ td
.AOLCell
{
background : green !important ;
background : white url ( '#' ) !important ;
background : white !important ; }
CSS HTML < td
"AOLCell"
</ td
.aolReplacedBody .AOLCell
{
background : green !important ;
background : white url ( '#' ) !important ;
background : white !important ; }
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.
The following resources were mentioned during the presentation or are useful additional information.
Full transcript of the talk.
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