Emailing 2020: Remi Parmentier

Emailing 2020
Prague, 04/10/2018

Rémi Parmentier
@HTeuMeuLeu
emails.hteumeuleu.com
Hello everyone ! My name is Rémi Parmentier. I am a french front-end developer. I usually write on the web under the
nickname HTeuMeuLeu, which is french slang for HTML. I really get a kick at understanding why and how things work in the
email world and sharing my findings afterwards. I've even been nicknamed « The Email Detective » by other email geeks.

A few weeks ago I was surfing on Reddit and found a post about something related to email code. And I made the mistake
of reading the comments and it was full of really vehement comments like « HTML in email is at least a decade behind » or
« HTML emails suck on a fundamental level since they are time-locked in 2001 ».
!
It's weird that emails are so widely use for personal or professional use, yet some people still have the impression it's stuck
in the past.
!
https://www.reddit.com/r/webdev/comments/9g2akx/googles_plan_to_transform_email_to_amp_is_deeply/?
utm_content=comments&utm_medium=user&utm_source=reddit&utm_name=u_McPoulet

Email is not
stuck in 2001.
You are.
A lot of things happened in the past ten years. And it feels like even more things happened in this past year alone.

THE CURRENT STATE
OF EMAIL CLIENTS.
Here's the current state of email clients.

201620142012201020082006
MY FIRST
EMAIL
2018
In 2006 I landed my first job at a web agency. And at that time, HTML emails weren't considered a bad thing. IE6 was the
most dominant browser. We were still coding websites mostly using tables.

GMAIL
PUBLIC BETA
201620142012201020082006
MY FIRST
EMAIL
2018
And Gmail just got into public beta. The webmail was launched in 2004, but it was by invitation only.

GMAIL
PUBLIC BETA
201620142012201020082006
FIRST
iPHONE
MY FIRST
EMAIL
2018
In 2007 the first iPhone launched. And this marked a new era of how we make websites.

GMAIL
PUBLIC BETA
201620142012201020082006
FIRST
iPHONE
MY FIRST
EMAIL
2018
RESPONSIVE
WEB DESIGN
But it wasn't until 2010 that we started talking about responsive web design. It was an article by Ethan Marcotte published
on A List Apart that explained how we could this thing in CSS called media queries to target browser widths and adapt our
layouts accordingly. Before that, between 2007 and 2010, we would mostly make separate mobile websites.

GMAIL
PUBLIC BETA
201620142012201020082006
FIRST
iPHONE
MY FIRST
EMAIL
2018
RESPONSIVE
WEB DESIGN
SAW A FIRST
RESPONSIVE
EMAIL
And it wasn't before 2012 that I realized that emails could also be responsive. I still remember that moment when I received
a Twitter notification email, and saw a completlely different layout between my desktop Gmail and Apple Mail on my
iPhone.

GMAIL
PUBLIC BETA
201620142012201020082006
FIRST
iPHONE
MY FIRST
EMAIL
2018
RESPONSIVE
WEB DESIGN
SAW A FIRST
RESPONSIVE
EMAIL
MY FIRST TALK
ABOUT
EMAILS
So this led to a new passion about emails. And in 2013 I gave my first talk about emails in France.

GMAIL
PUBLIC BETA
201620142012201020082006
FIRST
iPHONE
MY FIRST
EMAIL
2018
RESPONSIVE
WEB DESIGN
SAW A FIRST
RESPONSIVE
EMAIL
MY FIRST TALK
ABOUT
EMAILS
OUTLOOK.COM
REDESIGN

Outlook.com
2015 redesign
In 2015, Outlook.com moved to the Office365 architecture and webmail. And sadly it was a huge step backwards in terms
of HTML and CSS support. Outlook.com, before 2015, used to support CSS animation, box-shadow. This new version no
longer did. But at least it got rid of two bugs.

.box {
width:600px;
}
!
@media only screen and (max-‐width:600px) {
.box {
width:auto;
}
!
.box-‐title {
font-‐size:1.25em;
}
}

.ExternalClass .ecxbox {
width:600px;
}
!
.ExternalClass .ecxbox {
width:auto;
}
!
.ExternalClass .ecxbox-‐title {
}
}

