Site icon Mailtrap

Email Client Testing Explained

In this article, I dive deep into the email client testing tools and processes. I’ll give you a bit of a background and use cases, then segment and analyze the tools that are worth your time. Here’s a quick walkthrough: 

What is email client testing?

Email client testing evaluates how an email renders and functions across various email clients, devices, and operating systems. The primary goal is to ensure that the email displays correctly and consistently for all recipients, regardless of the platform they are using.

For instance, an email might look perfect on Gmail in a web browser but could have broken layouts or missing images when viewed in AOL or Outlook on a desktop or Yahoo Mail on a mobile device (iPhone or Android). 

Anyway, email client testing helps identify and rectify such issues before the email is sent, ensuring a seamless experience for all users.

Here are a couple exemplary use cases:

  1. Cross-client rendering: An email designed for a marketing campaign is tested across different platforms like Gmail, Outlook, and Apple Mail. During testing, it’s found that some CSS styles are not supported in older versions of Outlook, leading to a broken layout. The issue is addressed by implementing fallback styles specific to Outlook.
  1. Mobile responsiveness: A promotional email is tested on various mobile devices using different email clients like the Gmail app on Android and Apple Mail on iOS. The testing reveals that images are not scaling properly on smaller screens. This prompts the design team to adjust the email’s media queries to ensure images resize correctly on all devices.

Email client testing tools

It’s not hard to guess that these tools allow you to see how your email looks across different devices and email clients, identify rendering issues, and make necessary adjustments. 

But not all pro tools are the same. Generally, they can be divided into three categories:

  1. Independent or standalone testing tools (I tell you exactly how to use them, just hit the link)
  2. HTML preview tools (check the overview below)
  3. Email preview as a feature of a much larger platform (also check the overview below)

The bottom line is that you may choose one type of a tool over the other depending on your preferences and the current tech stack. They all aim to improve email deliverability by checking formatting, email design, and the code behind it. 

But keep in mind that some tester tools won’t show which lines of code are problematic and may not offer suggestions on how to rectify them. 

HTML preview tools

The approach here provides HTML and CSS analysis with a list of issues for every popular email client. 

I’ll give you a quick overview of some of the tools offering previews. And if you want to find out more about them, we already have a detailed guide, so hit this link

The main thing is that HTML email analysis tools don’t just generate a preview for each email client but indicate exact problems in your code and explain how to fix them. 

This means that you don’t need to go through a bunch of email client preview windows looking for possible issues (some tools may have 60+ previews) —  the HTML/CSS tool has already analyzed it for you and shared the results in a report.

Also note that, the majority of email preview tools show how your HTML is rendered in a browser and how it looks on desktop, tablet (iPad and the likes) or mobile devices.

Email preview as a feature

As mentioned, email client testing can be found as a feature of much larger CRM or email sending tools (e.g. Mailtrap Email Delivery Platform). If such a tool is already a part of your tech stack, you may want use the preview feature as well. Here are a couple of examples. 

HubSpot

HubSpot is a CRM platform that features email marketing, sales, and help desk services. It has an email preview tool built into the email editor. 

Source

In HubSpot, you can select from around 30 email clients (although this includes different versions of the same email client) and see how your template will look in each of them. They include the most popular email services, such as Gmail, Outlook, Office 365, Apple Mail, and so on. You will be able to view and manually compare the performance of your template. The email preview tool in HubSpot is powered by Litmus; I’ll talk about this service a bit later in this article.

Campaign Monitor

Campaign Monitor is a popular email marketing and automation tool. It has the inbox preview test in the Unlimited and Premier pricing plans. The test generates screenshots of your template rendered in around 20 popular web, desktop, and mobile email clients.

Source

This test in Campaign Monitor also enables you to click through previews and manually compare them. 

ActiveCampaign, Brevo , and Mailjet (Enterprise version) are among other popular email sending services that have an email client preview feature. Also, Mailchimp has an Inbox Preview as part of their email builder tool. 

If you are using another service for sending emails, then a third-party email testing tool is your best choice. 

How to choose the right email client testing tool

Check a streamlined guide to help you select an email client testing based on your technical needs, goals, and budget. 

How to test emails in different email clients

Here, I’m covering detailed email testing/preview flows. I start with Mailrap Email Testing, which is a full on sandbox with previews and HTML checks, then I move to Litmus and other purely preview tools. 

Disclaimer: The following sections contain feature lists and pricing references. These were valid at the time of writing but could be subject to change by the time you’re reading the article. 

Mailtrap

Mailtrap Email Testing is part of Mailtrap Email Delivery Platform. And it’s a safe environment to inspect and debug emails in staging without spamming your recipients. 

Pricing:

The email testing workflow with Mailtrap

Step #1

Create a Mailtrap account. Then compose an email and send it to Mailtrap sandbox. You can do this via your app that supports SMTP authentication, an MTA, or any email sending tool using the Mailtrap email address for testing.

Step #2

In the Mailtrap dashboard, navigate to Email Testing > Inboxes > My Inbox and find the email you sent. 

Note: You can rename the inbox to your liking and get more inboxes with higher plans. 

Step #3

There are three tabs related to HTML code: 

  1. HTML (HTML preview rendered in a web browser) 
  2. HTML Source (the HTML code of your email)
  3. HTML Check 

Go to the HTML Check tab. Select email clients and device types that are important for you, or check out the whole report and inspect all errors found. 

