Marketing Templates How-to
~ 9 min read
2 comments
1792 views
rate it
22 November

AMP Emails in Gmail Now Supported by Android and iOS

Stripo / Blog / AMP Emails in Gmail Now Supported by Android and iOS

Great news, everyone!

On November 21, Gmail started rolling out the support of dynamic emails in the Gmail app on Android and iOS. The functionality is expected to be available for all users in like 15 days.

You will not have to do anything to see AMP emails in your inboxes on mobile devices as dynamic emails are turned on by default for all Gmail users, including G-Suite.

A little excursion into the history of AMP for Email

In March 2019, Google rolled out its AMP for email. And on July 2, it went available for all Gmail users, including G-Suite.

In the beginning, the AMP for Email technology was supported by Gmail and Mail.ru on desktop devices. On September 6, Outlook rolled out its dev preview.

Yahoo and AOL are planning on supporting AMP soon.

Initially, AMP was about to render on desktop devices only.

But about two weeks ago Gmail rolled the beta version of AMP for Email on Mobile devices. It is supported by both Android and iOS.

And on November, 21 it went public.

How AMP for email renders on mobile devices now

When Gmail announced that we could join the beta channel for testing AMP emails on mobiles, we all rushed to do it. 

So, we tested 7 major AMP layouts and shared our feedback and results with the Gmail team. You can do the same, btw ;) Google is now open to comments.

1. AMP accordion

This is the AMP template we used for our test. You can see its code in our demo editor, plus you can use it for your tests.

Accordion allows you to make emails concise and prevents customers from bothersome scrolling as you “hide” content into collapsible sections. Customers need to click on a necessary section name to see its content. 

No matter if this is our Drag-n-Drop AMP-accordion block, or you embed a custom code that you’ve built with Google playground, AMP accordion rendered well both on iOS, and Android.

AMP Emails_Accordion_Non-Expanded Section(1)

(AMP accordion with non-expanded sections. Gmail on Android)

AMP Emails on Mobiles_Accordion_Expanded Section(1)

(AMP accordion with an expanded section. Gmail on Android)

Problems detected:

None — AMP accordion worked well on iOS and Android.

2. AMP carousel

This time we used two templates for our tests:

  1. the one with preview images;

  2. the one without preview images.

You can see their codes in our demo editor, plus you can use these templates for your tests.

Image carousel prevents from bothersome scrolling and enables an email marketer to place a number of banners in one screen.

Problems detected:

No matter if you build an AMP image carousel with Stripo or build one with Google Playground, they both render on iOS, and Android with some slight issues.

  • Gmail on Android:

The navigation arrows appear only when email is being loaded, once it gets fully loaded — the “arrows” just disappear. It happens because the attribute controls get hidden on touchscreen devices by default.

I tried to swipe/slide the images — it did not work.

AMP_Image Carousel with Preview (1)

However, the preview images were clickable and worked pretty well.

  • Gmail in iOS

The navigation arrows do appear during the email loading process, then they disappear. Again, it happens because the attribute controls get hidden on touchscreen devices.

AMP Carousel_Loading Process_with Arrows

(Navigation arrows appear at the email loading process)

AMP Carousel When Loaded

(Navigation arrows disappear once the email gets fully loaded)

The situation with “swiping” images slightly differs — I could swipe images, however, they were sometimes “blinking” when being swiped.

Please watch our screencast to see how images "blink" when being swiped.

Solution:

Google is, of course, aware of the problem with disappearing "arrows". You can see the discussion here.

At the end of November, Srtipo will update our "AMP image carousel" block — this "controls" attribute will be added automatically to all carousels that you build with us by using the aforementioned block. 

But now there are two ways to "overcome" this issue:

a) enable the “display preview” when building AMP carousel — as we said above, preview images are clickable;

Preview Images for AMP Carousel

b) manually add "controls" in the AMP carousel code.

Once you finish building the AMP carousel with Stripo, you will need to:

  • click your AMP carousel in the template;
  • open code editor;
  • the code element that goes after class= replace with this code sample "esd-block-html esdev-disable-select";
  • add "controls" before "width";

Activating Arrows for Mobile Devices_AMP Emails

  • done!

Important:

Once you do this, your AMP carousel will not be visible in the "working area". You will be able to see it in the Preview mode only.

3. AMP lightbox effect

The lightbox effect allows zooming in a particular element of the email. We applied it to images.

Our test showed that the lightbox effect works pretty well both on Android, and iOS if the email is SHORT.

