Site icon Mailtrap

Email Client Testing Explained

Mailtrap Team

Sending emails is harder than it seems. With so many aspects you should take care of when preparing an email sequence to go live, you need to make sure that each of them works as designed. When you have relied on the robust infrastructure, learned everything about deliverability, built your email template with responsiveness and accessibility in mind, prepared nice lightweight visuals, proofread your email copy, and composed an appealing subject line, what else can go wrong?

Unfortunately, there is no agreement between the email clients on rendering HTML/CSS and visual elements in emails. This means that your well-crafted email template can look different for your recipients. For example, Jane opens your welcome email in Apple Mail, watches the short video about using your app, and quickly becomes a happy and engaged user. At the same time, Michael opens this message in Gmail, sees the fallback image, and doesn’t read it at all, while Kimberley receives your email poorly structured in Outlook without a video and unsubscribes from all of your email communication. This is not the outcome you expected when you spent hours building and testing your emails, is it? That’s why it is essential to include email client testing in your email testing checklist. 

In this article, we explain how to effectively test emails in different clients, and we also compare a few testing tools.

Top Email Preview Tools

Sending messages to different addresses and opening them on various clients and devices doesn’t make a lot of sense, so it’s obvious that you need a specific email preview tool. 

HTML preview tools 

The majority of email preview tools show how your HTML is rendered in a browser and how it looks on desktop or mobile devices. We assume that you already preview your templates in this way, but if you need a few more options, here they are:

Email client previews in email sending tools

Email client testing is more complex —  that’s why not so many tools can offer it. Still, this feature is included in several email sending tools. If you are using one of them, or selecting a sending service, this can become a decisive factor. 

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 (which includes different versions of the same email client though) 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; we will 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, which start at $29/month. 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, Sendinblue, and Mailjet (Enterprise version) are among other popular email sending services that have an email client preview feature. 

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

Email client testing tools

Litmus 

Litmus is the most famous email client preview tool, which started back in 2005. It’s popular for its ability to demonstrate how an email template looks in various email clients. 

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. 

The email testing workflow in Litmus 

First of all, you should add your template to Litmus. You can send it using your Litmus testing email address, upload an HTML template, or create a new one in Litmus builder with their template library or from scratch. 

You can check a web preview while working on your template and when finished, switch to email client previews. Select email clients you want to test and get a list of generated previews. Look at each preview to see whether something is wrong. 

If you found any issue, you should click on that email client’s screenshot to take a closer look, and then it’s recommended to manually check whether the issue is reproduced in other clients and/or devices. There can be a flag about a common issue with a link to an article listing common issues in specific email clients and ways to fix them.

Then you need to learn the provided information and find out how to update your HTML code. You can amend your HTML template right in the Litmus builder and see the refreshed previews. 

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

Once done, you can push your 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. Note that these previews are generated using raw HTML. This means that they can’t guarantee that in a real email client your email will look accurately the same as in this Litmus preview. 

You can share previews via a link or by downloading them as zipped screenshots or HTML content. 

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

  1. The subject line and preview text of your message check across 15+ popular email clients. Litmus shows how they look and provides recommendations on their length. 
  2. Accessibility test against six best practices (alignment, alt text, content type, headings structure, etc.). If any issues are found, you will see the notification alert icon. 
  3. Links validation. Litmus checks whether links are working and shows their destination in one table. 
  4. Tracking check. Litmus will check 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 that shows how long it takes for your images to load. 
  7. Spam test that searches for issues that can prevent your emails from landing in the inbox. This check is available in the Plus and Enterprise plans.

With regards to pricing, Litmus offers three plans: 

You can try each plan for free for seven days. The Basic free trial offers 500 email previews. Litmus tracks email previews according to the number of selected email clients and generated previews. For example, Apple Mail 13 and Apple Mail 13 Dark 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. 

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

The email testing workflow in Email on Acid

Start by selecting a tool from the menu:

We’re interested in email client testing, so we start with the Email testing tool. After pasting the HTML code, you will get to 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. 

