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.
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. Because swiping is a common action on mobile email apps, take proper steps to ensure your users can interact with your content. Components such as
amp-carousel can include the
controls attribute to make the navigation buttons always visible on mobile.
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.
- Be careful with overflowing margin in CSS: they may not get rendered due to an AMP layout limitation.