AMP for Email

AMP for Email: What You Need to Know About Google’s New Interactive Email Effort


This post was originally featured on the FreshInbox blog. It is reposted here with minor edits.
UPDATE: On March 26, 2019 the AMP Project announced major email clients are beginning to roll out support for AMP. Read more below.

The email community was abuzz this week with Google’s Announcement of Accelerated Mobile Pages (AMP) for Email at Google’s AMP event in Amsterdam. The development was met with excitement because AMP for Email will allow for fully interactive emails in Gmail.

This article will go into some of the key information behind AMP for Email.

What Is AMP?

AMP or the AMP Project began as an open source project by Google to speed up the loading of mobile web pages on bandwidth- and processor-restricted devices.

A key feature of AMP is the elimination of Javascript, as it is often seen as bloated and slows down the rendering of pages. In its place, AMP offered lightweight AMP libraries to deliver common functionality like carousels and light boxes. Many publishers chose to adopt AMP as Google also promised better mobile search placement.

  AMP

What Is Amp for Email or AMP HTML Email?

AMP for Email is a subset of AMP that, like AMP, offers Javascript-like functionality for email. Since all email clients block Javascript by default, AMP offers a limited and secure alternative to Javascript without giving senders the ability to run arbitrary code in email.

The proposed AMP HTML for Email spec involves adding a new MIME part “text-x-amphtml” to your email that contains AMP HTML markup. The reasoning is that AMP-capable email clients would then render this part instead of the HTML part and other non-AMP clients would continue to render the HTML part.

An AMPHTML email starts with the following base template:

<!doctype html>
<html 4email> <!-- `amp4email` also accepted. -->
<head>
  <meta charset="utf-8">
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
Hello, world.
</body>
</html>

Which Clients Are Supported?

Google says that AMP is open source and would like to see AMP for Email to be widely supported by other non-Google modern email clients.

However, as of now, AMP for Email is only available through the Gmail Developer Preview. Gmail hopes to roll out AMP for Email publicly later this year to both webmail as well their mobile apps.

How Do I Get Access?

AMP for Email is only available for developers at the moment and requires a non-disclosure agreement (NDA). End users will have to wait.

You can sign up to be considered here.

This is Not Google’s First Interactive Email Attempt

Google beta tested “Enhanced Email” featuring interactive carousels in 2010. Google has also been adding interactive features around email using Schema.org. AMP for Email does seem like Google’s most ambitious attempt at interactive email.

On another note, Microsoft also experimented a sandboxed Javascript approach to interactive email in 2010 called Hotmail Active Views which didn’t get a lot of adoption, as it was deemed too complicated to implement. Microsoft recently launched a more limited version of interactive email called Actionable Messages.

Use Cases for AMP for Email

Check out this presentation for demos of AMP in Email by Doodle, Booking.com and Pinterest.

Refreshing offers in an email.
Refreshing offers in an email.

Viewing and saving a Pinterest pin in an email.
Viewing and saving a Pinterest pin in an email.

There was also a Doodle example showing the ability to respond and view real-time responses to a survey within an email.

Playground

You can test out AMP for Email markup here.

This CodePen example shows how you can incorporate “classic” and AMP interactive email within the same email.

Benefits of AMP for Email

Submitting and fetching Data from a Website without Leaving the Email

The distinctive feature of AMP for Email is the ability for email recipients to take an action within an email and have the data sent to a remote website and update the email with new content without the recipient leaving the email itself. For example, you could tap on a like button under a picture and have it refresh with a list of all the people who have liked the picture so far.

AMP’s interactive update capability is achieved using AMP’s “dynamic content” features like amp-bind and amp-list.

Interactive Content in Email Made “Easy”

AMP offers a few built-in modules such as carousel and light-boxes, so implementing these features in the email only requires a few lines of markup.