Margin with
an uppercase M
Up until 2015.

GMAIL
PUBLIC BETA
201620142012201020082006
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

Yahoo
responsive support
In 2015, Yahoo got responsive support. And the reason they didn't before was because of a bug in their CSS parser. And
this is a bug that led us developers to use a special hack.

Yahoo's attribute
selector hack.
Up until 2015.

#yiv6851014585 .yiv6851014585box {
width:600px;
}
!
#yiv6851014585 .yiv6851014585box {
width:auto;
}
!
#yiv6851014585 .yiv6851014585box-‐title {
}
}

#yiv6851014585 .yiv6851014585box {
width:600px;
}
!
_filtered #yiv6851014585 {
}
!
#yiv6851014585 .yiv6851014585box-‐title {
}
}

.box {
width:600px;
}
!
*[class="box"] {
width:auto;
}
!
*[class="box-‐title"] {
}
}

#yiv6851014585 .yiv6851014585box {
width:600px;
}
!
*[class="box"] {
width:auto;
}
!
*[class="box-‐title"] {
}
}

#yiv6851014585 .yiv6851014585box {
width:600px;
}
!
#yiv6851014585 * .filtered99999 {
width:auto;
}
!
#yiv6851014585 * .filtered99999 {
}
}

#yiv6851014585 .yiv6851014585box {
width:600px;
}
!
_filtered #yiv6851014585 {
}
!
#yiv6851014585 * .filtered99999 {
}
}

Yahoo's
double head hack.
On mobile apps.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { background: #fff; }
}
</style>
</head>
<body>
…
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<body>
…
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head></head>
<head>
<style>
}
</style>
</head>
<body>
…
</body>
</html>

GMAIL
PUBLIC BETA
201620142012201020082006
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

There are two hard things in
Computer Science:
cache invalidation
and naming things.
“
— Phil Karlton ”
There's this quote that I love that says […] I would definitely add a third one.

There are three hard things in
Computer Science:
cache invalidation
and naming things
and responsive emails.
“
”

It's hard
to code responsive emails.
It's hard to code responsive emails because you need to deal with bad email clients like Outlook 2016, who uses Word's
rendering engine to display HTML emails, and more modern but very restrictive webmails like Gmail, which didn't support
media queries at the time.

Source : http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
Fortunately some techniques became quite popular. Like the fluid/hybrid technique which allows for columns in your layouts to flow
below each other as the email clients viewport gets smaller.

But I always had one problem with this. It's that once your columns stack below each others on mobile, they stay at their original
size.

And what I'd want in most cases is for these columns to grow.

without media queries?
How can we make a column grow on mobile
So this is how I went on a quest to find how can we make a column grow on mobile without media queries.

F L E X B O X
And if you've been doing web development in the past few years, the first thing that should come to your mind is Flexbox.

Flexbox is amazing to create fluid layouts like this one, where each image can grow and shrink and pass on a new line when
there's no longer enough room.

.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
!
.grid > * {
flex: 1 1 auto;
}
And the only CSS you need to create such an evoluted layout is those four lines. Your apply display:flex on your parent
element, set the elements to wrap on a new line.

.grid {
display: flex;
}
But unfortunately, if you try this on Gmail, even today, Gmail will only keep the first property. And unfortunately, when you
only apply display:flex to an element, it means you'll inherit from the default flexbox values.

And so this is what my image gallery with flexbox looks like in Gmail.

without media queries?
So my quest changed and became…

without media queries
and without Flexbox?

Three ideas
that put me on track

Three ideas
1. Gmail CSS support
Gmail filters a lot of things, but mostly by property names, not by values.

.hero {
background: url(image.jpg) 0 0;
background-size: cover;
}
For example, up until 2016, if you wanted to use background-size

.hero {
background: url(image.jpg) 0 0;
}
It was filtered in Gmail

.hero {
background: url(image.jpg) 0 0 / cover;
}
Unless you include it on the background shortcut property

.hero {
background: radial-gradient(
circle at 30% 107%,
#fdf497 0%, #fdf497 5%, #fd5949 45%,
#d6249f 60%, #285aeb 90%
);
}
Which means we can also support CSS functions like radial-gradient, to make things like this.

