AMP Emails: Create Interactive Newsletters with Examples
Google’s AMP for Email framework – Accelerated Mobile Pages is a powerful tool that can make highly interactive and user-centered emails that load faster than traditional emails. This framework can be a powerful tool for sending dynamic and useful content through AMP emails.
Tip: Try Postcards and create HTML emails in minutes without coding knowledge.
AMP email is made up of HTML, CSS, and JS with the primary goal of building user-first experiences. The framework works for websites, ads, and emails. The framework features a variety of standard components such as forms, carousels, sliders, and capabilities to grab content from remote endpoints. The beauty of AMP emails is that the recipient can interact with the component directly inside the email without leaving it such as filling out a form, booking a reservation, pinning an item to a Pinterest board, browsing products or scheduling a call.
The Basic Structure of AMP Emails
For the email to qualify as AMP, it has to have the minimum code structure below. It’s the base code.
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
Hello, AMP4EMAIL world.
</body>
</html>
There are three essential elements to note from the above snippet:
- To identify the email’s code as AMP you must specify ‘⚡4email’ or ‘amp4email’ in the <html> tag.
- The <head> tag must contain the <script> for loading AMP.
- Last, you must also include AMP’s CSS boilerplate. It hides the AMP content until it’s fully loaded in the email.
Don’t be put off by the fact that there is a script within this code. It’s there to help turn the content dynamic. Email providers conduct intense security checks to make sure that only AMP scripts can run within their clients.
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
Try FreeOther ProductsAMP also introduced a variety of new syntax to make their components work. It’s nothing too complicated to get the hang of; but, it’s highly worth it. Let’s go over some elements you can use within your AMP emails below.
At any point, you’re free to use the AMP Playground to test or play around with the AMp framework.
Adding Responsive Images
The <image> tag has been rewritten in AMP emails. The syntax is ‘amp-img’ and it requires that the image specifies the width and height of the image as well as includes a closing tag </amp-img>. AMP email also supports gifs and more on that a bit later.
&lt;amp-img src=&quot;https://link/to/img.jpg&quot;
alt=&quot;photo description&quot;
width=&quot;100&quot;
height=&quot;100&quot;&gt;
&lt;/amp-img&gt;
One important thing to remember is that image URLs must be HTTPS in order to comply with AMP’s security guidelines.
To make your elements responsive, all you have to do is add the ‘layout=“responsive”’ attribute to your element’s code. AMP comes with predefined media queries that will resize your content for you, which they refer to the AMP layout system. This feature itself is going to make coding emails through AMP a lot more appealing.
&lt;amp-img layout=&quot;responsive&quot; src=&quot;https://placekitten.com/800/400&quot; alt=&quot;Welcome&quot; height=&quot;400&quot; width=&quot;800&quot;&gt;&lt;/amp-img&gt;
Using Gif Images
AMP supports email GIFs. They require a specific AMP tag <amp-anim> to enclose the GIF <amp-img> tag. This animation tag has been specifically designed to reduce CPU usage when the gif is off-screen. Similar to the <amp-img>, <amp-anim> needs to have the width and height defined as well as a closing tag. The <amp-anim> tag also supports the AMP layout system for responsive design.
Additionally, AMP recommends using a placeholder <amp-img> within the <amp-anim> tag for when the gif has yet to load.
&lt;amp-anim width=400 height=300 src=&quot;my-gif.gif&quot; layout=&quot;responsive&quot;&gt; &lt;amp-img placeholder width=400 height=300 src=&quot;my-gif-screencap.jpg&quot;&gt; &lt;/amp-img&gt; &lt;/amp-anim&gt;
Adding an Image Carousel
One of the most basic AMP elements is got to be an image carousel. Imagine a slideshow of images and content within an email. How mind-blowingly amazing is that?!
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Try Startup App Try Slides AppOther ProductsIn order to use one in your email, you’d first have to call the carousel script in your email’s <head>.
&lt;head&gt; … &lt;script async custom-element=&quot;amp-carousel&quot; src=&quot;https://cdn.ampproject.org/v0/amp-carousel-0.1.js&quot;&gt;&lt;/script&gt; &lt;/head&gt;
Next, you’d wrap your images in a <amp-carousel> tag as seen below. As you can see, the <amp-carousel> tag have a few attributes, one of which is ‘type.’ The code below features a ‘slides’ type and will render a carousel slideshow.
&lt;amp-carousel id=&quot;carousel-with-preview&quot;
layout=&quot;responsive&quot;
width=&quot;800&quot;
height=&quot;400&quot;
type=&quot;slides&quot;&gt;
&lt;amp-img layout=&quot;fill&quot; src=&quot;https://placekitten.com/800/400&quot; alt=&quot;Welcome&quot; height=&quot;400&quot; width=&quot;800&quot;&gt;&lt;/amp-img&gt;
&lt;amp-img layout=&quot;fill&quot; src=&quot;https://placekitten.com/800/400&quot; alt=&quot;Welcome&quot; height=&quot;400&quot; width=&quot;800&quot;&gt;&lt;/amp-img&gt;
&lt;amp-img layout=&quot;fill&quot; src=&quot;https://placekitten.com/800/400&quot; alt=&quot;Welcome&quot; height=&quot;400&quot; width=&quot;800&quot;&gt;&lt;/amp-img&gt;
&lt;/amp-carousel&gt;
Additional Layout Elements
Before we jump into additional information such as styling, let’s talk about a couple more layout elements that are possible thanks to AMP including accordions and sidebars.
Accordions
<amp-accordion> is another amazing interactive layout element from AMP. It allows you to create and simply collapsible and expandable content sections. Each content section within <amp-accordion> must be defined with <section> tags.
Accordions must contain at least one <section> element as a direct child and each <section> must contain exactly two direct children. The first of which must be a heading element such as <h1>.
Same as using a carousel, you must first add an accordion script to the email’s <head>.
&lt;head&gt; … &lt;script async custom-element=&quot;amp-accordion&quot; src=&quot;https://cdn.ampproject.org/v0/amp-accordion-0.1.js&quot;&gt;&lt;/script&gt; &lt;/head&gt;
Below is an example code of an accordion written with the AMP framework:
&lt;amp-accordion class=&quot;sample&quot;&gt;
&lt;section expanded&gt;
&lt;h4&gt;Section 1&lt;/h4&gt;
&lt;p&gt;Bunch of awesome content.&lt;/p&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;h4&gt;Section 2&lt;/h4&gt;
&lt;div&gt;Bunch of even more awesome content. This time in a &lt;code&gt;&lt;div&gt;&lt;/code&gt;.&lt;/div&gt;
&lt;/section&gt;
&lt;section&gt;
&lt;h4&gt;Section 3&lt;/h4&gt;
&lt;figure&gt;
&lt;amp-img src=&quot;/static/samples/img/clean-1.jpg&quot;
layout=&quot;intrinsic&quot;
width=&quot;400&quot;
height=&quot;710&quot;&gt;&lt;/amp-img&gt;
&lt;figcaption&gt;Images work as well.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/section&gt;
&lt;/amp-accordion&gt;
<amp-sidebar> is a great way to display meta content intended for temporary access such as navigation links, menus, or buttons. A sidebar can be opened or closed through button taps while the main email content remains underneath it. You can use optional attributes such as a child toolbar with media queries, <nav toolbar=”(media query)” toolbar-target=”elementID”>, to show content within the sidebar that’s displayed elsewhere in the email as well.
There are a few important things you must know about the sidebar’s behavior:
- <amp-sidebar> element must be a direct child of the <body> element.
- True to its name a sidebar can only appear on the left or right side of the content.
- All valid HTML elements, supported by AMP, can appear in the <amp-sidebar> element including <amp-accordion>, <amp-img>, <amp-live-list> or <amp-social-share>.
- The default max height of <amp-sidebar> is 100vh with scrolling overflow which can be overridden in CSS. It also has a min-width of 45px, also changeable with CSS.
To use the <amp-sidebar> within your emails’ code, first import the element in the <head>:
&lt;head&gt; … &lt;script async custom-element=&quot;amp-sidebar&quot; src=&quot;https://cdn.ampproject.org/v0/amp-sidebar-0.1.js&quot;&gt;&lt;/script&gt; &lt;/head&gt;
Next, simply enclose your HTML content with the <amp-sidebar> tags.
&lt;amp-sidebar id=&quot;sidebar1&quot; side=&quot;right&quot;&gt;
&lt;ul&gt;
&lt;li&gt;Nav item 1&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#idTwo&quot; on=&quot;tap:idTwo.scrollTo&quot;&gt;Nav item 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Nav item 3&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#idFour&quot; on=&quot;tap:idFour.scrollTo&quot;&gt;Nav item 4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Nav item 5&lt;/li&gt;
&lt;li&gt;Nav item 6&lt;/li&gt;
&lt;/ul&gt;
&lt;/amp-sidebar&gt;
Note that the <amp-sidebar> element comes with a “side” attribute to specify whether it shows up on the ‘left’ or the ‘right’ of the content.
CSS Styling
Another amazing thing about AMP is its capability for CSS customization in the <head> of the email instead of inline. Check out some sample code below:
&lt;head&gt;
…
&lt;style amp-custom&gt;
h1 {
font-family: arial;
margin: 10px;
}
.center {
text-align: center;
}
.carousel-preview {
margin-top: 10px;
}
&lt;/style&gt;
&lt;/head&gt;
CSS Attributes and Pseudo-Classes
Additionally, AMP allows for many previously unusable in email design class attributes or pseudo-classes – especially those previously not customizable through in-line styling such as ‘hover.’ It makes sense; many of these are also required to customize and style the new interactive and dynamic features.
Here is a shortlist of a handful of the newly supported class attributes and pseudo-classes in AMP:
- align-items
- box-shadow
- z-index
- active
- checked
- disabled
- focus
- hover
- nth-child
- required
And, here is the full list: Allowed AMP Components
Dynamic Content
Another powerful feature of the AMP framework is its ability to serve dynamic content on user interactions. For example, showing a product’s availability based on product selection within the email’s content.
<amp-bind> allows you to add custom interactive content and interactions that go well beyond AMP’s pre-built components. You can bind all sorts of things such as text or other materials as well as CSS classes or other element attributes. Check out AMP’s documentation for a full list of examples.
Pairing <amp-bind> with <amp-state> elements with a JSON end-point is how you can leverage the AMP framework to get up-to-date content and data within your AMP emails. The data will be updated only after a user interacts with the content because <amp-bind> statements are not derived on page load.
Although this limits the possible use cases a bit, it does open up a whole new world of possibilities for interactive and dynamic emails that so far have been extremely limiting to static content only.
How to Get Dynamic Content
As you’ve seen a bunch of time already, first you’ve got to setup the <amp-bind> script in the email’s <head>.
&lt;head&gt; … &lt;script async custom-element=&quot;amp-bind&quot; src=&quot;https://cdn.ampproject.org/v0/amp-bind-0.1.js&quot;&gt;&lt;/script&gt; &lt;/head&gt;
Second, make sure to add the <amp-state> tag within your content with a source linked to your JSON file.
To update the content in the below example, we’re using the AMP.setState() action to update the different content states on tap (or click) events.
Finally, you need to define where the content is being displayed from your JSON file within the AMP email content.
In the below example, a user selects a product by clicking on the image after which it’s availability is shown. AMP has a live example of this interaction. You can also copy and paste this code into the AMP Playground to have a go at it yourself.
&lt;div&gt;
&lt;amp-state id=&quot;products&quot;
src=&quot;/static/samples/json/products.json&quot;&gt;&lt;/amp-state&gt;
&lt;amp-img on=&quot;tap:AMP.setState({ productId: 0})&quot;
src=&quot;/static/samples/img/red_apple_1_60x40.jpg&quot;
width=&quot;60&quot;
height=&quot;40&quot;
role=&quot;button&quot;
tabindex=&quot;0&quot;&gt;
&lt;/amp-img&gt;
&lt;amp-img on=&quot;tap:AMP.setState({ productId: 1})&quot;
src=&quot;/static/samples/img/green_apple_1_60x40.jpg&quot;
width=&quot;60&quot;
height=&quot;40&quot;
role=&quot;button&quot;
tabindex=&quot;0&quot;&gt;
&lt;/amp-img&gt;
&lt;amp-img on=&quot;tap:AMP.setState({ productId: 2})&quot;
src=&quot;/static/samples/img/product1_alt1_60x40.jpg&quot;
width=&quot;60&quot;
height=&quot;40&quot;
role=&quot;button&quot;
tabindex=&quot;0&quot;&gt;
&lt;/amp-img&gt;
&lt;div =&quot;products[productId] + ' available'&quot;&gt;Please select a product&lt;/div&gt;
&lt;/div&gt;
Registering to Send AMP Emails
In order to send AMP emails, you must register with Google. It’s not a complicated process, per se, but they do have many requirements; these are in place to ensure that you meet security, privacy, and general guidelines for quality emails.
Already, Google has partnered with Booking.com, Despegar, Doodle, Ecwid, and Freshworks. However, those are mostly promotional. Anyone can sign up to start using the framework, providing they follow the guidelines accurately.
Take a look at the full list of official requirements set by AMP. Some of these requirements include:
- A real, production-ready email example
- No bugs
- The email must be authenticated through SPF, DKIM, and DMARC
- The email must follow AMP best practices and Gmail’s Bulk Sender guidelines
- The account holder must have low spam complaints and a good history of sending high-value emails associated from your domain
Once you’re ready to submit, you can fill out their application form here: Sender Registration – AMP for Email in Gmail.
Below we’re going to cover a few different steps from the above requirement list that will help get yourself whitelisted and accepted for AMP.
1. Select a Proper ESP
If your email service provider doesn’t support AMP, you’re not going to be able to send them. Currently, there are five ESPs that support AMP emails. Unfortunately, if your current ESP isn’t one of those five you’re going to have to switch or wait until your current ESP provides the service.
As of this writing, the five ESPs that support AMP are:
2. Create a Demo Email
One of the most critical aspects of the AMP registration requirements must be the sample email. This makes absolute sense considering this is a new tool that can be abused easily. Taking the time to create a genuine email is not something many spammers are going to follow through on, partly because it takes time and partly because they don’t have legitimate content.
The AMP framework does take a little bit of time to get the hang of. However, you can easily create your sample email in AMP Playground, and quickly, too. My advice is to decide on and gather the content first, then design the email, and finally have it developed. Once finished, copy the email’s source code to submit with your application.
Additionally, note that the “real, production-quality example” email must be sent directly, and not be forwarded, from your production servers.
3. Authenticate Your Email’s SPF and DKIM
AMP is capable of obtaining confidential information from the receiver, which is a potential security issue. For example, when a user fills out a contact form, you’ve sent them. By authenticating your SPF – Sender Policy Framework – and DKIM – DomainKeys Identified Mail – you’re further telling Google that you’re not a spammer or phisher.
What is SPF?
SPF is a list of IP addresses emails can be sent from. It helps validate who send the email and prevents an authorized IP to email your subscribers using AMP. An email from a non-listed IP address will be automatically directed into the spam folder.
To obtain your own verified SPF list, follow the directions outlined by AMP.
What is DKIM?
DKIM is another spam prevention method which allows the email recipient’s email provider to check if the email is authentic. What happens is that DKIM verifies whether email attachments have been tampered with, but also it encodes the email from the sender and then decodes it on the recipient’s end — determining if an email is authentic and not spam is easy because spam emails do not encode in the first place.
While registering with AMP, make sure to register the same email address and domain you’ve been using to email your subscribers.
Again, follow the directions outlined by AMP to authenticate your DKIM.
4. Matching XHRs
XHRs – XMLHttpRequests – must be authenticated to be approved. Whichever email you choose to register for AMP, the XHR requests need to match the domain used in the email in order for it to be authentic and approved by AMP. That’s because the XHRs are responsible for pulling in the dynamic content into the AMP emails.
5. Follow Google’s Gmail Bulk Sender Guidelines
The last thing you should be aware of when it comes to your AMP registration is the Bulk Sender Guidelines. Gmail defines these to help prevent spam for Gmail account holders. These guidelines are pretty standard. However, you must be compliant with them in order to get approved and whitelisted for AMP.
Which Email Clients Support AMP?
As of this writing, four email clients support AMP emails:
- Gmail
- Yahoo! Mail
- Outlook
- mail.ru
However, efforts are being made to adopt AMP support in other major clients.
Enable AMP emails in Gmail
In order for you to receive dynamic emails, you must enable this in Gmail’s settings first. Unfortunately, it’s turned off by default. Fortunately, it’s easy to change this setting.
Related: Try free the Postcards email builder – Create beautiful emails online.
Log into your Gmail account and go to your settings. Under the General Tab, scroll down to Dynamic emails and check the ‘Enable dynamic email’ option. Then save.
Here you can also find the Developer Setting, which allows you to display dynamic emails during development. You can only add a single email at a time. It’s great for testing email campaigns to make sure you’ve set them up correctly or to enable while your learning, playing around and testing your initial AMP emails.
Conclusion
The AMP for emails framework is the first step in revolutionizing how we go about designing and creating emails. It’s a wonderful framework that gives us a whole new world of creative possibilities for interactive, optimized, and attention-grabbing emails. We’re curious what you think about the framework and its capabilities!
Do you plan on registering for AMP emails to start using this framework? Let us know in the comments.
