How to preview and test an AMP email?

Preview and validate

1.jpg

Preview

Preview the AMP page just as you normally would preview any other static HTML site. There’s no build step or preprocessing required. You can choose to:

  • Open the page directly in the web browser from the file system (certain elements would not work due to the XMLHttpRequests failing).
  • Use a local webserver like Nginx or Apache 2. (Tip: For a quick web server, run python -m SimpleHTTPServer.)

Validate

Next, make sure that the AMP page you have is actually valid AMP, or else it won’t even get discovered and distributed by the other 3rd-party platforms like Google Search. To validate:

  1. Open your webpage in your web browser.
  2. Add "#development=1" to it's URL, for instance, http://localhost:8000/released.amp.html#development=1.
  3. Open the Chrome DevTools console and then check for validation errors.

2.jpg

Testing AMP emails

Ensure great user experience by testing your AMP emails before sending to a large audience.

3.jpg

Testing checklist

  1. Include an HTML and/or a plain text version of your AMP email. Email clients that don't support AMP will display this as a fallback.
  2. Ensure your AMP is valid by following the steps outlined in Validate AMP Emails.
  3. Review AMP for Email Supported CSS to make sure the CSS you're using is supported across all email clients.
  4. Try your email in the AMP Playground and ensure all dynamic features such as forms work correctly.

Testing specific to email clients

Email clients that support AMP also provide developer documentation that may contain additional guidelines and requirements.

Gmail

Gmail documentation lists guidelines for testing in Test your AMP emails in Gmail.

Gmail users can use the Gmail AMP for Email Playground to send an email to themselves for testing.

Mail.ru

Mail.ru AMP emails provide information on how to enable testing in your Mail.ru account.

Mail.ru users can use the Mail.ru AMP Playground to send an email to themselves for testing.

Outlook.com

Outlook.com documentation has a Get Started with AMP for Email guide that explains how to author and test AMP emails.

Validate AMP Emails

4.jpg

AMP Emails depend on the AMP JS library to enable rich interactive and dynamic experiences for readers. For this reason, email providers require your messages to be validated. Valid AMP markup guarantees emails are safe and exceed user experience standards.

How do I check if my email is valid AMP?

There are numerous ways available to validate an email as a valid AMP Email. They will all produce the very same result, so choose whichever one suits your development style the most!

5.jpg

Web-based validator

The AMP web-based validator supports the AMP for Email platform. Use the web-based validator by pasting your AMP Email into the tool. It will flag any validator errors directly inline.

Command-line validator

You can validate AMP Emails files by using the AMP HTML validator command-line tool.

Installation

  1. Make sure you have Node.js with its package manager 'npm' on your system.
  2. Install the AMP HTML validator command-line tool by running the following command: npm install -g amphtml-validator.

Usage

After installing the command-line tool, run the following command after replacing with your file containing the AMP Email content.

amphtml-validator --html_format AMP4EMAIL

If the email is a valid one, the command-line tool will turn out as PASS. If it is invalid, then it will return with the errors it found.

AMP playground

You can also validate AMP Emails using the AMP playground. Similar to the web-based validator, paste your AMP Email into the tool, and the playground will flag any validator errors directly inline.

Validate delivered emails

Sometimes your delivered AMP Emails may be invalid even though the email markup you authored has already been validated by tools documented in this page. The most common reason this usually happens is that your ESP modified your email markup and made it invalid after you have sent your email to your ESP for delivery. For example, if your ESP is SparkPost and you haven't configured HTTPS tracking pixels with SparkPost, then SparkPost will add an insecure HTTP tracking pixel to your email. Since AMP Emails only allow HTTPS images, this will make your AMP Email invalid.

To check whether an email delivered to your inbox is valid AMP:

  1. download the AMP Email as an .eml file from your email client.
  2. Open the AMP playground.
  3. Click on "IMPORT EMAIL", and select the .eml file you just downloaded.

The playground will import the AMP email you downloaded into the inline editor and flag any validation errors.

What happens if my email isn't valid?

The AMP Validator isn't just a convenience for you during development, email providers supporting AMP Emails will automatically fallback to the provided HTML or Plain Text MIME types. An AMP Email should only be sent if it passes the validator.

AMP for Email best practices

6.jpg

Important: this component does not support your currently selected format websites!

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 structure of the components. 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.

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. 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.

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 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.
  • Be careful with overflowing margin in CSS: they may not get rendered due to an AMP layout limitation.

Latest Articles

article

How to write high-converting persuasive copy for emails

mailmodo-arrow-right
article

How to verify emails and clean email list

mailmodo-arrow-right
article

How to preview and test an AMP email?

mailmodo-arrow-right