For anyone who has been browsing the internet on their handheld devices, you must have noticed that certain pages tend to load faster even though they contain highly detailed images and embedded videos in them. This is all thanks to an innovation called the AMP i.e. Accelerated Mobile Pages. AMP is a framework made up of HTML, CSS, and JavaScript that can be used to create a lightweight page with significantly low loading speeds.
Google announced support for AMP in their email clients in early 2018. The experience might not be as versatile as visiting an AMP website but AMP in Emails allows marketers to utilize certain AMP elements in their emails to create a dynamic interactive experience for the subscribers. Google made AMP emails live in April 2019 and brands have been gradually implementing it in their marketing email campaigns since then.
We assume you reached this page in your quest for quenching your thirst of learning about AMP in email and we assure this article will be a push in the correct direction about it.
Table of Contents
How does AMP for email work?
Multipurpose Internet Mail Extensions (MIME) is an Internet standard that details the support for different media types in email messages such as audio, images, text, video, application, etc. The MIME type instructs the email client on how to read and display the specific email code.
While sending an email using an Email Sending Platform(ESP), it is sent in HTML MIME type (text/html). Certain ESPs also create a plain text MIME type of the email (text/plain) and send it along with the HTML variant. When sending an AMP email, it utilizes an entirely new MIME format (text/x-amphtml). Since a handful of email clients (listed in the later part) currently support AMP emails, you need to specify all three versions in your email code. In the supporting email clients, the AMP email is rendered and the non-supporting email clients fall back to the HTML version.
In order for the email client to recognize an AMP email, it needs to have the following three prerequisites:
- The <html amp4email> declaration instead of <html>
- The script tag containing the ampproject information i.e. <script async src=”https://cdn.ampproject.org/v0.js”></script>
- The AMP boilerplate tag i.e. <style amp4email-boilerplate>body{visibility:hidden}</style> which remains hidden till the Javascript is loaded
Any AMP component-specific script needs to be placed within the script tag else you may run into a validation error later.
What makes AMP email different from HTML emails?
AMP emails are a better version of your HTML emails owing to three major factors:
- Support of Javascript (even though limited markup support)
- No need for inlining styles
- Support for a huge library of AMP interactive component Scripts
Support for Javascript
HTML support in emails was adopted when the internet was in its infancy for the masses, webpages were made using HTML, and any interactivity was managed using Flash and later Javascript. Keeping security in mind, the emails didn’t support the use of either language. With AMP, you have access to a limited library of Javascript markups that the AMP components rely on.
No need for inlining styles
Any AMP component-specific scripts are to be specified in the <head> section and the styles specified there are automatically applied at the specific sections. This eliminates the need for manually inlining your CSS style at every applicable section
Support for AMP components
AMP components resemble the interactive CSS blocks that most email developers use to create interactive emails. The AMP components are easily recognizable owing to the ‘amp-’ prefix to every tag. The entire library of email compatible AMP components can be divided into 3 major categories.
- Dynamic Content
- Layout
- Media
Dynamic Content AMP Components
The dynamic content AMP allows the email developers to include content blocks that can be interacted directly from the email itself and the content changes accordingly. While dynamic content blocks are possible without using AMP, including interactive forms was not completely possible using CSS. By using <amp-form> in conjunction with <template type=”amp-mustache”> you can create forms inside the email that can be filled by the subscribers. So, brands can now create quizzes, surveys, reviews, or collect customer information right from the email. The other Dynamic Content AMP components that are supported in emails are:
- <amp-form> – The Form element of AMP.
- <template type=”amp-mustache”> – Displays the results of the <amp-form> tag
- <amp-list> – Displays a list that fetched from the server..
- <amp-selector> – Provides the ability to select multiple options in field of the form
- <amp-bind> and <amp-state> – To run specific scripts to manipulate or add certain actions on certain events. Displaying thank you on form filling is one such example.
Layout AMP Components
These AMP components allow email developers to make subtle changes to the email layout as well as the placement of images in the email layout in order to make it interactive. Some of the most common Layout AMP components are:
- <amp-accordion> – Stack multiple sections in a single column which can be expanded and retracted just like an accordion.
- <amp-carousel> – Create an image carousel that can be shifted across different images
- <amp-sidebar> – Create a sidebar with navigation menus
- <amp-lightbox> – A pop-out lightbox for displaying hidden content or email section
- <amp-image-lightbox> – A pop-out lightbox for displaying images
- <amp-fit-text> – A component to format a paragraph to fit within a section
Media AMP Components
One of the most common reasons for increased load times is the images and GIFs you embed in an email. By using media AMP components such as <amp-img> to embed images and <amp-anim> to include GIF files, you no longer need to worry about images increasing your loading times.
Which ESPs and Email Clients support AMP?
- List of ESPs that support sending
AMP emails
- SparkPost
- Stripo
- Plumrocket plugin for Magento
- List of supportive Email Clients
- Gmail
- Yahoo! Mail
- Outlook.com
- Mail.ru
Why has everyone not adopted AMP in emails yet?
You may be wondering that if AMP is so beneficial for emails, why aren’t we seeing more brands adopting it? The following are some of the prominent reasons for a slump in the adoption of AMP in emails.
1. Too high requirements for getting registered
Before you can create and send AMP-enabled emails, you need to complete certain prerequisites:
- Get email domain validation for your sender domain by enabling SPF (Sender Policy Framework) and DKIM (DomainKeys Identified Mail)
- Register by sending a test AMP email for whitelisting
Owing to the high registration request volumes, getting registered and validated takes time.
2. Limited ESP support & email client base
Even after getting registered, you need to test all your AMP emails before sending them and you need to have an account with any of the supporting ESPs to send an AMP email.
Since a handful of email clients support AMP emails, the efforts behind creating an AMP email are not justified.
3. No clear performance tracking and reporting
- How many people have filled the form?
- How much time was spent on the email?
- Which accordion section got more attention?
Such information is not available and so the only measurable metrics available are the email opens, click-rates which is also available for standard HTML emails.
4. No standardized email coding practices
Even though limited Javascript markup is supported, many marketers are concerned about security. Since there are no standardized email coding practices in place, it is very easy to create fraudulent emails using AMP.
Wrap Up
AMP for Email is an innovative step in the correct direction but since it is a new language to learn and with many loopholes to plug, it may take time to become a mainstream marketing tool. Yet, early adoption can be the difference between you and your competition. Refer AMP for Email’s official documentation and Google developers Page for learning more about AMP in emails.
