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.

Transcript

1. Emailing 2020 Prague, 04/10/2018
2. Rémi Parmentier @HTeuMeuLeu emails.hteumeuleu.com
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.
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
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
57. without media queries? How can we make a column grow on mobile
58. F L E X B O X
60. .grid { display: flex; flex-wrap: wrap; flex-direction: row; } ! .grid > * { flex: 1 1 auto; }
61. .grid { display: flex; }
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
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
87. There are three hard things in Computer Science: cache invalidation and naming things and responsive emails. “ ”
88. The Fab Four Technique
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
98. Support Apple Mail Gmail Outlook.com
 (2015) Thunderbird Orange AOL
99. Support for Outlook.com (2015
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>
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
128. 2018 REDESIGNS GMAIL YAHOO OUTLOOK.COM
129. Gmail redesign
131. Gmail Display images bug Up until 2018.
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>
139. Outlook.com 2018 redesign
142. Source :https://twitter.com/M_J_Robbins/status/979386325446119425
143. Yahoo redesign
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
151. <a href="…/stratocaster.usdz" rel="ar"> <img src="…/stratocaster.jpg" alt="" /> </a>
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/
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
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"% % % % % % % }% % % % % % ]%
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"% % % % % }% % % % ]% % % }% % ]%
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/
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