Introducing the Gmail Developer Preview of AMP in Email

Posted by Raymond Wainman, Software Engineer, Gmail

You may have heard of the open-source framework, Accelerated Mobile Pages (AMP). It’s a framework for developers to create faster-loading mobile content on the web. Beyond simply loading pages faster, AMP now supports building a wide range of rich pages for the web. Today, we’re announcing AMP for Email so that emails can be formatted and sent as AMP documents. As a part of this, we’re also kicking off the Gmail Developer Preview of AMP for Email—so once you’ve built your emails, you’ll be able to test them in Gmail.

AMP for Email opens up several new possibilities:
  • Design interactive components for email using a large library of supported AMP components like amp-carousel, amp-form, amp-bind, amp-list and more
  • Help your content stay up-to-date and interactive for your users.
  • Create more engaging and actionable email experiences
Here’s an example:
Brows and save your favorite items in Pinterest


<!doctype html>
<html ⚡4email>
<head>
 <meta charset="utf-8">
 <script async src="https://cdn.ampproject.org/v0.js">&lt'/script>
 <!-- The AMP4email boilerplate. -->
 <style amp4email-boilerplate>body{visibility:hidden}</style>
 <script async custom-element="amp-carousel"    src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
 <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
 <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
 <style amp-custom> html{font-family: 'Roboto';}
 ...
 </style>
</head>
<body>
 <h2>Hello dear user,</h2>
 <div class="photo-gallery">
   <div class="text">Photos from your latest trips:
     <span [text]="+selectedSlide + 1">1</span>/4</div>
   <amp-selector layout="container" name="carousel-selector"...>
     <amp-carousel controls width="430" height="80">
       <amp-img ...></amp-img>
   ...
     </amp-carousel>
   </amp-selector>
   <amp-carousel ...>
     <amp-img ...></amp-img>
    ...
   </amp-carousel>
   <div class="trip-location">Please rate your trip location:</div>
   <form id="rating" class="p2" method="post" ...>
   <fieldset class="rating">
     <input name="rating" type="radio" id="rating1" value="1" .../>
     <label for="rating1" title="1 stars">★</label>
     ...
   </fieldset>
   <div submit-success>
     <template type="amp-mustache">
       <div class="text">Thanks for rating {{rating}} star(s)!</div>
     </template>
   </div>
   </form>
 </div>
</body>
</html>
[Full example in AmpByExample’s Playground]

The AMP for Email spec is available today and will be supported in Gmail later this year. To get preview access to how Gmail will support AMP for Email, sign up here. Since it’s an open spec, we look forward to seeing other email clients adopt it, too.