AMP_Lightbox_Expanded Photo (1)

(Gmail on Android, lightbox effect, a zoomed-in photo)

But if you build a regular promo email, you will face some difficulties with the Lightbox effect.

Problems detected:

The image upon a click gets zoomed in somewhere in the middle of the email lengthwise. The rest of the screen gets black.

LightBox Effect_AMP_Android_Gmail

(I scrolled down to find the zoomed-in image)

How are your customers supposed to know they need to scroll down to see the image?

Solution:

We recommend that you do not use this effect as Gmail decided to disable this component.

4. AMP sidebar

The sidebar is a collapsible navigation menu that gets opened on the left of the screen.

It saves precious space in emails, does not annoy recipients as they can “close” it whenever they want and it navigates your subscribers exactly where they want.

For our test, we used the sidebar code that Google offers on its AMP for Email page. The test showed that the sidebar works well both on Android, and iOS with a slight difference. It is important to mention that we did not apply any styles to the sidebar. We just pasted links (but you can apply styles if you like):

  • Gmail on Android

On this OS, the links got green.

AMP_SideBar_Expanded

  • Gmail in iOS

On iOS, the links got blue.

AMP_Sidebar on iOS

We checked — all these links worked. And the sidebar would close if you click the “close” button.

Problems detected:

None. The sidebar worked well across iOS and Android. 

5. AMP form

This is the template we used for our test, added the mock “endpoint” in it with our Mock Server to check if our form really works and is capable of “posting” feedback to a real server. You can also try it. 

Forms allow you to gather feedback from customers directly in emails. 

I love it :)

It worked! It worked on iOS and Android. 

We checked — “answers” were delivered to our Mock server :)
Yet, we noticed a slight difference, when I gave “five” / rated and left a comment, and then clicked on “Send Feedback”:

  • Gmail on Android

The form said “Thank you for your opinion, yet I was still able to see my “grade” and my comment.

AMP Form on Gmail

  • Gmail on iOS

It does not make much of a difference, but on iOS, my feedback disappeared. Yet, I could still see the “Thank you” part.

AMP_Form_Gmail on iOS

Problems detected:

None. This form worked pretty well across these two OSs which is really great :)

6. AMP selector

This is the AMP template we used for our test. You can see its code.

The selector allows your customers to choose apparel colors, stuffing, etc. directly in emails.

This prevents you from the necessity to include all your rich assortment in one email and from placing numerous product cards in your promo.

It worked well both on Android and iOS.

AMP Selector_iOS

(AMP selector on iOS)

Problems detected:

None.

But it is important to mention that, currently Gmail does not allow attribute selectors. But very soon they will be supported by Gmail.

7. AMP-list

Lists are meant to help us provide our users with fresh content — all information gets updated the moment customers click on the "View more" / "View recent" button, etc.

This is the template we used for our test.

This is how my email looked on desktop:

AMP_List_Web Version

Problems detected:

There were some. Though, in general it works well on mobile devices and very well on desktops.

  • Gmail on Android

The button was active, the content was updated upon every click. But the button was not center-aligned.

AMP_Live List_Android

  • Gmail on iOS

Same here — the content would get updated when I clicked on the button. But the button design got a little bit broken.

Button on iOS_Gmail

Solution:

Gmail does not recognize "input type = submit" for buttons.
Here's what we did to our button design:

  • we replaced "input type" with the "button type";
  • added the closing button tag at the end of the code sample </button>;
  • removed the "value" part which contained the button label of the email;
  • put the "label button" before the closing tag.

Here's the code we used when designing our button:

<button type="submit" name="add-to-cart" style="outline:none;text-decoration:none;font-family:arial, 'helvetica neue', helvetica, sans-serif;font-size:18px;color:#FFFFFF;border-style:solid;border-color:#34265f;border-width:12px 40px;display:inline-block;background: none 0% 0% repeat scroll #34265f; border-color: #34265f; border-radius: 30px;font-weight:normal;font-style:normal;line-height:22px;width:auto;text-align:center;cursor:pointer;" role="button" tabindex="4" on="tap:AMP.setState({showArticles: '1'})">View actual posts</button>

Now, even on iOS our email works well and looks exactly as we wanted it to.

iOS_Updated Button_Gmail Live-List

How do you test AMP emails on mobiles?

There are three ways to do it: 1) sending them via your ESP if your email address is whitelisted with Google, 2) adding our email address which we use to send test emails from as a trusted sender to your Gmail account, or 3) sending them from Google Playground (amp@gmail.dev).