Similarly to Litmus, you need to manually check whether the template looks fine in every client. With this template, it’s clear right on the preview list that there are rendering issues, but to make sure it looks fine from top to bottom, you need to open each preview and scroll it. 

When you open a preview, you are able to switch between a visual render and a code analysis summary. The latter has three tabs:

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

After reviewing the testing results, you should fix your HTML email template and create a new test. Iterate until you are completely happy with the results! You can also share email preview results via a link. 

Unlike in Litmus, the number of previews is not limited in all Email on Acid subscription plans: 

A 7-day free trial is available for all plans (except Enterprise). It includes five test projects. 

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. 

The email testing workflow in Email Preview Services 

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. 

As a result of a test, you will see a list of screenshots of exactly how your email template will look 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 your 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. 

The number of email previews is unlimited in all subscription plans:

A free 7-day trial is available as well. 

HTML email analysis

There is another approach to email client testing that provides HTML and CSS analysis with a list of issues for every popular email client. 

The main difference is that HTML email analysis tools don’t 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 every email client looking for possible issues —  the tool already analyzed it for you and shared the results in a report. 

Mailtrap uses this approach to HTML template testing. It offers the HTML Check feature on all subscription plans, including the Free plan. The HTML Check analyzes HTML/CSS rules used in your email and compares it with the support data for popular web, desktop, and mobile clients.

The overall result of the check is displayed as the Market Support percentage —  the level of HTML/CSS support across the popular email clients. 

The score is calculated according to the market share of each email client. Some clients, such as Gmail or Apple Mail, are far more popular than others —  let’s say Yahoo! Mail or SFR Desktop Webmail. This way, the support for specific elements in common email clients will have a heavier effect on the Market Support score.

The details of the email client test are posted as a list of rules that contains:

The email template testing workflow in Mailtrap looks as follows:

  1. Compose a message and send it to Mailtrap. 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 (available on Business, Premium, and Enterprise plans that start at $49 per month).
  2. Open your message in the Mailtrap interface. There are three tabs related to the HTML test: HTML (shows HTML preview rendered in a web browser), HTML Source (shows the HTML code of your email), and HTML Check (provides the analysis of email client support). 
  3. Go to the HTML Check tab. Select email clients that are important for you or check the whole report and inspect all found errors. Click the line numbers to instantly view each HTML/CSS attribute that causes errors in your code. Use the line numbers references to fix your HTML template in your code editor. 
  4. Send the updated template to Mailtrap and check the report. If any email client compatibility issues are found, you will see the alert sign with the number of issues next to the HTML Check tab name. 

Besides the email client support analysis, Mailtrap provides information about email headers and analyzes your email for spam and blacklisting. You can share your test results by inviting other users to view your emails in Mailtrap’s interface.

You can run email client reports in Mailtrap for free. Mailtrap charges for the number of emails it processes. The forever Free subscription plan allows you to test up to 500 emails per month.

How to choose the right email client testing tool

In this post, we have explained in detail how popular email client testing tools work for you to quickly decide which of them matches your goals without a need to set trial accounts.

It is important to be sure that your email message is accessible for all your recipients. However, it can be tricky to understand what went wrong and fix your email template without understanding HTML/CSS.  

If you are working with marketing email campaigns and use a dedicated software, it can be helpful to use built-in template editor and preview features. Usually, their email template libraries offer templates tested and optimized for the majority of clients.

When you code your own templates, you have more freedom of choice in terms of tools. If you are in need of real screenshots of your email in different clients or you prefer to inspect each email template manually to look for possible errors, then choose from the email preview tools. 

If you use a number of different templates and want to quickly get to a list of required fixes, then choose an HTML analysis tool. 

There is another point about the email preview tools: they are quite pricey. For example, you need to test 10 different templates across 30 email clients, assuming that you will need five iterations for each —  this will make 50 emails and 1,500 previews. 

In Litmus, such a test will require the Plus plan, which costs $199 per month. In Email on Acid, the Basics plan at $89 per month should be enough. In Mailtrap, you can iterate on these 10 templates for free. 

Of course, email previewing and email template code analysis are different approaches targeting different tasks. Choose what fits your needs and your budget, and send better emails!

Exit mobile version