However, AMP isn’t the only way to achieve interactivity in email. You can create some pretty amazing interactive email content just by using HTML and CSS. In fact companies like REBEL were founded around this.

Live Content without the Hacks

AMP for Email allows for content that is refreshed when the email is opened. This means an email content is never stale and supports use cases such as dynamically updated sports scores and poll results.

Although regular HTML email content is static, before AMP, regular HTML email has always supported dynamic content through real-time generation and loading of images (as well as external stylesheets). Companies like MovableInk and Liveclicker offer APIs to make it easy to embed live information within images. AMP for Email just makes this a lot less hackish.

Drawbacks of Amp for Email

A New MIME Part

The requirement that the content is packaged in a new “text-x-amphtml” MIME part is the biggest drawback of AMP for Email.

Adding support for this MIME part is going to be a tall order for the majority of Email Service Providers (ESPs) out there. Judging from how long it took the ESPs to support responsive email in their solution it can take years before most ESPs get around to support this format.

I can see the API-based ESPs getting around to it quicker, but limiting this capability to technologically-savvy senders seems self-defeating.

A Brand New Language

Although basic HTML is supported in AMP, to leverage the powerful features of AMP for Email, developers must understand Javascript like – yet not Javascript syntax. There will be a small number of email-savvy developers (who mostly code in HTML and CSS) who will be able to cut their teeth into AMP.

AMP goes against existing email development practices

This one is perplexing to me. AMP for Email does not support the img tag, the !important selector, background attributes and inline styles – the bread and butter of HTML email development.

Instead, developers are forced to use the amp-img tag that comes with its set of tight restrictions (height and width attributes are required).

Surprisingly, although table background attributes are not supported, the CSS background-image property works in AMP for Email.

Speaking of CSS, AMP limits CSS to 50kb!

AMP Is Super Strict on Validation

Email developers are used to putting all sorts of hacks into HTML email to appease the various email clients. To preserve performance and stability, AMP will break if the content isn’t clean. That means any unsupported tags and attributes will cause AMP not to render.

What We Don’t Yet Know

There are a few things that have not been disclosed about AMP for Email:

  • If a recipient can interact with their account on a website through an email, what methods will be available to securely authenticate the recipient?
  • Whether senders will need to apply to be whitelisted to use AMP for Email and what the requirements entail.
  • Whether users be given an option to disable this feature.

My Thoughts

I’m still formulating my thoughts, but I feel AMP for Email is a bit overkill. Certain things may make sense for AMP as it relates to its original goal – to speed up mobile webpages – don’t make sense with email, such as the elimination of the img tag and inline CSS styling.

Requiring a new MIME part frees developers new to email from learning the quirks of HTML email and its baggage but seeing that most email clients won’t support AMP HTML, it doesn’t seem likely that a developer would be able to avoid “learning” how to code email to satisfy Outlook. Also, this MIME part requires every single email service provider to retool their software – which seeing how long it took some ESPs to support responsive code – could take years.

I’d rather Google just sprinkle AMP support within regular HTML and use progressive enhancement capabilities already adopted in interactive email to enable interactive AMP features within Gmail. This way, AMP for Email would be accessible to everyone out of the gate.

Still, I’m very excited that Google is investing in interactive email and I look forward to further AMP developments in email.

I just hope AMP for Email doesn’t suffer the fate of Google Wave and Gmail Grid View – which were shut down by Google before being widely available.

Special thanks to Justin Khoo for sharing his thoughts on AMP for Email. You can find more from Justin on his FreshInbox blog.

Update (3/26/19)

The AMP Project has announced that several major email providers including Yahoo!, Outlook.com, Mail.ru and Gmail are beginning to roll out support for AMP. This exciting news means email developers can start creating AMP experiences that allow users to interact directly within emails, such as responding to a comment or filling out a questionnaire.

Developers can experiment with AMP emails by using the AMP Project playground. There is also an AMP working group where developers and marketers can discuss AMP experiences in email.