Important to note:

Before the feature FULL visibility, you need to get registered with Google as a person who is willing to test and receive AMP emails on mobiles, in other words, to get permission to see AMP emails on mobile devices.

Remember to "tick" dynamic emails right on your phone. Please be advised that you cannot enter trusted senders on mobile devices — you can do it on desktop devices only. 

AMP_Enabling Dynamic Emails on Mobile Devices

Getting permission from Google

Now we may proceed to getting Google's permission.

This is very easy. You just need to:

  • go to this page;

  • click the “navigate to” link to join the “developers group;

  • in a new tab, enter your email address which you are going to use for tests — for this purpose, you must be logged in with Google by using this account;

  • click “Join the group”;

  • within 24-48 hours Gmail will give you access for testing AMP emails on mobile devices.

Important to note:

Do not wait for a notification. There won’t be any. Just check after 24-48 hours if your account has been added to the "developers' group".

Adding Stripo as a trusted sender

We already described in one of our posts how you can add Stripo as a trusted sender to your Gmail account.

It is required to send emails to your mobile devices from test accounts.

So, how to add Stripo as a trusted sender to your Gmail account:

  • open Gmail on the desktop;

  • go to the settings;

  • in a dropdown menu, select “Settings”;

Building-AMP-Emails-with-Stripo_Settings-in-Gmail

  • tick “Dynamic emails”;

Building-AMP-Emails_Enabling-Dynamic-Content-for-Gmail

  • click the “Developer settings” section to be able to see AMP emails ;

  • tick the “Allow dynamic emails from amp@gmail.dev” to be able to receive AMP emails from Google Playground as well;

  • enter our email address info@stripo-test.email ;

Adding Stripo As Trusted Sender

By doing this, you allow us and Google to send dynamic emails to you.

  • click “Save”.

Sending AMP emails from Google Playground

Google Playground allows building, validating and testing AMP emails. It sends test emails from amp@gmail.dev. 

To be able to receive AMP emails from the aforementioned email address, you need to tick the "Always allow dynamic emails from amp@gmail.dev " box.

We described all the necessary steps in the previous paragraph.

Important: all these email settings can be done on desktops only. They are immediately applied to mobile devices. 

But remember to refresh your Gmail page on mobiles ;) Log out and then log in again.

Which versions of Android and iOS support AMP 

Android — 5.01, and higher.

 iOS —  OS 6 and higher.

What other email clients support AMP on mobiles

Mail.ru does support AMP on mobile devices. Mail.ru states that only desktop Octavius and mobile apps display AMP.

Both the desktop and mobile versions of this email client do support AMP.

Final thoughts

If the AMP feature is not visible for you yet, you can join the beta channel for testing AMP emails in Gmail on Android and iOS.

In like 15 days from November 21, as per to Google announcement, it will go public and will work across all Gmail accounts on the aforementioned OSs by default.

Do not hesitate to build AMP emails as more and more email clients and apps now support this feature.

Harald Walker 1 week ago

The data-next-button-aria-label and data-prev-button-aria-label attributes of amp-carousel also don't seem to work in Gmail (desktop). It keeps displaying the default text.

Hanna Kuznietsova commented to Harald Walker 1 week ago

Harald, Thank you so much for your comment. Right, these attributes are removed by Gmail. This is a very important thing to know. When writing this post, we tested only basic layouts but did not test all possible attributes. There's whole lot of them :) Once again, thank you very much

You might be interested in

← previous next →
Dark Mode_Featured Image
2 days ago · 9 min read
Dark Mode for Emails: What It Is & How to Optimize Emails

While designers and researchers widely discuss whether dark mode for email is healthy and necessary, people keep using it more and more. What is dark mode? The dark mode displays light-colored texts, icons, and UI elements on dark backgrounds.  How does it work? Some believe that dark mode shifts colors to contrast ones (opposite ones from the color wheel) when an email is opened on a device with the dark mode. But this is not quite true. It does not...

Design Templates How-to
Stripo How to Build an Email with Stripo Featured Image
4 days ago · 47 min read
How to build an email with Stripo. Manual A to Z

This blog post was originally written on April 24, updated December 5, 2019. Recently we published blog posts on hottest email design trends for 2019 and how to make your first email campaign, where, in a nutshell, we showed what elements an email should contain. In this post, we are going to deepen in the details to show how to create your first email with the Stripo email template builder. Ways to start building an email There are three ways...

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