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.
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
controlsattribute 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
autocompleteattribute values are supported across different apps and browsers. Assume that autocomplete isn't available to your users and keep the forms short.
- Make sure your email is only using AMP for Email Supported CSS
- Avoid using viewport units (
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.
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.
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.
amp-img, or the href attribute of an
<a>tag cannot be mutated by
- 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.