AMP for Email best practices

AMP allows for exciting new types of immersive and engaging content in email! When designing emails, keep in mind the following best practices to ensure they are performant, reliable across platforms, and work as your users expect.

Speed

When using amp-list to dynamically fetch content, include a placeholder to keep the integrity of the components structure. The placeholder should be as similar in layout as possible to the document after it's returned the requested data. This ensures the message size isn't changing or mutating the layout significantly.

Usability and accessibility

• When using amp-carousel, ensure the controls attribute is set. This lets users on touchscreen devices such as smartphones to navigate the carousel.
• When using amp-form, keep in mind not all input types are supported on iOS. Refer to Supported Input Values in the Safari HTML Reference for more information.
• Not all autocomplete attribute values are supported across different apps and browsers. Assume that autocomplete isn't available to your users and keep the forms short.

Styling

• Make sure your email is only using AMP for Email Supported CSS
• Avoid using viewport units (vw, vh, vmin and vmax) anywhere in your CSS and HTML. Since AMP emails render inside an iframe, the viewport of the email doesn't match the browser's viewport.
• Different browsers have different default CSS styling. Use a CSS library that normalizes styles if needed. For more information about default styles, style normalization and a list of available libaries, see Reboot, Resets, and Reasoning.
• Be careful with overflowing margin in CSS: they may not get rendered due to an AMP layout limitation.

Mobile

Ensure your message looks good on all screen sizes by using CSS media queries to identify the device. Messages should be tested on mobile devices to ensure the layout is correct and components work as expected.

Other Gotchas

When working AMP for Email, keep in mind the following tips and tricks:

• The AMP for Email playground doesn't proxy XHRs, but some email providers do.
• The AMP MIME part should appear before the HTML MIME part in your email to ensure maximum compatibility across email clients.
• The src attribute of amp-list, action-xhr of amp-form, the src for amp-img, or the href attribute of an <a> tag cannot be mutated by amp-bind.
• Your messages should include a static HTML version in the event that a user is taken to the HTML version of the message, or if that user forwards the message.
• The AMP for Email format imposes a byte limit on the size of the email. Prevent your email from falling back to static email due to exceeding the size limit by
  • Trimming your email and removing unnecessary content
  • Minimizing the number of hyperlinks in your email, whose URLs could be rewritten into very long URLs by ESPs and analytics platforms
  • Eliminating unnecessary use of HTML constructs such as multiple nested divs that can be collapsed into one div
  • Minimizing whitespace characters in the on attribute for events and actions and amp-bind binding expressions
  • Using tools like HTML and CSS minifiers to perform compressions such as:
    • Removing unnecessary whitespace characters (such as space and newline characters used for making the source code human-readable) in HTML and CSS
    • Removing comments in HTML and CSS
    • Removing optional tags
    • Minifying the length of ID and class names used in CSS selectors and HTML