The Current State of Email Clients

A6201a057eac39e2b97a5a58d5f8601e?s=47 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.

A6201a057eac39e2b97a5a58d5f8601e?s=128

HTeuMeuLeu

October 04, 2018
Tweet

Transcript

  1. Emailing 2020 Prague, 04/10/2018

  2. Rémi Parmentier @HTeuMeuLeu emails.hteumeuleu.com

  3. None
  4. Email is not stuck in 2001. You are.

  5. THE CURRENT STATE OF EMAIL CLIENTS.

  6. 2016 2014 2012 2010 2008 2006 2018

  7. 2016 2014 2012 2010 2008 2006 MY FIRST EMAIL 2018

  8. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 MY

    FIRST EMAIL 2018
  9. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

    iPHONE MY FIRST EMAIL 2018
  10. GMAIL PUBLIC BETA 2016 2014 2012 2010 2008 2006 FIRST

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

    iPHONE MY FIRST EMAIL 2018 RESPONSIVE WEB DESIGN SAW A FIRST RESPONSIVE EMAIL
  12. 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
  13. 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
  14. Outlook.com 2015 redesign

  15. .ExternalClass Up until 2015.

  16. None
  17. .box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % .box%{% % %

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

    width:auto;% % }% ! % .ExternalClass%.ecxbox=title%{% % % font=size:1.25em;% % }% }
  19. .ExternalClass ? ✖

  20. Margin with an uppercase M Up until 2015.

  21. margin

  22. Margin

  23. mArgin

  24. maRgin

  25. marGin

  26. margIn

  27. margiN

  28. None
  29. 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
  30. 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
  31. Yahoo responsive support

  32. Yahoo's attribute selector hack. Up until 2015.

  33. .box%{% % width:600px;% }% ! @media%only%screen%and%(max=width:600px)%{% % .box%{% % %

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

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

    width:auto;% % }% ! % #yiv6851014585%.yiv6851014585box=title%{% % % font=size:1.25em;% % }% }
  36. #yiv6851014585%.yiv6851014585box%{% % width:600px;% }% ! _filtered%#yiv6851014585%{% }% ! % #yiv6851014585%.yiv6851014585box=title%{%

    % % font=size:1.25em;% % }% }
  37. #yiv6851014585%.yiv6851014585box%{% % width:600px;% }% ! _filtered%#yiv6851014585%{% }% ! % #yiv6851014585%.yiv6851014585box=title%{%

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

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

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

    width:auto;% % }% ! % #yiv6851014585%*%.filtered99999%{% % % font=size:1.25em;% % }% }
  41. #yiv6851014585%.yiv6851014585box%{% % width:600px;% }% ! _filtered%#yiv6851014585%{% }% ! % #yiv6851014585%*%.filtered99999%{%

    % % font=size:1.25em;% % }% }
  42. #yiv6851014585%.yiv6851014585box%{% % width:600px;% }% ! _filtered%#yiv6851014585%{% }% ! % #yiv6851014585%*%.filtered99999%{%

    % % font=size:1.25em;% % }% }
  43. Yahoo's double head hack. On mobile apps.

  44. <!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>
  45. <!DOCTYPE%html>% <html%lang="en">% % <body>%% % …% </body>% </html>

  46. <!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>
  47. <!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>
  48. 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
  49. 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
  50. The Fab Four Technique

  51. There are two hard things in Computer Science: cache invalidation

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

    and naming things and responsive emails. “ ”
  53. It's hard to code responsive emails.

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

  55. None
  56. None
  57. without media queries? How can we make a column grow

    on mobile
  58. F L E X B O X

  59. None
  60. .grid { display: flex; flex-wrap: wrap; flex-direction: row; } !

    .grid > * { flex: 1 1 auto; }
  61. .grid { display: flex; }

  62. None
  63. without media queries? How can we make a column grow

    on mobile
  64. without media queries and without Flexbox? How can we make

    a column grow on mobile
  65. Three ideas that put me on track

  66. Three ideas 1. Gmail CSS support

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

  68. .hero { background: url(image.jpg) 0 0; }

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

  70. .hero { background: radial-gradient( circle at 30% 107%, #fdf497 0%,

    #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90% ); }
  71. Source : http://emailweekly.co/

  72. .column { width: calc(100% - 50px); }

  73. Three ideas 2. Responsive typography

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

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

    - 400px) / ( 800 - 400) ));
  76. Three ideas "Size matters"

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

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

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

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

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

  82. None
  83. Bingo !

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

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

  86. None
  87. There are three hard things in Computer Science: cache invalidation

    and naming things and responsive emails. “ ”
  88. The Fab Four Technique

  89. None
  90. max=width:100%;% min=width:25%;% width:calc((480px%=%100%)%*%480); Above breakpoint width Below breakpoint width Breakpoint

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

  92. max=width:% min=width:% width: with a 500px parent 500px 125px =9600px

  93. max=width:% min=width:% width: avec un parent à 500px 500px 125px

    =9600px with a 500px parent
  94. max=width:100%;% min=width:25%;% width:calc((480px%=%100%)%*%480); with a 400px parent 400px 100px 400px

  95. max=width:100%;% min=width:25%;% width:calc( with a 400px parent 400px 100px 38400px

  96. max=width:100%;% min=width:25%;% width:calc( avec un parent à 400px 400px 200px

    38400px with a 400px parent
  97. None
  98. Support Apple Mail Gmail Outlook.com
 (2015) Thunderbird Orange AOL

  99. Support for Outlook.com (2015

  100. None
  101. width:calc((480px%=%100%)%*%480);

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

  103. Support for 
 older WebKit Safari 6 and less Android

    4 and less
  104. max=width:100%;% min=width:25%;% width:calc(480px%*%480%=%100%%*%480);

  105. max=width:100%;% min=width:25%;% width:=webkit=calc(480px%*%480%=%100%%*%480);% width:calc(480px%*%480%=%100%%*%480);

  106. Graceful degradation without calc()

  107. display:inline=block;% min=width:120px;% width:25%;

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

  109. max=width:100%;% 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%;

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

  111. Support for Outlook.com From 2015 and above.

  112. <div%style="display:inline=block;%% 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);">% % …%

    </div>
  113. <div%style="">% % …% </div>

  114. width:calc(480px%*%480%=%100%%*%480);

  115. width:calc(230400px%=%48000%);

  116. <div%style="display:inline=block;%% 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%);">% % …%

    </div>
  117. <div%style="display:inline=block;%% min=width:120px;% width:25%;% max=width:100%;">% % …% </div>

  118. None
  119. None
  120. 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
  121. 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
  122. Gmail CSS support

  123. 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
  124. 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
  125. 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
  126. 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
  127. 2018

  128. 2018 REDESIGNS GMAIL YAHOO OUTLOOK.COM

  129. Gmail redesign

  130. None
  131. Gmail Display images bug Up until 2018.

  132. None
  133. None
  134. 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;" />
  135. 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>
  136. 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>
  137. 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>
  138. None
  139. Outlook.com 2018 redesign

  140. None
  141. None
  142. Source :https://twitter.com/M_J_Robbins/status/979386325446119425

  143. Yahoo redesign

  144. None
  145. 2018 REDESIGNS GMAIL YAHOO OUTLOOK.COM AOL

  146. AOL moves to Yahoo

  147. Source : https://www.emailclientmarketshare.com 13.03% in July 2018 1.4% in June

    2018
  148. 2018 REDESIGNS INTERACTIVITY GMAIL YAHOO OUTLOOK.COM AOL AR KIT 2

  149. Apple's 
 AR Kit 2

  150. None
  151. <a href="…/stratocaster.usdz" rel="ar"> <img src="…/stratocaster.jpg" alt="" /> </a>

  152. None
  153. None
  154. Source :https://twitter.com/cossssmin/status/1045195822575628288

  155. 2018 REDESIGNS INTERACTIVITY GMAIL YAHOO OUTLOOK.COM AOL ADAPTIVE CARDS AR

    KIT 2
  156. Microsoft's Adaptive Cards

  157. Source : https://www.adaptivecards.io/

  158. None
  159. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0"% }

  160. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"TextBlock",% % % % "text":%"Hello%world!",% % % % "size":%"large",% % % % "weight":%"bolder"% % % }% % ]% }
  161. {% % "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>%
  162. Your Adaptive Card Your HTML email

  163. None
  164. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

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

    % {% % % % "type":%"ColumnSet",% % % % "columns":%[% % % % % {% % % % % % "type":%"Column",% % % % % % "items":%[% % % % % % ]% % % % % }% % % % ]% % % }% % ]% }
  166. {% % "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"% % % % % % % }% % % % % % ]%
  167. None
  168. {% % "type":%"AdaptiveCard",% % "$schema":%"https://adaptivecards.io/schemas/adaptive=card.json",% % "version":%"1.0",% % "body":%[% %

    % {% % % % "type":%"ImageSet",% % % % "imageSize":%"large",% % % % "images":%[% % % % ]% % % }% % ]% }
  169. {% % "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"% % % % % }% % % % ]% % % }% % ]%
  170. None
  171. Source : https://docs.microsoft.com/en-us/adaptive-cards/#semantic-instead-of-pixel-perfect

  172. 2018 REDESIGNS INTERACTIVITY GMAIL YAHOO OUTLOOK.COM AOL AMP4EMAIL ADAPTIVE CARDS

    AR KIT 2
  173. Google's AMP for email

  174. Source : https://www.ampproject.org/

  175. None
  176. None
  177. <!doctype%html>% <html>% <head>% % <meta%charset="utf=8">% % <style>% % % body%{%background:%white;%}%

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

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

    % </style>% </head>% <body>% % <h1>Hello%world!</h1>% </body>% </html>
  180. <!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>% %

    <style>% % % body%{%background:%white;%}% % </style>% </head>% <body>% % <h1>Hello%world!</h1>% </body>% </html>
  181. <!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>% %

    <style%amp=custom>% % % body%{%background:%white;%}% % </style>% </head>% <body>% % <h1>Hello%world!</h1>% </body>% </html>
  182. Source : https://www.ampbyexample.com/playground/#runtime=amp4email

  183. <!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>% </head>%

    <body>% % <h1>% %%%%Hello%world!% %%</h1>% </body>% </html>
  184. <!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>% </head>%

    <body>% % <h1>% %%%%Hello%world!% %%</h1>% %%<input%type="text"%/>% </body>% </html>
  185. <!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>
  186. <!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>
  187. <!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>
  188. <!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>
  189. <!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>
  190. Source : https://www.ampbyexample.com/playground/#runtime=amp4email

  191. <!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>
  192. ! <!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==%
  193. From:%%Person%A%<persona@example.com>% To:%Person%B%<personb@example.com>% Subject:%An%AMP%email!% Content=Type:%multipart/alternative;% boundary="001a114634ac3555ae05525685ae"% ! ==001a114634ac3555ae05525685ae% Content=Type:%text/plain;%charset="UTF=8";%format=flowed;% delsp=yes% !

    Hello%World%in%plain%text!% ! ==001a114634ac3555ae05525685ae% Content=Type:%text/x=amp=html;%charset="UTF=8"% ! <!doctype%html>% <html%amp4email>%
  194. Source : https://www.ampproject.org/docs/interaction_dynamic/amp-email-format

  195. Will it succeed? 1. YOU NEED TO REGISTER WITH GOOGLE.

    2. YOUR ESP NEEDS TO SUPPORT IT. 3. EMAIL CLIENTS NEED TO SUPPORT IT.
  196. 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
  197. Standards

  198. IETF W3C EMAIL HTML ? HTML EMAIL

  199. Source :https://www.email-standards.org/

  200. Source : https://twitter.com/cossssmin/status/1046739415257796608

  201. Thank you ! @HTeuMeuLeu emails.hteumeuleu.com