AMP

AMP for Email Fundamentals

If you're familiar with AMP, great news! AMP for Emails is just a subset of the AMP HTML library. If you're unfamiliar with AMP, also great news! This guide will give you everything you need to know to get started writing valid AMP Emails!

Required Markup

AMP Emails look like classic HTML emails, but with a few differences. Below is the minimum amount of markup required to make an email a valid AMP email.

<!doctype html>
<html 4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>

Email providers who support AMP Emails have set up security checks to ensure users get a delightful and safe experience. An email build with AMP must meet all requirements:

  • Start with the <!doctype html> doctype. This is also standard for HTML.
  • Contain a top-level a <html amp4email> tag, or an <html ⚡4email> tag if your email is extra cool. This identifies the document as an AMP Email so it can be treated as such.
  • Define both <head> and <body> tags. This is optional in HTML, but AMP keeps things pristine!
  • Include a <meta charset="utf-8> tag as the first child of the <head> tag. This identifies the encoding for the page.
  • The AMP library is imported through a <script async src="https://cdn.ampproject.org/v0.js"></script> tag placed in the <head>. Without it, none of the awesome and dynamic functionality gained through AMP will work! As a best practice, this should be included as early as possible in the <head>, directly under the <meta charset="utf-8"> tag.
  • Initially hide the email content until the AMP library is loaded by placing the AMP for Email boilerplate in the <head>.
<head>
...
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>

AMP Specific Tag Replacements

Since the AMP for Email library is a subset of the AMP HTML library, many of the same rules apply; AMP specific tags replace resource heavy HTML tags and require a defined width and height. This allows the AMP boilerplate to hide content until it has an idea of how it looks on the user's device.

Images

To paint the page effectively, all <img> tags are replaced with <amp-img>. The <amp-img> tag requires a defined width and height and supports [AMP's layout system] (/ru/documentation/guides-and-tutorials/learn/amp-html-layout/)

<amp-img src="https://link/to/img.jpg" 
    width="100" 
    height="100" 
    layout="responsive">
</amp-img>

The <amp-img> tag comes with powerful, built-in ways to control responsive design and set fallbacks.

Read more about using the AMP layout and media queries and how to set image fallbacks.

GIFs

AMP has created <amp-anim>, a specific tag for GIF images that allows the AMP runtime to reduce CPU usage when the animation is off-screen. Similar to <amp-img> the width and height is defined and the element must include a closing tag.

<amp-anim 
    width="400" 
    height="300" 
    src="my-gif.gif">
</amp-anim>

Additionally, it supports an optional placeholder child to display while the src file is loading, and supports the AMP layout system.

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

Emails, with style

Like all email clients, AMP allows for inline style attributes, but also supports CSS within the <style amp-custom> tag inside the head of the email.

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

AMP enforces a size limit of 50,000 bytes for styling.

Allowed AMP Components

The dynamic, visual, and interactivity features of AMP components is what takes AMP Emails into the future of email. The AMP Email components sub-sect is divided into dynamic content and layout elements.

Dynamic Content

ELEMENTDESCRIPTION
[amp-form](/ru/documentation/components/amp-form/?format=email)Form element. The action-xhr attribute must be used in place of the regular action attribute. Can be used in conjunction with [<template type="amp-mustache">](/ru/documentation/components/amp-mustache/?format=email) to render a response.
[amp-selector](/ru/documentation/components/amp-selector/?format=email)Represents a control that presents a menu of options and lets the user choose from it.
[amp-bind](/ru/documentation/components/amp-bind/?format=email) and amp-stateSimple scripting language in AMP that allows the manipulation of a state machine for interactions between elements. Can also be used to add behavior on certain events. amp-state is used to remotely fetch the initial state machine values. Note: It is prohibited to bind to [href] or [src]. It is also prohibited to use the AMP.print, AMP.navigateTo and AMP.goBack actions.
[amp-list](/ru/documentation/components/amp-list/?format=email)Remotely fetches JSON data that will be rendered by an [<amp-mustache>](/ru/documentation/components/amp-mustache/?format=email). Note: Binding to the [src] attribute is not allowed. Including user credentials with credentials="include" is also prohibited.
[<template type="amp-mustache">](/ru/documentation/components/amp-mustache/?format=email)A Mustache template markup to render the results of an amp-list call and the <div submit-success> and <div submit-error> of amp-form.

Layout Elements

ELEMENTDESCRIPTION
[amp-accordion](/ru/documentation/components/amp-accordion/?format=email)A UI element that facilitates showing/hiding different sections.
[amp-carousel](/ru/documentation/components/amp-carousel/?format=email)A carousel UI component.
[amp-sidebar](/ru/documentation/components/amp-sidebar/?format=email)A sidebar for navigational purposes.
[amp-image-lightbox](/ru/documentation/components/amp-image-lightbox/?format=email)A lightbox for containing images.
[amp-lightbox](/ru/documentation/components/amp-lightbox/?format=email)A lightbox for containing content.
[amp-fit-text](/ru/documentation/components/amp-fit-text/?format=email)A helper component for fitting text within a certain area.
[amp-timeago](/ru/documentation/components/amp-timeago/?format=email)Provides a convenient way of rendering timestamps.