Source : http://emailweekly.co/

.column {
width: calc(100% - 50px);
}
And so Gmail supports calc(). And this is interesting because calc allows for calculations and potentially dynamic layouts.

Three ideas
2. Responsive typography

Source : http://madebymike.com.au/writing/precise-control-responsive-typography/
In march 2015, I found that article by Mike Riethmuller on how to make responsive typography.

font-size: calc( 12px + (24 - 12) * ( (100vw -
400px) / ( 800 - 400) ));
He used a very complicated calculation using viewport units. But he still needed media queries to prevent the element to
become too small or too big depending on your browser's width.

Source : http://goetter.tumblr.com/post/64119638003/quiz-parce-que-la-taille-%C3%A7a-compte
I remembered reading an article by fellow french developer Raphaël Goetter who asked…

min-width,
width
and max-width
Which is the strongest one?
Between the three min-width properties

min-width: ;
width: ;
max-width: ;
160px
320px
480px
When width is bigger than min-width but smaller than max-width, width wins.

320px
min-width: ;
width: ;
max-width: ;
160px
480px
When width is bigger than min-width and max-width, max-width wins.

480pxmin-width: ;
width: ;
max-width: ;
320px
160px
When min-width is bigger than width and max-width, min-width wins.

So this all got me thinking and thinking, surely all of this could be put together somehow…

Bingo !
And that's until Bingo, I found a solution.

width,!
min-width,!
max-width,!
& calc()
And the technique I found is based on the width, min-width, max-width properties and calc() function. And I
called this…

The Fab Four Technique
Illustrations by Elias Stein : https://dribbble.com/shots/2012203-Paul-George
[…] And I called this for two reasons.

First because I found this in january 2016. And at that time, the Beatles catalogue had just gone up on spotify, so I listened a lot to
the beatles.

There are three hard things in
Computer Science:
cache invalidation
and naming things
and responsive emails.
“
”
And second it's because it's hard to name things.

What we're going to do is build a layout like this where we've got four columns up until a certain breakpoint, where we'll
go to

max-‐width:100%;
min-‐width:25%;
width:calc((480px -‐ 100%) * 480);
Above breakpoint width
Below breakpoint width
Breakpoint
Here's what the fab four looks like.
1. Max-width définit la largeur mobile
2. min-width définit la largeur desktop
3. width exécute le calcul nécessaire avec le point de rupture souhaité

max-‐width:100%;
min-‐width:25%;
width:calc((480px -‐ 100%) * 480);
with a 500px parent
500px
125px
500px

max-‐width:
min-‐width:
width:
with a 500px parent
500px
125px
-‐9600px

max-‐width:
min-‐width:
width:
avec un parent à 500px
500px
125px
-‐9600px
with a 500px parent

max-‐width:100%;
min-‐width:25%;
width:calc((480px -‐ 100%) * 480);
with a 400px parent
400px
100px
400px

