Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Thinking Outside the table

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

HTeuMeuLeu

July 27, 2016
Tweet

More Decks by HTeuMeuLeu

Other Decks in Programming

Transcript

  1. Litmus Conf
    London, 2016/07/27

    View full-size slide

  2. Rémi Parmentier
    @HTeuMeuLeu

    View full-size slide

  3. THINKING
    OUTSIDE
    THE

    View full-size slide

  4. Super Mail Forward
    Part I

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. .cell {
    color: white;
    }

    View full-size slide

  9. AOL Yahoo Outlook.com Gmail

    View full-size slide

  10. AOL Yahoo Outlook.com Gmail
    AOL

    View full-size slide

  11. !


    AOL
    Yahoo
    Outlook.com
    Gmail


    <br/>* [aria-labelledby="step1"],<br/>.step2,<br/>.step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide

  12. !


    AOL
    Yahoo
    Outlook.com
    Gmail


    <br/>* [aria-labelledby="step1"],<br/>.step2,<br/>.step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide

  13. !


    AOL
    Yahoo
    Outlook.com
    Gmail


    <br/>* [aria-labelledby="step1"],<br/>.step2,<br/>.step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide




  14. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide




  15. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide




  16. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url('spacer.gif')!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide




  17. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>!<br/>.aolReplacedBody .step1 {<br/>background:grey url(&quot;<a href="spacer.gif&quot" target=_blank>spacer.gif</a>;)!important;<br/>background:grey!important;<br/>}<br/>
    CSS
    HTML

    View full-size slide




  18. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.aolReplacedBody * [aria-labelledby="step1"],<br/>.aolReplacedBody .step2,<br/>.aolReplacedBody .step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.aolReplacedBody .step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  19. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.yiv113aolReplacedBody * [aria-labelledby="step1"],<br/>.yiv113aolReplacedBody .yiv113step2,<br/>.yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>.yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  20. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"],<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  21. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"],<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  22. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * .filtered99999,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  23. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * .filtered99999,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media yahoo {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  24. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>#yui_123456789 .yiv113aolReplacedBody * .filtered99999,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2,<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>#yui_123456789 .yiv113aolReplacedBody .yiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  25. AOL
    Yahoo
    Outlook.comGmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  26. AOL
    Yahoo
    Outlook.comGmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  27. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  28. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  29. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  30. AOL
    Yahoo
    Outlook.com
    Gmail



    <br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2,<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 {<br/>background:grey!important;<br/>}<br/>!<br/>@media {<br/>.ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 {<br/>background:green!important;<br/>}<br/>}<br/>
    CSS
    HTML

    View full-size slide




  31. AOL
    Yahoo
    Outlook.com
    Gmail



    CSS
    HTML

    View full-size slide

  32. AOL fixed their bug.
    The good news is…

    View full-size slide

  33. Webmail security
    Part II

    View full-size slide

  34. href="http://example.com">


    View full-size slide

  35. Why java-script ?

    View full-size slide

  36. onanimationend

    View full-size slide

  37. <br/>@keyframes bar {}<br/>

    View full-size slide

  38. <br/>@keyframes bar {}<br/>.foo { animation:bar; }<br/>

    View full-size slide

  39. <br/>@keyframes bar {}<br/>.foo { animation:bar; }<br/>

    View full-size slide

  40. <br/>@keyframes bar {}<br/>.foo { animation:bar; }<br/>

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. No class, no id
    No on mobile<br/>No media queries on mobile<br/>

    View full-size slide

  44. There are two hard things in
    Computer Science:

    cache invalidation 

    and naming things.

    — Phil Karlton

    View full-size slide

  45. There are three hard things in
    Computer Science:

    cache invalidation 

    and naming things
    and responsive emails.


    View full-size slide

  46. It's hard
    to code responsive emails.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. F L E X B O X

    View full-size slide

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

    View full-size slide

  51. .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    }
    !
    .grid > * {
    flex: 1 1 auto;
    }

    View full-size slide

  52. .grid {
    display: flex;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. Three ideas
    that put me on track

    View full-size slide

  57. Three ideas
    1. Gmail CSS support

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Source : http://emailweekly.co/

    View full-size slide

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

    View full-size slide

  63. 200px calc(100% - 200px)

    View full-size slide

  64. 200px calc(100% - 200px)

    View full-size slide

  65. Three ideas
    2. Responsive typography

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Three ideas
    3. « Size matters »

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. width,!
    min-width,!
    max-width,!
    & calc()

    View full-size slide

  76. The Fab Four Technique
    Part III

    View full-size slide

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

    View full-size slide

  78. There are three hard things in
    Computer Science:

    cache invalidation 

    and naming things
    and responsive emails.


    View full-size slide

  79. The Fab Four Technique

    View full-size slide

  80. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);
    Below breakpoint width
    Above breakpoint width
    Breakpoint

    View full-size slide

  81. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);
    with a 500px parent
    500px
    125px
    500px

    View full-size slide

  82. max$width:/
    min$width:/
    width:
    with a 500px parent
    500px
    125px
    $9600px

    View full-size slide

  83. max$width:/
    min$width:/
    width:
    avec un parent à 500px
    500px
    $9600px
    125px

    View full-size slide

  84. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);
    with a 400px parent
    400px
    100px
    400px

    View full-size slide

  85. max$width:100%;/
    min$width:25%;/
    width:calc(
    with a 400px parent
    400px
    100px
    38400px

    View full-size slide

  86. max$width:100%;/
    min$width:25%;/
    width:calc(
    avec un parent à 400px
    200px
    38400px
    400px

    View full-size slide

  87. max$width:100%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);

    View full-size slide

  88. max$width:50%;/
    min$width:25%;/
    width:calc((480px/$/100%)/*/480);

    View full-size slide

  89. Support
    Apple Mail
    Gmail Outlook.com

    (2015)
    Thunderbird Orange AOL

    View full-size slide

  90. Support for
    Outlook.com
    (2015 version

    View full-size slide

  91. width:calc((480px/$/100%)/*/480);

    View full-size slide

  92. width:calc(480px/*/480/$/100%/*/480);

    View full-size slide

  93. Support for 

    older WebKit
    Safari 6 and less
    Android 4 and less

    View full-size slide

  94. max$width:100%;/
    min$width:25%;/
    width:calc(480px/*/480/$/100%/*/480);

    View full-size slide

  95. max$width:100%;/
    min$width:25%;/
    width:$webkit$calc(480px/*/480/$/100%/*/480);/
    width:calc(480px/*/480/$/100%/*/480);

    View full-size slide

  96. Graceful degradation

    without calc()

    View full-size slide

  97. display:inline$block;/
    min$width:120px;/
    width:25%;

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  100. Support for
    Outlook.com
    (2016 version

    View full-size slide

  101. 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);">/
    / …/

    View full-size slide

  102. width:calc(480px/*/480/$/100%/*/480);

    View full-size slide

  103. width:calc(230400px/$/48000%);

    View full-size slide

  104. 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%);">/
    / …/

    View full-size slide

  105. min$width:120px;/
    width:25%;/
    max$width:100%;">/
    / …/

    View full-size slide

  106. Constraints
    drive creativity.

    View full-size slide

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

    View full-size slide