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

The Current State of Email Clients

HTeuMeuLeu
October 04, 2018

The Current State of Email Clients

From Gmail's and Outlook.com's redesigns to amp4email, here's everything that happened in the last year or so in the world of email clients. Discover the latest possibilities, but also quirks and bugs, and reflect on how we can all help email move forward.

HTeuMeuLeu

October 04, 2018
Tweet

More Decks by HTeuMeuLeu

Other Decks in Technology

Transcript

  1. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN
  2. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL
  3. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS
  4. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN
  5. .box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % .box%{% % %

    width:auto;% % }% ! % .box=title%{% % % font=size:1.25em;% % }% }
  6. .ExternalClass%.ecxbox%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % .ExternalClass%.ecxbox%{% % %

    width:auto;% % }% ! % .ExternalClass%.ecxbox=title%{% % % font=size:1.25em;% % }% }
  7. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN
  8. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN YAHOO RESPONSIVE SUPPORT
  9. .box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % .box%{% % %

    width:auto;% % }% ! % .box=title%{% % % font=size:1.25em;% % }% }
  10. #yiv6851014585%.yiv6851014585box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % #yiv6851014585%.yiv6851014585box%{% % %

    width:auto;% % }% ! % #yiv6851014585%.yiv6851014585box=title%{% % % font=size:1.25em;% % }% }
  11. #yiv6851014585%.yiv6851014585box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % #yiv6851014585%.yiv6851014585box%{% % %

    width:auto;% % }% ! % #yiv6851014585%.yiv6851014585box=title%{% % % font=size:1.25em;% % }% }
  12. .box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % *[class="box"]%{% % %

    width:auto;% % }% ! % *[class="box=title"]%{% % % font=size:1.25em;% % }% }
  13. <!DOCTYPE%html>% <html%lang="en">% %% <head>% % <style>% % % body%{%background:%#fff;%}% %

    % @media%only%screen%and%(max=width:600px)%{% % % % body%{%background:%#fff;%}% % % }% % </style>% </head>% <body>%% % …% </body>% </html>
  14. <!DOCTYPE%html>% <html%lang="en">% <head>% % <style>% % % body%{%background:%#fff;%}% % %

    @media%only%screen%and%(max=width:600px)%{% % % % body%{%background:%#fff;%}% % % }% % </style>% </head>% <body>%% % …% </body>% </html>
  15. <!DOCTYPE%html>% <html%lang="en">% <head></head>% <head>% % <style>% % % body%{%background:%#fff;%}% %

    % @media%only%screen%and%(max=width:600px)%{% % % % body%{%background:%#fff;%}% % % }% % </style>% </head>% <body>%% % …% </body>% </html>
  16. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN YAHOO RESPONSIVE SUPPORT
  17. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN YAHOO RESPONSIVE SUPPORT FAB FOUR ARTICLE
  18. There are two hard things in Computer Science: cache invalidation

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

    and naming things and responsive emails. “ ”
  20. .hero { background: radial-gradient( circle at 30% 107%, #fdf497 0%,

    #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); }
  21. font-size: calc( 12px + (24 - 12) * ( (100vw

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

    and naming things and responsive emails. “ ”
  23. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN YAHOO RESPONSIVE SUPPORT FAB FOUR ARTICLE
  24. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN YAHOO RESPONSIVE SUPPORT FAB FOUR ARTICLE GMAIL RESPONSIVE SUPPORT
  25. SO YOU
 USE GMAIL ON MOBILE ON DESKTOP ANDROID WEBMAIL

    WITH A GOOGLE APPS ACCOUNT WITH A PUBLIC ACCOUNT PAYING FOR FREE WITH A
 GMAIL
 ACCOUNT WITH A
 POP/IMAP
 ACCOUNT DEFAULT GMAILIFIED FOR WORK UNLIMITED FOR WORK LEVEL 1 LEVEL 2 LEVEL 3 BASIC CSS CALC() BACKGROUND MEDIA QUERIES <STYLE> iOS 2015 BEFORE RESPONSIVE SUPPORT
  26. SO YOU
 USE GMAIL ON MOBILE ON DESKTOP ANDROID WEBMAIL

    WITH A GOOGLE APPS ACCOUNT WITH A PUBLIC ACCOUNT PAYING FOR FREE WITH A
 GMAIL
 ACCOUNT WITH A
 POP/IMAP
 ACCOUNT DEFAULT GMAILIFIED G SUITE
 BUSINESS G SUITE
 BASIC LEVEL 1 LEVEL 2 LEVEL 3 BASIC CSS CALC() BACKGROUND MEDIA QUERIES <STYLE> iOS 2016 AFTER RESPONSIVE SUPPORT
  27. SO YOU
 USE GMAIL ON MOBILE ON DESKTOP ANDROID OR

    WEBMAIL WITH A G SUITE or public ACCOUNT WITH A
 GMAIL
 ACCOUNT WITH A
 POP/IMAP
 ACCOUNT DEFAULT GMAILIFIED LEVEL 1 LEVEL 2 LEVEL 3 BASIC CSS CALC() BACKGROUND MEDIA QUERIES <STYLE> iOS 2018
  28. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL MY FIRST TALK ABOUT EMAILS OUTLOOK.COM REDESIGN YAHOO RESPONSIVE SUPPORT FAB FOUR ARTICLE GMAIL RESPONSIVE SUPPORT
  29. CSS HTML p { background:red; } .green { background:green; }

    <p class="green"> Lorem ipsum dolor sit amet. </p> <img src="spacer.gif" alt="" style="display:block;" />
  30. CSS HTML div.m159215f7d36ee7fd p { background:red; } div.m159215f7d36ee7fd .m_3567455155959655244green {

    background:green; } <div class="m159215f7d36ee7fd"> <p class="m_3567455155959655244green"> Lorem ipsum dolor sit amet. </p> <img src="spacer.gif" alt="" style="display:block;" /> </div>
  31. CSS HTML div.m159215f7d36ee7fd p { background:red; } div.m159215f7d36ee7fd .m_3567455155959655244green {

    background:green; } <div class="m159215f7d36ee7fd"> <p class="m_3567455155959655244green"> Lorem ipsum dolor sit amet. </p> <img src="spacer.gif" alt="" style="display:block;" /> </div>
  32. CSS HTML div.m159215f7d36ee7fd p { background:red; } div.m159215f7d36ee7fd .m_3567455155959655244foo {

    background:green; } <div class="m159215f7d36ee7fd"> <p class="m_-8249599400804587256green"> Lorem ipsum dolor sit amet. </p> <img src="spacer.gif" alt="" style="display:block;" /> </div>
  33. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"TextBlock",% % % % "text":%"Hello%world!",% % % % "size":%"large",% % % % "weight":%"bolder"% % % }% % ]% }
  34. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"TextBlock",% % % % "text":%"Hello%world!",% % % % "size":%"large",% % % % "weight":%"bolder"% % % }% % ]% } <head>% % <meta%charset="utf=8">% % <script%type="application/adaptivecard+json"> ! % </script>% </head>% <body>%
  35. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"ColumnSet",% % % % "columns":%[% % % % % {% % % % % % "type":%"Column",% % % % % % "items":%[% % % % % % ]% % % % % }% % % % ]% % % }% % ]% }
  36. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"ColumnSet",% % % % "columns":%[% % % % % {% % % % % % "type":%"Column",% % % % % % "items":%[% % % % % % % {% % % % % % % % "type":%"Image",% % % % % % % % "url":%"ringo.png",% % % % % % % % "backgroundColor":%"#27AAE1",% % % % % % % % "altText":%"Ringo"% % % % % % % }% % % % % % ]%
  37. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"ImageSet",% % % % "imageSize":%"large",% % % % "images":%[% % % % ]% % % }% % ]% }
  38. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"ImageSet",% % % % "imageSize":%"large",% % % % "images":%[% % % % % {% % % % % % "type":%"Image",% % % % % % "url":%"ringo.png",% % % % % % "backgroundColor":%"#27AAE1",% % % % % % "altText":%"Ringo"% % % % % }% % % % ]% % % }% % ]%
  39. <!doctype%html>% <html>% <head>% % <meta%charset="utf=8">% % <style>% % % body%{%background:%white;%}%

    % </style>% </head>% <body>% % <h1>Hello%world!</h1>% </body>% </html>
  40. <!doctype%html>% <html%%4email>% <head>% % <meta%charset="utf=8">% % <style>% % % body%{%background:%white;%}%

    % </style>% </head>% <body>% % <h1>Hello%world!</h1>% </body>% </html> ⚡
  41. <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>% %

    <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1>% %%%%Hello%world!% %%</h1>% %%<input%type="text"%/>% </body>% </html>
  42. <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>% %

    <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1>% %%%%Hello%world!% %%</h1>% %%<input%type="text"%on="change:AMP.setState({state:% % % % % % % % % % % % % % % %{username:event.value}})"%/>% </body>% </html>
  43. <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>% %

    <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1>% %%%%Hello%world!% %%</h1>% %%<input%type="text"%on="change:AMP.setState({state:% % % % % % % % % % % % % % % %{username:event.value}})"%/>% </body>% </html>
  44. <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>% %

    <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1>% %%%%Hello%world!% %%</h1>% %%<input%type="text"%on="change:AMP.setState({state:% % % % % % % % % % % % % % % %{username:event.value}})"%/>% </body>% </html>
  45. <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>% %

    <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1%[text]="'Hello%'%+%state.username%+%'!'">% %%%%Hello%world!% %%</h1>% %%<input%type="text"%on="change:AMP.setState({state:% % % % % % % % % % % % % % % %{username:event.value}})"%/>% </body>% </html>
  46. <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>% %

    <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1%[text]="'Hello%'%+%state.username%+%'!'">% %%%%Hello%world!% %%</h1>% %%<input%type="text"%on="change:AMP.setState({state:% % % % % % % % % % % % % % % %{username:event.value}})"%/>% </body>% </html>
  47. ! <!doctype%html>% <html%amp4email>% <head>% % <meta%charset="utf=8">% % <style%amp4email=boilerplate>body{visibility:hidden}</style>% % <script%async%src="https://cdn.ampproject.org/v0.js"></script>%

    % <script%async%custom=element="amp=bind"%% % % src="https://cdn.ampproject.org/v0/amp=bind=0.1.js"></script>% </head>% <body>% % <h1%[text]="'Hello%'%+%state.username%+%'!'">% %%%%Hello%world!% %%</h1>% %%<input%type="text"%on="change:AMP.setState({state:% % % % % % % % % % % % % % % %{username:event.value}})"%/>% </body>% </html>% ==001a114634ac3555ae05525685ae==%
  48. Will it succeed? 1. YOU NEED TO REGISTER WITH GOOGLE.

    2. YOUR ESP NEEDS TO SUPPORT IT. 3. EMAIL CLIENTS NEED TO SUPPORT IT.
  49. SO YOU
 USE GMAIL ON MOBILE ON DESKTOP ANDROID OR

    WEBMAIL WITH A G SUITE or public ACCOUNT WITH A
 GMAIL
 ACCOUNT WITH A
 POP/IMAP
 ACCOUNT DEFAULT GMAILIFIED LEVEL 1 LEVEL 2 LEVEL 3 BASIC CSS CALC() BACKGROUND MEDIA QUERIES <STYLE> iOS LEVEL 4? AMP4email