max-‐width:100%;
min-‐width:25%;
width:calc(
with a 400px parent
400px
100px
38400px

max-‐width:100%;
min-‐width:25%;
width:calc(
avec un parent à 400px
400px
200px
38400px
with a 400px parent

Support
Apple MailGmail Outlook.com 
(2015)
Thunderbird Orange AOL

width:calc((480px -‐ 100%) * 480);
We need to refactorize the calculation.

width:calc(480px * 480 -‐ 100% * 480);
C'est un peu plus long, mais ça marche quand même.

Support for  
older WebKit
Safari 6 and less
Android 4 and less

max-‐width:100%;
min-‐width:25%;
width:calc(480px * 480 -‐ 100% * 480);

max-‐width:100%;
min-‐width:25%;
width:-‐webkit-‐calc(480px * 480 -‐ 100% * 480);
width:calc(480px * 480 -‐ 100% * 480);

Graceful degradation
without calc()

display:inline-‐block;
min-‐width:120px;
width:25%;

max-‐width:100%;
min-‐width:25%;
width:calc(480px * 480 -‐ 100% * 480);
min-‐width:120px;
width:25%;

max-‐width:100%;
min-‐width:calc(25%);
width:calc(480px * 480 -‐ 100% * 480);
min-‐width:120px;
width:25%;

max-‐width:100%;
min-‐width:-‐webkit-‐calc(25%);
width:calc(480px * 480 -‐ 100% * 480);
min-‐width:120px;
width:25%;

Support for
Outlook.com
From 2015 and above.
Except that on the new Outlook.com, calc was no longer supported.

<div style="display:inline-‐block;
min-‐width:120px;
width:25%;
max-‐width:100%;
width:calc(480px * 480 -‐ 100% * 480);">
…
</div>
Outlook.com would remove the entire style attribute if you'd have certain characters in your styles, like the star *.

width:calc(480px * 480 -‐ 100% * 480);
To avoid this, we'll do the calculation by hand.

width:calc(230400px -‐ 48000%);

min-‐width:120px;
width:25%;
max-‐width:100%;
width:-‐webkit-‐calc(230400px -‐ 48000%);
width:calc(230400px -‐ 48000%);">
…
</div>
Now this way only the fab four properties are filtered.

min-‐width:120px;
width:25%;
max-‐width:100%;">
…
</div>

And I made this in 2016, but even today in the latest Gmail version, it's really relevant. Because the Fab Four doesn't rely
on media queries, you don't base your layout on screen's width. So at the same screen width, you can have different
layouts depending on your webmail's configuration.

GMAIL
PUBLIC BETA
201620142012201020082006
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
And I published in january 2016 and received lots of praise for it.

GMAIL
PUBLIC BETA
201620142012201020082006
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
And then in september 2016, Google officially announced that they were now going to support responsive design.

SO YOU 
USE GMAIL
ON MOBILE ON DESKTOP
ANDROID WEBMAIL WITH A
GOOGLE APPS
ACCOUNT
WITH A
PUBLIC
ACCOUNT
PAYINGFOR FREEWITH 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
2015BEFORE RESPONSIVE SUPPORT

SO YOU 
USE GMAIL
ANDROID WEBMAIL WITH A
GOOGLE APPS
ACCOUNT
WITH A
PUBLIC
ACCOUNT
PAYINGFOR FREEWITH A 
GMAIL 
ACCOUNT
WITH A 
POP/IMAP 
ACCOUNT
DEFAULT GMAILIFIED G SUITE 
BUSINESS
G SUITE 
BASIC
BASIC CSS CALC()
BACKGROUND
MEDIA QUERIES
<STYLE>
iOS
2016AFTER RESPONSIVE SUPPORT

SO YOU 
USE GMAIL
ANDROID OR WEBMAIL WITH A
G SUITE or public
ACCOUNT
WITH A 
GMAIL 
ACCOUNT
WITH A 
POP/IMAP 
ACCOUNT
DEFAULT GMAILIFIED
BASIC CSS CALC()
BACKGROUND
MEDIA QUERIES
<STYLE>
iOS
2018

2018
REDESIGNS
GMAIL
YAHOO
OUTLOOK.COM

There are a few new features, like the possibility to snooze emails. But the rest is mostly just cosmetic. Though there's one
bug that they fixed.

Gmail
Display images bug
Up until 2018.

There's a bug in the previous version of Gmail where if you chose to block images by default, or if by any chance Gmail
blocked your images, and you click on the display images below, it will make your styles in a style tag invalid.

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;" />
Here we have a paragraph with a class named green that apply a green background.

CSS
HTML
div.m159215f7d36ee7fd p {
background:red;
}
div.m159215f7d36ee7fd .m_3567455155959655244green {
background:green;
}
<div class="m159215f7d36ee7fd">
<p class="m_3567455155959655244green">
</p>
</div>
When Gmail receives the email, it will surround your HTML with a div with a specific class. This class is also used to prefix
the rules in the style tag.

CSS
HTML
background:red;
}
div.m159215f7d36ee7fd .m_3567455155959655244green {
background:green;
}
<p class="m_3567455155959655244green">
</p>
</div>
Each class name is also prefixed, both in the style tag and in the HTML.

CSS
HTML
background:red;
}
div.m159215f7d36ee7fd .m_3567455155959655244foo {
background:green;
}
<p class="m_-8249599400804587256green">
</p>
</div>