You can see the support top email clients have for the HTML/CSS used in your emails. The overall report score is displayed as Market Support percentage —  the level of HTML/CSS support across popular email clients. 

Under the overall score, the report is further divided into sections, with each containing:

Click the “Show more” link to reveal a section explaining what’s wrong and which versions of each email client show the error. 

Based on this data, you will have insight into how many of your recipients will see the email you crafted exactly as you intended.  Better yet, you’ll know exactly which lines of code to fix to improve the performance of your emails.

Besides the HTML Check, Mailtrap Email Testing also provides:

Lastly, I mentioned that Email Testing is part of Mailtrap Email Delivery Platform. So it also has Email API/SMTP to send production emails to your recipients. And if you choose API for example, you can quickly switch from the testing environment to production and send emails as soon as you’re happy with how they look and perform. 

Litmus

Litmus defines email preview as an individual screenshot from an email client or device. It offers previews for 90+ email clients (this number includes different versions and devices). There are both the most popular clients, such as Gmail, Outlook, Apple Mail, and Yahoo, and the less used Comcast, freenet.de, and web.de. 

Pricing

The email testing workflow in Litmus 

Step #1

Add a template to Litmus by:

  1. Sending it using your Litmus testing email address 
  2. Uploading an HTML template
  3. Creating a new one in Litmus builder with their template library or from scratch 

Tip: You can check a web preview while working on your template.  

Step #2

Switch to email client previews and select the email clients you want to test to get a list of generated previews. Look at each preview to see whether something is wrong. 

The HTML template for this test was taken from Really Good Emails. 

Tip: For example, Apple Mail 13 and Apple Mail 13 Dark mode are counted as different email clients, and each time you make changes to your template and apply them, the new previews are produced. You should be careful with the email client selection —  otherwise, the preview limit will be reached very soon. 

Step #3

If there’s an issue, click on the email client’s screenshot to take a closer look.  Then, manually check whether the issue is reproduced in other clients and/or devices. 

There may be a flag leading to an article that lists the issues in specific email clients and ways to fix them. Then, you can amend your HTML template right in the Litmus builder and see the refreshed previews. 

Step #4

Once done, push the template to the Checklist. There, you will find the list of newly generated previews, will be able to scroll through them, and select the specific client for additional checks. 

Important Notes: 

In addition to previews, the pre-sending checklist includes the following tests:

  1. The subject line and preview text of your message check across popular email clients. 
  2. Accessibility test against six best practices (alignment, alt text, content type, headings structure, etc.). 
  3. Links validation. Litmus checks whether links are working and shows their destination in one table. 
  4. Tracking check. Litmus checks your HTML code for tracking pixels and, if none are found, will prompt you to add its own email analytics. 
  5. Image-blocking check that allows previewing a message with images off.
  6. Loading speed check shows how long it takes for your images to load. 
  7. Spam test searches for issues that can prevent your emails from landing in the inbox. This check is available in the Plus and Enterprise plans.

Email on Acid

Email on Acid is a popular Litmus alternative that also offers previews in numerous email clients and email campaign precheck. With Email on Acid, you also can preview your email in 90+ email clients (available on Chrome and Firefox browsers). 

Pricing

The email testing workflow in Email on Acid

Step #1

Start by selecting the email testing tool from the menu. It offers email preview and spam tests for an HTML template. You can copy-paste, upload, or send it to the Email on Acid testing address.

After pasting the HTML code, you get an Email Test Summary, demonstrating previews for all selected mobile, web, and desktop clients. 

The HTML template for this test was taken from Really Good Emails. 

Step #2

Manually check whether the template looks fine in every client. At first glace, it’s clear that there are rendering issues with the template I used in the example above.  

So it pays to open each preview and scroll top to bottom, to see how it affect the entire template. When you open a preview, you can switch between a visual render and a code analysis summary. The latter has three tabs:

Tip: For an extra $75, you will be able to submit your template for code repair. 

Step #3

After reviewing the test results, fix the HTML email template and create a new test. Iterate until you are completely happy with the results.  

Tip: You can also share email preview results via a link. 

Aside from the email testing functionality, Email on Acid also offers:

Email Preview Services

Email Preview Services offers real-time and real-device screenshots for 60+ email clients. It also provides email analytics, inbox and spam testing, and an email editor. On the Enterprise plan, its functionality can be accessed via a white-label API. 

Pricing:

The email testing workflow in Email Preview Services

Here, I won’t be taking the step-by-step approach because there aren’t really any steps. Basically, everything happens in one flow, and here’s what to do.  

Go to Previews and add your HTML code. If you don’t have it, you can build a new template with a drag-and-drop email editor. Alternatively, you can generate a test email address on emailpreviewservices.com and send a message from your ESP or email client

After running the test, you see a list of screenshots showing how your email template looks in each of the selected email clients. You don’t receive any code analysis or tips on what should be fixed. If something doesn’t work for specific email clients, you should edit the template and run another test. (Email Preview Services offers version tests though). 

The HTML template for this test was taken from Really Good Emails. 

In addition to email previews and the editor, you can track recipients’ activity with Analytics and run spam tests. The spam test includes sender IP reputation, spam filters, email providers delivery report, headers preview, and content analysis. 

Wrapping up

Now, you should be ready for an email client testing marathon. The important thing to keep in mind is whether you want preview + code inspection or just a preview with gazillion different clients. 

I’ll repeat myself, but my recommendation is always to focus on code inspection and check the support for different devices and clients. So why wait, try Mailtrap Email Testing 🙂 

Exit mobile version