Different Ways to Build AMP Emails

Different ways to build AMP emails

Hanna Kuznietsova

• 5 min read

This week's guest author is Hanna Kuznietsova, and she is the chief content officer at Stripo.email. Working with email is one of Hanna’s passions; she loves analyzing email and conducts research to write about the latest trends in email marketing on the Stripo.email blog.

Have you seen the agenda of different upcoming conferences like the Chicago Digital Summit? A fair amount of discussion is being dedicated to AMP emails and how dynamic emails will affect email marketing moving forward. All this to say, plenty of senders are starting to consider adding AMP emails to their marketing email campaigns. However, getting started takes a little bit of email know-how.

So, how do you start sending AMP emails?

In one of Mailgun’s recent posts, they explained what this new MIME-type is and informed you that Mailgun now supports AMP for email via SMTP and API. With all of this in mind, there is only one component left: building AMP emails. Some people think that this step of the process is arduous and time-consuming, but we promise it’s pretty painless.

How to design an AMP email in Mailgun

First off, we need to tell you that no matter what AMP element you are going to build for your newsletters, all AMP emails have a set of mandatory code elements you need to add to email code.

The set of mandatory elements for AMP emails:

The <html ⚡4email> tag should be added to the Doctype line;
The charset type <meta charset="utf-8"> needs to be specified in the “head” of your emails right after the <head> attribute;
This script <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> will upload your AMP content once email is opened. Where “AMP-carousel” stands for the type of AMP content.
The element <style amp4email-boilerplate>body{visibility:hidden}</style> should be also placed in email’s “head”. Due to this piece of code, your email is visible only in those email clients which support AMP, and is hidden there where AMP is not supported. This provides your recipients with only high-quality content — no broken layouts.

So, the code of your AMP email’s head will look like this:

(source: Gmail AMP for Email Playground)

All AMP components and their styles are to have the <amp> attributes across entire email code.
Fallback — is the alternative to AMP elements, written in traditional HTML. If your recipients’ email client supports AMP, then they will see the AMPHMTL version of your newsletter. However, if their email client does not support AMP, then recipients will see the fallback which renders correctly across nearly all email clients.

If you’re curious as to what we mean, here is an example of both an AMP email, and its fallback:

Here’s what those users whose email clients support AMP will see

Here’s what those users whose email clients do not support AMP will see

Different ways of building AMP emails

There are three major ways of building AMP emails:

Coding – You code them totally on your own, which can be a bit of a pain if you don’t have the skills needed to craft beautiful email templates. You can code them with Notepad or any other word editor. If you prefer this way over others, then remember to validate your emails with Google.
Using Gmail’s AMP samples – This is where Gmail’s AMP for Email Playground comes into play. Google provides numerous AMP-elements such as accordion, lightbox effect, image carousel (aka slider), and many other elements that you can use in your email designs. It’s worth noting that with the playground, there is minimal coding required — just replace the sample content with your own. You build these AMP elements here, copy the code, and then paste it in your HTML email template.
Building AMP emails with Stripo - AMP email templates, with AMP elements and fallbacks rolled up together for ease of use. If you would rather take some amp elements from Google playground, you can do that with their HTML code editor as well. Stripo also has a drag-n-drop block feature for those of you would rather visually edit your templates instead of coding. Should you be interested in going this route, you can learn more about Stripo building emails with Stripo here.

How to import Stripo’s AMP emails to Mailgun

If you decide to take the Stripo route, you will have to import your designs into Mailgun. Prior to exporting and sending your emails to anybody, preview them! You should be doing this for any email, not just AMP emails, to be sure that your templates are responsive and look good in any inbox and browser.

You can preview either the AMPHTML or the traditional HTML in Stripo, so be sure both versions look nice before you export. Now, let’s get exporting!

From Stripo, click the export button.
In the new pop-up window, select the AMPHTML option. This way you will download the entire code of your email.
Open this file with any code or text editing tool, like Notepad, Sublime, or Atom. Once you do that, copy the code to your clipboard.
Login to Mailgun and open the “Templates” section
Click the “Create message template” button.
Paste your code and then your email is ready to go!

Note: Currently, it is not possible to provide you with AMP email preview in Mailgun.

Wrapping up

What’s great about AMP right now is that new features and news are coming out about it each day. For one, Google docs now supports AMP for email, so you can reply to comments on documents directly from your inbox. What’s more, is that Android and iOS are planning to launch support for Gmail AMP messages as well!

Overall, AMP is becoming a huge feature of email marketing, and will only grow in the months and years to come. Emails are becoming more functional, allowing users to do everything in one place, and what’s not to love about that?

What's new

Announcing InboxReady: The deliverability suite you need to hit the inbox

Mailgun Team

• 5 min read