Del Blog de desarrolladores de G Suite

Quizá hayas oído hablar del marco de trabajo de código abierto de Accelerated Mobile Pages (AMP). Es un marco de trabajo para programadores que les permite crear contenido móvil de carga más rápida en la Web. Además de simplemente cargar páginas más rápido, AMP ahora admite la compilación de una amplia variedad de páginas enriquecidas para la Web. Hoy anunciamos AMP para correo electrónico, con lo cual los correos electrónicos podrán tener el formato y enviarse como documentos de AMP. Como parte de esto, también lanzaremos la versión preliminar para programadores de Gmail de AMP para correo electrónico; por lo tanto, cuando termines de compilar tus correos electrónicos, podrás probarlos en Gmail.

AMP para correo electrónico abre varias posibilidades nuevas:
  • Diseñar componentes interactivos para correo electrónico usando una extensa biblioteca de componentes de AMP compatibles, como amp-carousel, amp-form, amp-bind, amp-list, entre otros
  • Mantener tu contenido actualizado e interactivo para los usuarios
  • Crear una mayor cantidad de experiencias de correo electrónico más atractivas y accionables
Explora y guarda tus elementos favoritos en Pinterest.
Un ejemplo:


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

La especificación de AMP para correo electrónico está disponible hoy y será compatible con Gmail más adelante durante el año. Para obtener acceso a la versión preliminar e informarte sobre cómo Gmail admitirá AMP para correo electrónico, regístrate aquí. Debido a que se trata de una especificación abierta, esperamos que otros clientes de correo electrónico también la adopten.