Design Structure Templates How-to
~ 12 min read
298 views
rate it
7 days ago

How to Build AMP Emails with Stripo

Stripo / Blog / How to Build AMP Emails with Stripo

Wanna keep up with the times and send AMP-powered emails over to your recipients?

Stripo How to Build AMP Emails with Stripo_Example of AMP Email

Gmail in its AMP emails guidelines specified that when building such emails, you will need to add some code elements to email header and to its doctype! Stripo does it all for you — no coding skills needed at all.

Google also offers its Gmail AMP for Email Playground where you can code AMP emails from header to footer. But the emails you build with it, render in the Gmail’s desktop clients only. Eventually, Yahoo, Outlook.com, Mail.ru will also support AMP for emails. But what about the rest of your customers?

Today, we’re gonna show you how to build AMP emails with Stripo that render correctly in all email clients.

Let us remind you that in order to be allowed to send out AMP emails, you need to get registered with Google. In the previous post, we shared our personal experience on how we got whitelisted with Google.

How to build AMP-powered email with Stripo

This way requires just a few steps:

Step 1. Build a traditional HTML email template.

To do so, you may either build one from scratch by dragging blocks, or you may use any of our 300 ready-to-use email templates

Step 2. Build AMP element with Gmail AMP for Email Playground.

Google offers 10 prepared AMP elements:

  1. AMP-list;

  2. AMP-list#2;

  3. AMP-bind#1;

  4. AMP-bind#2;

  5. AMP-form;

  6. AMP-accordion;

  7. AMP-anim;

  8. AMP-carousel;

  9. AMP-fit-text;

  10. AMP-timeago.

We’re going to use the AMP-carousel element.

  • in the Gmail playground, click the dropdown menu to choose AMP-carousel;

  • once you’ve clicked it, to the left in the code editor, you will see the AMP-carousel code. Find the following line in the code:

<amp-img src="https://www.google.com/images/background/p1.jpg" width="800" height="600" layout="responsive"></amp-img>” line and remove it, as it just specifies the source of the images used below
  • now, in this code sample, please edit the image width, that was set by default, from 800 to 600 pixels as this is the most common width size;

  • change the height from 600 to 480 pixels to save the image ratio;

Stripo How to Build AMP-emails with Stripo Setting the AMP Carousel Image Size

  • now, replace all the links wrapped in the <href> attributes with the links to the necessary images you host on your website or any other image hosting site;

Stripo How to Build AMP-Emails with Stripo_Replacing the Links to Images with Proper Ones

  • highlight and copy the embed code with 4 images in AMP-image carousel;

<div class="images">

    <amp-carousel width="600" height="480" layout="responsive" type="slides">

       <amp-img src="https://image.freepik.com/free-photo/school-backpack-school-supplies-with-chalkboard-background_53476-528.jpg" width="600" height="480" alt="a sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/stylish-teenage-workspace-with-yellow-backpack-reading-lamp_23-2147878350.jpg" width="600" height="480" alt="another sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/father-leads-little-child-school-boy-go-hand-hand-parent-son-with-backpack-back_90791-15.jpg" width="600" height="480" alt="and another sample image"></amp-img>

       <amp-img src="https://image.freepik.com/free-photo/rear-view-group-diverse-kids-wearing-backpack_53876-75383.jpg" width="600" height="480" alt="and another sample image"></amp-img>

   </amp-carousel>

</div>

Step 3. Paste the embed code in Stripo

In Stripo, drag the 1-column structure in your prepared template;

  • in the setting panel, in the “include in” section, set “⚡HTML”;

Stripo How to Build AMP-Emails with Stripo_Hiding AMP Elements for Other Recipients

This means that AMP image carousel will be shown only in those email clients that support AMP;

  • drop the HTML block in it;

  • double click it to open the “HTML code editor”;

  • replace the “Insert your HTML code” with the embed code;

  • in Google Gmail Playground, copy the script that specifies what AMP element you’re about to use. It’s located in email head below the <style> attributes before the closing</head> tag;

Stripo Building AMP Emails with Google Playground_Script

  • if you, like us, are going to use AMP-carousel, here’s the script to embed:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  • open HTML code editor of entire email template by clicking the “Code Editor” button above the template;

  • insert the embed script right above the closing </head> attribute;

Stripo How to Build AMP-Emails with Stripo_Inserting the Embed Script

  • close the code editor. Done!

Those recipients whose email clients support AMP, will see this AMP image carousel, while other — will not. Hence, we need to create a perfect banner for them, too, as a fallback.

To do so, you need to:

  • drag the one-column structure into your template;

  • in the settings panel in the “Include in” section, choose the “HTML” version of your email — by doing this, your banner will be enabled only to those recipients, whose email clients do not support AMP;

Stripo How to Build AMP-Emails with Stripo Enabling Banners to Those Users Who Can See Only HTML Emails

In the Stripo editor, you can easily see what elements are enabled for the traditional HTML version of your email, what elements are enabled for the AMP HTML version of your email, and which will be shown in both versions.

Stripo How to Build AMP-Emails with StripoShowing andHiding Elements for Emails

The containers/elements marked with “HTML” will be shown only to those recipients whose email clients do not support AMP for Emails. While the ⚡HTML elements will be shown only to those recipients whose email clients do support AMP.

Elements/containers that have no marks, will work in the both versions of the email.

Now that your AMP email is built, you need to preview it.

How to preview AMP emails with Stripo

This is a very essential step at building any kind of emails: AMP HTML or traditional HTML emails.

  • to preview AMP HTML email with Stripo, click the preview button above the template;

Stripo How to Build AMP Emails with Stripo_Previewing Emails

  • in the settings panel in the preview email mode, click the necessary version of your email;

Stripo How to Build AMP Emails with Stripo_Previewing AMP Emails

  • to check out the other version of your email, just switch to another version of email.

Important to note:

Please, be advised, that AMP elements do not work on mobile devices. All recipients will see the traditional HTML email version when seeing the email on their mobiles.

Once you’ve previewed your email, we strongly recommend that you test your email. Our embedded testing tool will test only the traditional HTML version of your email.

As for the AMP version of your email, you may rest assured if you used the code.

How to export AMP email to your ESP

Currently, only 4 ESPs support AMP for Emails:

  1. eSputnik — via the API method only. The SMTP method will be added soon;
  2. Amazon SES and PinPoint — via the API method only;
  3. SparkPost — via the SMTP and API methods;
  4. SendGrid — via the API method only.

You cannot export AMP emails from Stripo to any of the aforementioned ESPs. But you can download your email as AMP HTML file and import it into the necessary ESP.

So, how to export your AMP email from Stripo:

  • click the “Export button”;

  • among the multiple options, select “AMPHTML”;

Stripo_How to Build AMP Emails with Stripo_The Export Options

  • in the pop-up window, click the “HTML-file” button. Then, all images will be hosted on our servers;

Stripo_How to Build AMP Emails with Stripo_Downloading as HTML-file

  • in your ESP, open the "code your own email" section;
  • drag the downloaded AMP HTML file in this section;
  • done!

We want to remind you that prior to sending AMP emails out to recipients, you need to get whitelisted with Google.

Try building AMP emails with Stripo right away!

Be always wide awake in recent email marketing news, guides, articles and how-to’s