#BlackLivesMatter
AMP

AMP for Email best practices

Important: this documentation is not applicable to your currently selected format ads!

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.