$30 off During Our Annual Pro Sale. View Details »

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. ! <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
  2. ! <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
  3. ! <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
  4. <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
  5. <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
  6. <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
  7. <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
  8. <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
  9. <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
  10. <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
  11. <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
  12. <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
  13. <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
  14. <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
  15. <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
  16. <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
  17. <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
  18. <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
  19. <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
  20. <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
  21. <style> @keyframes bar {} .foo { animation:bar; } </style> <div

    class="foo" onanimationend="alert('Hi !');"></div>
  22. There are two hard things in Computer Science:
 cache invalidation

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

    
 and naming things and responsive emails. “ ”
  24. font-size: calc( 12px + (24 - 12) * ( (100vw

    - 400px) / ( 800 - 400) ));
  25. There are three hard things in Computer Science:
 cache invalidation

    
 and naming things and responsive emails. “ ”