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

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

July 27, 2016
Tweet

Transcript

  1. 5.
  2. 6.
  3. 8.
  4. 14.

    ! <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey

    url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> <style> * [aria-labelledby="step1"], .step2, .step4 { background:grey!important; } ! @media yahoo { .step2 { background:green!important; } } ! .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
  5. 15.

    ! <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green; background:grey

    url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> <style> * [aria-labelledby="step1"], .step2, .step4 { background:grey!important; } ! @media yahoo { .step2 { background:green!important; } } ! .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
  6. 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
  7. 17.
  8. 18.

    <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
  9. 19.

    <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
  10. 20.

    <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url('spacer.gif')!important; background:grey!important; } </style> CSS HTML
  11. 21.

    <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } ! .aolReplacedBody .step1 { background:grey url(&quot;<a href="spacer.gif&quot" target=_blank>spacer.gif</a>;)!important; background:grey!important; } </style> CSS HTML
  12. 22.

    <div class="aolReplacedBody"> <table> <tr> <td style="background:green;" class="step1" aria-labelledby="step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="step4">Gmail</td> </tr> </table> </div> <style> .aolReplacedBody * [aria-labelledby="step1"], .aolReplacedBody .step2, .aolReplacedBody .step4 { background:grey!important; } ! @media yahoo { .aolReplacedBody .step2 { background:green!important; } } </style> CSS HTML
  13. 23.
  14. 24.

    <div class="yiv113aolReplacedBody"> <table> <tr> <td style="background:green;" class="yiv113step1" aria-labelledby="step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> .yiv113aolReplacedBody * [aria-labelledby="step1"], .yiv113aolReplacedBody .yiv113step2, .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
  15. 25.

    <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1" aria-labelledby="step1">AOL</td> <td

    style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"], #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
  16. 26.

    <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1" aria-labelledby="step1">AOL</td> <td

    style="background:green; background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * [aria-labelledby="step1"], #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
  17. 27.

    <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * .filtered99999, #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
  18. 28.

    <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * .filtered99999, #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media yahoo { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
  19. 29.

    <div class="yiv113aolReplacedBody" id="yui_123456789"> <table> <tr> <td style="background:green;" class="yiv113step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="yiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step3">Outlook.com</td> <td style="background:green; background:grey url(spacer.gif);" class="yiv113step4">Gmail</td> </tr> </table> </div> <style> #yui_123456789 .yiv113aolReplacedBody * .filtered99999, #yui_123456789 .yiv113aolReplacedBody .yiv113step2, #yui_123456789 .yiv113aolReplacedBody .yiv113step4 { background:grey!important; } ! @media { #yui_123456789 .yiv113aolReplacedBody .yiv113step2 { background:green!important; } } </style> CSS HTML
  20. 31.

    <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="ecxyiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step3">Outlook.com</td <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
  21. 32.

    <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;

    background:grey url(spacer.gif);" class="ecxyiv113step2">Yahoo</td> <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step3">Outlook.com</td <td style="background:green; background:grey url(spacer.gif);" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
  22. 33.

    <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;"

    class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
  23. 34.

    <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;"

    class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
  24. 35.

    <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;"

    class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
  25. 36.
  26. 37.

    <div class="ecxyiv113aolReplacedBody" id="ecxyui_123456789"> <table> <tr> <td style="background:green;" class="ecxyiv113step1">AOL</td> <td style="background:green;"

    class="ecxyiv113step2">Yahoo</td> <td style="background:green;" class="ecxyiv113step3">Outlook.com</td> <td style="background:green;" class="ecxyiv113step4">Gmail</td> </tr> </table> </div> <style> .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody * .ecxfiltered99999, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2, .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step4 { background:grey!important; } ! @media { .ExternalClass #ecxyui_123456789 .ecxyiv113aolReplacedBody .ecxyiv113step2 { background:green!important; } } </style> CSS HTML
  27. 39.
  28. 40.
  29. 41.
  30. 42.
  31. 43.
  32. 44.
  33. 45.
  34. 46.
  35. 47.
  36. 48.
  37. 49.
  38. 50.
  39. 51.
  40. 52.
  41. 53.
  42. 55.
  43. 56.
  44. 61.
  45. 62.
  46. 64.
  47. 65.
  48. 66.
  49. 67.
  50. 73.

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

    class="foo" onanimationend="alert('Hi !');"></div>
  51. 74.
  52. 77.
  53. 79.

    There are two hard things in Computer Science:
 cache invalidation

    
 and naming things. “ — Phil Karlton ”
  54. 80.

    There are three hard things in Computer Science:
 cache invalidation

    
 and naming things and responsive emails. “ ”
  55. 83.
  56. 84.
  57. 104.

    font-size: calc( 12px + (24 - 12) * ( (100vw

    - 400px) / ( 800 - 400) ));
  58. 112.
  59. 113.
  60. 117.
  61. 118.

    There are three hard things in Computer Science:
 cache invalidation

    
 and naming things and responsive emails. “ ”
  62. 131.
  63. 134.
  64. 145.