But perhaps my favorite fact about this new Gmail redesign is that there's a new loading animation, and it's done just in
HTML and CSS. This is not a video, this is not an animated GIF. It's just divs transformed to make an animated drawing.

For the most part, it's really just a cosmetic redesign. There's no change in the underlying CSS and HTML filtering engine.
Which means that we still don't have media queries support. But somehow, they don't support media queries, but they
included some special features for International Talk Like A Pirate Day, which is in september, where you can change the
interface.

Folders become Treasure troves, Favorites become Loot and Mark as Read becomes mark as discovered.

Source :https://twitter.com/M_J_Robbins/status/979386325446119425
The new Outlook.com has a new zoom mecanism. If your email doesn't fit inside the message zone width, it will scale your
email. And while this may seem like a clever solution to prevent horizontal scroll, it's really bad for accessibility, because
everything now becomes twice as small.

2018
REDESIGNS
GMAIL
YAHOO
OUTLOOK.COM
AOL

AOL moves to Yahoo
Last year, Oath Inc, which is a Verizon subsidiary, bought Yahoo. And they already owned AOL. So this year, they started
moving AOL webmail users to Yahoo's webmail.

Source : https://www.emailclientmarketshare.com
13.03% in July 2018
1.4% in June 2018
And this was clearly visible in EmailClientMarketshare.com, a website ran by Litmus that shows which are the most popular
email clients.

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

"On iOS 12, built-in apps such as […] Mail can natively Quick Look usdz files of virtual objects in 3D or AR."
I wasn't really excited about this. And then iOS 12 came just a few weeks ago…

Source :https://twitter.com/cossssmin/status/1045195822575628288
And it doesn't work. When you click on a usdz link from Apple Mail, it opens Safari, and only from there you can quick look
the object in 3D.

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

Source : https://www.adaptivecards.io/
Microsoft defines Adaptive cards as "an open card exchange format enabling developers to exchange UI content in a
common and consistent way."

Microsoft gave this example of a trello email where you could directly add a comment right from within the card, or move
your content to another list in your Trello board.

{
"type": "AdaptiveCard",
"$schema": "https://adaptivecards.io/schemas/adaptive-‐card.json",
"version": "1.0"
}
So let's see what does an adaptive card looks like. It's a JSON file format. You need to set these three declarations to
declare the most basic card.

{
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Hello world!",
"size": "large",
"weight": "bolder"
}
]
}
And then you can add the body of your card with your actual content. And each content will be between accolades, and
set to a specific type. For example here, I use a TextBlock type to set basic text. And you can define size and weight.
There's plenty of components predefine, like ImageSet (for image galleries), ColumnSet (to build fluid column layouts),

{
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Hello world!",
"size": "large",
"weight": "bolder"
}
]
}
<html>
<head>
<meta charset="utf-‐8">
<script type="application/adaptivecard+json">
!
</script>
</head>
<body>
<h1>Hello world!</h1>
And now if you want to send an email like this, all you need to do is add this JSON content into a script tag

Your Adaptive Card
Your HTML email

And at some point during my tests, I realized that all the layout done to display a card in Outlook.com is done with
Flexbox. But Flexbox is not supported by Outlook.com in a regular HTML email. So I wondered if this could be used to
create better responsive layout, without media queries. And so I tried to recreate my earlier Fab Four example, with four
images going below each others.

{
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
]
}
]
}

{
"version": "1.0",
"body": [
{
"columns": [
{
"type": "Column",
"items": [
]
}
]
}
]
}

