How to Preview and Test AMP Email

preview, test and validate AMP email

Creating an AMP email requires coding and thus a lot of time and effort is invested in creating an AMP email template from scratch. As a result, you would want to ensure that your emails are rendered as well as you created them. To ensure this you have to test your AMP emails. So, let's understand how to preview, validate and test your AMP emails.

Table of content

What to do before sending AMP Email?

Testing AMP emails before sending them can help you avoid any room for errors like emails not displaying your HTML email correctly, fonts not rendering, etc. Since AMP is a relatively new MIME type, there are very few tools available to do so. So we will discuss the fundamental way that is prescribed by the AMP project to preview, test and validate the AMPHTML and fallback HTML versions for sending AMP emails.

How to preview an AMP Email?

The preview option shows how your email will look in the recipients' inboxes. You can Preview the AMP page just as you usually 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.)

1.jpg

Next, ensure 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 do this follow the following steps.

  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

How to test AMP emails?

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

Testing checklist

  1. Include an HTML 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.

3.jpg

Testing specific to email clients

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

  1. Gmail

    : Gmail documentation lists testing guidelines in Test your AMP emails in Gmail. Gmail users can use the Gmail AMP for Email Playground to email themselves for testing.

  2. Mail.ru

    : Mail.ru AMP emails provides 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.

How to validate AMP Emails?

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.

4.jpg

Ways to validate AMP emails

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 <amphtml file>

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 drafted has already been validated by tools documented on 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 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 if your email isn't valid. An AMP Email should only be sent if it passes the validator.

AMP for Email best practices

AMP allows for exciting new types of immersive and engaging content in an 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 fetch content dynamically, include a placeholder to keep the integrity of the structure of the AMP components. The placeholder should be as similar in layout as possible to the document after returning 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. 6.jpg

Other Gotchas

When working with 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 if 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.

How can you simplify AMP Email creation, preview, and validation with Mailmodo?

Mailmodo is a complete email marketing service that allows users to build interactive AMP emails without any coding. Mailmodo allows you to preview your email content while editing your email template and before sending them. It also allows you to validate and send test emails whenever required. If you would like to send high-quality AMP emails without losing any time and without any hassle, sign up at Mailmodo today.

Latest Articles

article

What are the best email automation software available?

mailmodo-arrow-right
article

Understanding Email Drip campaigns

mailmodo-arrow-right
article

How to get ~3X more insurance quote inquiries with Mailmodo?

mailmodo-arrow-right

Get free access by signing up now

(No credit card required for signing up)