Nine email preview tools and why you need one

In email marketing, what you see is not what your readers see. Literally.

The lovely HTML email template you or your designer sent to your email account may look great to you. But once that email lands in the inboxes of your list, it can look very different.

How can that be?

Lack of email standards

First, there are no established standards for rendering ("displaying") email.

This means that webmail services (like Windows Live Hotmail) and email clients (like Thunderbird) each have their own unique way of interpreting the HTML that makes up your email.

Common sense suggests that they're all going to do a pretty similar job of it. Unfortunately, that isn't always the case...particularly as your email's design gets more sophisticated and makes more use of CSS.

An uncooperative email client can distort your carefully crafted copy and optimized layouts, hurting response rates in the process.

Consider something as simple as the "p" tag used to define paragraphs in HTML text. Gmail separates the paragraphs nicely:

Yahoo! Mail doesn't:

The poster child for email display idiosyncrasies is Outlook 2007 (and 2010). This popular email client does not, for example, support CSS features like "background images", nor will it display animated .gifs. See Dave Greiner's article for more info.

It doesn't stop there, either. While web browsers are more consistent than email clients, they're not perfect. So your email may go through two display iterations at a webmail site. The first is how that service chooses to display HTML email code and then there's the influence of the subscriber's browser.

The rise of mobile email

The second issue is the growth of mobile email. For example:

• The Radicati Group predicts that wireless email will account for over 1 billion mailboxes by the end of 2013
• Gartner estimates that over 170 million smartphones were sold in 2009: devices which have their own email applications or offer easy mobile web access to webmail services

Mobile email applications are rarely as capable as desktop software at displaying HTML email as the sender intended. Even with the advances in HTML email display made possible with smartphone technology, there is still the issue of screen size to consider.

Image blocking

The third issue is image blocking. Most webmail services and email clients now prevent images from displaying in emails unless the user takes specific action to activate images directly (by choosing an appropriate display option) or indirectly (by adding the sender to relevant contact or safe sender lists).

Although image blocking is common, each webmail service or email client handles it differently in terms of how they display the fact that an image is blocked and how they display the text defined within the image's alt attribute.

Email preview tools

These three issues mean you need to see how your email displays in all the important webmail and email client interfaces out there so you can identify, research and correct any problems.

You could set up your own test accounts at webmail services, install various email clients on local PCs and invest in different mobile devices, then send test emails to build up a "picture" of how you stand in terms of cross-client display compatibility. All of which is, frankly, impractical.

Fortunately, there are several low-cost tools that will do this preview work for you. You upload or send a copy of your email and they show you screenshots of how that email looks in various display environments.

If you use an ESP (email service provider), check to see if such a tool is built into their service. If not, there are various standalone tools that offer this functionality.

For-fee standalone solutions:

eDesign Optimizer from Unica Pivotal Veracity
Web, desktop and mobile email client rendering previews, image and link validator, size assessment checks (for mobile and low-bandwidth compatibility), W3C HTML code validation, spellcheck, etc. Additional services cover email analytics, deliverability and engagement.

Litmus
Previews for 33 email clients and mobile devices (including previews in both IE and Firefox for the major webmail services). Add-on services include spam testing and email analytics.

Email on Acid
Previews from desktop clients and webmail services, plus analysis of unsupported code, and a text version generator. Free option for AOL Web Mail, Gmail, and Outlook 03 previews.

PreviewMyEmail
Screenshots from various email applications.

For-fee ESP-based preview tools you can use without having to send your emails through that ESP:

MailChimp's Inbox Inspector
Previews "over 25 screenshots of your email in all the major email applications" plus spam filter testing.

Campaign Monitor
Covers 23 webmail, desktop and mobile email clients, including Firefox/IE screenshots for six webmail interfaces. Also includes spam testing.

For-fee tools built into wider email marketing service packages

EmailReach
A rendering and deliverability solution which includes HTML and link checks, as well as previews from major email readers.

Return Path
The company's deliverability monitoring suite includes a campaign preview tool for numerous email readers, plus HTML and link checks.

Lyris HQ
Inbox Snapshot offers previews of many email clients and is part of a suite of wider online marketing tools.

Three tips for using preview tools

First, it can sometimes take a while for the screenshots to come back for all the different email clients and webmail interfaces out there. So email preview testing is not something to do at the last minute.

Give yourself 24 hours for all the results to come in, plus the time you would need to make any necessary changes.

Second, do not test once, then assume all will remain well. Things change. Only recently, for example, Gmail suddenly started adding margins to images that did not carry particular styling information.

So test at regular intervals (at least quarterly) and each time you change the code behind your email template. Consider a preview test before sending out any major campaign or newsletter.

Third, many screenshots will display as if images were activated, with an option to see the same display with images blocked. Don't forget to check that "images off" screenshot, too, as it may be the most likely view your subscribers will get.

What to do if you have a problem

If your email is displaying poorly in one or more places, then see the Email Standards Project or this collection of HTML email design resources to find out why and how to fix the problem.

If those links don't help, ask these email marketing and design-related forums:

• Email Marketers Club
• Email Roundtable
• Email Geeks on LinkedIn
• Campaign Monitor Design and Coding forums

Finally, DON'T PANIC. The resources above include sets of relatively simple guidelines your designer can follow to ensure your emails show up as expected across all the major clients and webmail services out there. With any luck, your existing designs and layouts are already compatible. But if you don't run those preview tests, you won't know!