Creating Interactive, Highly Optimized Amp Emails

Google’s AMP 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.

AMP 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 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.

For the email to qualify as AMP, it has to have the minimum code structure below. It’s the base code.

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.

AMP 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.

The <image> tag has been rewritten in AMP. 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 also supports gifs and more on that a bit later.

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.

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.

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?!

In order to use one in your email, you’d first have to call the carousel script in your email’s <head>.

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.

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.

<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>.

Below is an example code of an accordion written with the AMP framework:

<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.