{
"version": "1.0",
"body": [
{
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "ringo.png",
"backgroundColor": "#27AAE1",
"altText": "Ringo"
}
]

This works well. But it doesn't make the images pass below each others. They only scale fluidly.

{
"version": "1.0",
"body": [
{
"type": "ImageSet",
"imageSize": "large",
"images": [
]
}
]
}
So I tried to recreate this, but this time with an ImageSet component that lets you create image galleries. So you can define
your imageSize for your whole gallery.

{
"version": "1.0",
"body": [
{
"type": "ImageSet",
"images": [
{
"type": "Image",
"url": "ringo.png",
"altText": "Ringo"
}
]
}
]
And then you define each image, using the exact same component that I used before.

{
"version": "1.0",
"body": [
{
"type": "ImageSet",
"images": [
{
"type": "Image",
"url": "ringo.png",
"altText": "Ringo"
},
{
"type": "Image",
"url": "john.png",
So I did this four times, and I tested my email.

Source : https://docs.microsoft.com/en-us/adaptive-cards/#semantic-instead-of-pixel-perfect
One core principle of adaptive cards is they value "semantic instead of pixel perfect". Or another they put it is, "card
authors own the content, host app owns the look and feel".

2018
REDESIGNS
INTERACTIVITY
GMAIL
YAHOO
OUTLOOK.COM
AOL
AMP4EMAIL
ADAPTIVE CARDS
AR KIT 2

Source : https://www.ampproject.org/
"The AMP project is an open-source initiative aiming to make the web better for all. " In reality, it's a Google framework to
help build light webpages.

This first example is from Pinterest. You've an email with a typical Pinterest like layout with different recipes. And if you click
on one of them, you're brought to the full recipe page, right within your email. This is not opening another tab in your
browser, this is right straight in Gmail. And this is all with dynamic content as well.

Here's one more example from Booking.com. They have a list of promotions at various destinations. And you can click a
`See a new deal` button and it will show you another offer instead. And this is all done with live dynamic data. And there's
another really cool thing about this email if you scroll a bit in the footer. There's this "manage your subscriptions" button.

<!doctype html>
<html>
<head>
<style>
body { background: white; }
</style>
</head>
<body>
</body>
</html>
So here's how you can turn a regular HTML email into an AMPHTML email. Here's a pretty common HTML email template,
with an HTML5 doctype, a meta tag, a style and an h1 tag.

<!doctype html>
<html 4email>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
⚡
First we need to add the "amp4email" attribute on the html tag. We can either write it like this, with the little emoticon.
But I hate this because as a non native english speaker, it's totally unintuitive to me that it's supposed to be pronounced
amp4email and not lightningbolt4email.

<!doctype html>
<html amp4email>
<head>
<style>
</style>
</head>
<body>
</body>
</html>
So you can write it like this instead. Much more readable in my opinion, and much more consistent with the rest of
Google's code.

<!doctype html>
<html amp4email>
<head>
<style amp4email-‐boilerplate>body{visibility:hidden}</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style>
</style>
</head>
<body>
</body>
</html>
Then we need to import AMP itself, with both a boilerplate style tag and a script tag.

<!doctype html>
<html amp4email>
<head>
<style amp-‐custom>
</style>
</head>
<body>
</body>
</html>
And finally, you can add your own style tags using an amp-custom attribute. While there's no styles limitations here, Google
warns that email clients like Gmail will apply their own filters for security reasons.

Source : https://www.ampbyexample.com/playground/#runtime=amp4email
And voilà, you've got your first valid AMP HTML email. We can test this in Google's Playground, which is an online tool
where you can validate and test your AMP code. Of course, at this point, it's pretty boring and all it says is Hello World!. So
let's make it a little bit more dynamic.

<!doctype html>
<html amp4email>
<head>
</head>
<body>
<h1>
Hello world!
</h1>
</body>
</html>
So, back to our hello world example. Here's how we can create a really basic interactive email with amp4email.

<!doctype html>
<html amp4email>
<head>
</head>
<body>
<h1>
Hello world!
</h1>
<input type="text" />
</body>
</html>
We're going to create a basic interaction with an input text. And whenever we fill this input text, the h1 tag above will say
Hello [value of the input text]! instead of hello world.

<!doctype html>
<html amp4email>
<head>
<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>
In order to do this, we're going to need a new component, called amp-bind.

<!doctype html>
<html amp4email>
<head>
</head>
<body>
<h1>
Hello world!
</h1>
<input type="text" on="change:AMP.setState({state:
{username:event.value}})" />
</body>
</html>
We're gonna add an onchange event. So that whenever the value of this input text is changed, we can do something.

<!doctype html>
<html amp4email>
<head>
</head>
<body>
<h1>
Hello world!
</h1>
</body>
</html>
We're gonna use the function AMP.setState, which will change the state of the application. And yes, with amp4email, we
can say application when we're coding an email because it really feels like it.

<!doctype html>
<html amp4email>
<head>
</head>
<body>
<h1>
Hello world!
</h1>
</body>
</html>
And the state we're gonna change is a variable we're gonna call `username`. And this variable will get the value of the input
text, so we use the event.value variable proper to AMP.

<!doctype html>
<html amp4email>
<head>
</head>
<body>
<h1 [text]="'Hello ' + state.username + '!'">
Hello world!
</h1>
</body>
</html>
Now all we have to do is bind this variable to the h1 tag. And for this we're going to use a `[text]` attribute within brackets,
and define it to hello plus state.username.

Source : https://www.ampbyexample.com/playground/#runtime=amp4email

<!doctype html>
<html amp4email>
<head>
</head>
<body>
Hello world!
</h1>
</body>
</html>
Now you might be wondering, how do this fit inside a real email. One of the hardest thing with interactive emails is usually
to have a proper fallback when you're in an unsupported client. And the way Google decided to handle it with amp4email
is to make it a complete separate version of your email.

Content-‐Type: text/x-‐amp-‐html; charset="UTF-‐8"
!
<!doctype html>
<html amp4email>
<head>
</head>
<body>
Hello world!
</h1>
</body>
</html>
-‐-‐001a114634ac3555ae05525685ae-‐-‐
Content-‐Type: text/html; charset="UTF-‐8"
Because you see, when you send an email, it's not just an HTML code.

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>
<head>
It's an actual email code. With multiple parts, with a plain text part, and the HTML part. And so Google introduces a new
content type : text / x-amp-html.
Google notes : "Some email clients will only render the last MIME part, so we recommend placing the text/x-amp-html
MIME part before the text/html MIME part."

Source : https://www.ampproject.org/docs/interaction_dynamic/amp-email-format
And I was afraid this all would be an attempt from Google to make emails less compatible, and that developers would end
up only coding AMPHTML emails. But Google states it in amp4email FAQ :
"the specification still requires senders to include a static, HTML version of the email that users can view if they choose."

Will it succeed?
1. YOU NEED TO REGISTER WITH GOOGLE.
2. YOUR ESP NEEDS TO SUPPORT IT.
3. EMAIL CLIENTS NEED TO SUPPORT IT.
1. This is very similar to Microsoft's Adaptive Cards or Google's own Quick Actions feature. This is so that Google can
control who send interactive emails or not. But IMO this is contrary to the original purpose of emails or the web, which
is to be for everyone.
2. It needs to support the new x-amp-html content type. And I don't see that ever happening.
3. No other email clients outside Google will ever support this. In fact, I don't think even Google's own clients won't fully
support this.

SO YOU 
USE GMAIL
ANDROID OR WEBMAIL WITH A
G SUITE or public
ACCOUNT
WITH A 
GMAIL 
ACCOUNT
WITH A 
POP/IMAP 
ACCOUNT
DEFAULT GMAILIFIED
BASIC CSS CALC()
BACKGROUND
MEDIA QUERIES
<STYLE>
iOS
LEVEL 4?
AMP4email
If we go back to my Gmail's CSS support chart, it probably means we'll need to add a 4th level of support with amp4email.
But which versions will suport it ? The desktop for sure. But I don't think others will get it.

Standards
It almost looks like Microsoft and Google are trying to achieve the same thing in emails with Adaptive Cards and
amp4email. And I'm like… geez, talk to each others. Work together. Stop competing on frameworks that makes it harder
for everyone to use.

IETF W3C
EMAIL HTML
?
HTML
EMAIL

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

Source : https://twitter.com/cossssmin/status/1046739415257796608
Media queries sound like a good first starter. But it won't solve the problems of desktop email clients with small viewports
for messages. I don't have answers for all of this, but I hope we can start a conversation.

Thank you !
@HTeuMeuLeu
emails.hteumeuleu.com

Emailing 2020: Remi Parmentier

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Emailing 2020: Remi Parmentier

Similar to Emailing 2020: Remi Parmentier (20)

More from Emailing 2020

More from Emailing 2020 (16)

Recently uploaded

Recently uploaded (20)

Emailing 2020: Remi Parmentier