How to Test Your HTML Email Newsletter Before You Hit Send

So, you’ve come up with a HTML email design you’re happy with. Woo! Before you start mailing it out, you’re going to need to test it. There are so many email web apps and desktop clients out there with differing requirements, and ensuring that your newsletter looks great for the overwhelming majority of readers is incredibly important. I use a two-step testing process that includes preliminary testing using a desktop client and a small test group, and final testing using your mailing list web app of choice, such as Mailchimp or Campaign Monitor.

Preliminary Testing

Although there are plenty of alternatives for sending your test emails, I found Thunderbird the easiest.

Once you have Thunderbird set up:

  1. Select and copy your HTML template to your clipboard.
  2. Create a new email in Thunderbird, then select and delete any signatures automatically included.
  3. Click inside the text area and go to Insert > HTML—a text box will pop up, allowing you to paste your HTML in.
  4. Hit “Insert” and you’ll be ready to send.

However you may not currently use Thunderbird as your default mail client, and indeed, may not wish to. If this is the case, consider creating a new Gmail account and using Gmail’s SMTP/POP server settings to send your test mail from Thunderbird. This will keep your everyday email clean and separate from your testing mail.

You can also set up groups in Thunderbird (referred to as “Mailing Lists”) that enable you to send to a number of different addresses (and clients) from one address. For my own early testing stage, my group included:

  • my default Thunderbird account
  • a Gmail account
  • a Yahoo mail account
  • an MS Outlook 2007 account.

These certainly aren’t the only clients you might consider for early testing, but they gave us a reasonable snapshot of where we were at throughout the process.

Getting the Outlook 2007 test bed running was the most troublesome. I originally tried downloading the trial from Microsoft. Unfortunately, the installer then informed me it was happy to install Word, Access, PowerPoint, and every other app. Except Outlook 2007—which for unknown reasons was grayed out. Oh joy!

Eventually I tracked down and installed the full version. Again, to keep things clean, I set up a brand-spanking new Gmail account, solely dedicated to receiving mail for Outlook 2007.

While it might be tempting to consider using a service such as Campaign Monitor to allow you to generate Outlook 2007 screenshots, the practicalities of tuning your HTML via an online service are questionable—you’ll need to do lots of tweaking and this will be slow and expensive.

The one really useful thing we did discover during this phase is that, like IE, Outlook does support conditional comments. While in many ways this is cold comfort, it at least allows you to remove items that have no chance of working in Outlook 2007 (such as forms and complex positioning CSS).

However, beware. This is dark magic, so use it with care—and not at all if you can help it.

Final Testing

Okay, so you have a template that appears to be behaving itself in your smaller test group. It’s probably time to bite the bullet and go to an email testing service. We’ve used Campaign Monitor but I know that MailChimp runs an excellent equivalent service too.

After uploading and importing your HTML, the Campaign Monitor service allows you to test your template in around 20 different mail clients—although at busy times some clients have been known to time out.

However, keep in mind that a single set of tests costs around $5.00 and can take up to an hour to generate, so you would want to be fairly confident your template was close to finished before starting this stage of testing. This is not a time for incremental tweaking.

The Campaign Monitor test suite breaks down into three major groups:

Web-based email clients

  • AOL Web
  • Comcast
  • Earthlink
  • Gmail
  • Mail.com
  • MSN Hotmail
  • Windows Live Hotmail
  • Yahoo! Classic
  • Yahoo! Mail

Desktop email clients

  • AOL 9
  • Lotus Notes 6.5.4
  • Outlook 2003
  • Outlook 2007
  • Outlook Express 6
  • Outlook XP
  • Thunderbird
  • Windows Mail (actually, what is that?)

Mobile email clients

  • Blackberry
  • Windows Mobile 5
  • Windows Mobile 6

We also had our own Apple Mail clients and iPhones available to test the design.

While this certainly seems like a pretty comprehensive test list (especially compared to the five or six browsers you might typically test a web design on), it’s still not quite enough for you to let your guard down—as we found out the hard way.

As we were preparing to send the first edition of the new Tech Times template, my teammate still reported seeing serious layout issues in Gmail. Yet I’d put quite a lot of time into smoothing over the Gmail issues and could see none of the problems he was reporting.

After arguing over IM for about 30 minutes, we realized that I was viewing the template in Gmail in Firefox, and he was viewing the same template in Gmail in Internet Explorer 7!

Of course, this is common sense when you think about it, but it effectively means you really need to see four versions of each of the nine web-based clients tested—each webmail client in Firefox, IE7, Safari, and Opera.

Starting to feel warm and fuzzy about IE6 yet? I thought so.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • adumpaul

     Nice useful information.

  • http://paginasinternetpuertorico.com Paginas Internet Puerto Rico

    Great stuff…

  • http://www.bandil.tk Machfudz

    This Info very helpful..

    :D

  • http://twitter.com/craigrogers6 Craig Rogers

    Or, you could use emailonacid.com. It’s a paid service, but the tests are comprehensive and take very little time to generate.

  • TheMonk

    I’ve used multiple services like these.

    http://www.litmus.com is by far the best. It will run tests on all of the major email clients and do so in about 10 minutes or less.

  • Roy

    Your procesa is not optimal. Why bother sending through Thunderbird, when you can build campaign in Campaign Monitor, send up to 10 samples to your Yahoo, Gmail, hotmail and AOL accounts? (that’s 4 so far). Only one more needed is your personal email on Outlook. I always test 4 webmail clients at least on IE7 and Firefox, if there’s time each on Chrome too.

  • ralph.m

    Rather than setting up Thunderbird (which I used to to) I just open the email in Safari and go to File > Mail Contents of this Page. Very handy.

  • http://twitter.com/sandsweb SlingandStoneWeb

    Just got my hands wet on email marketing and with your pre-sending tips, I may reconsider. Hahahha!

    Seriously, it’s a lot of work and requires a great deal of patience and know-how.

  • Patelmilan05
  • http://www.netlogiq.ro Adrian Ilovan, web design Cluj

    Actually, Windows Mail is the Outlook Express version for Windows Vista.
    It’s the default mail client.

  • http://smootherface.net/ Crtnjoyce47

    Like a Web page, it can include different fonts and graphics, which regular text e-mail does not support.

  • http://www.nathanleighdavis.com Nathan Leigh Davis

    I’d have to agree with @5f22bd37dfb251ca21ef8024b9640ff8:disqus  about Litmus. I use it all the time and can’t swear by it enough.

    I found what you said about viewing GMail in different browsers interesting. Seems obvious, but I’ve never really considered it before. 

    Ultimately though a HTML email is never going to look the same in different email clients and it’s probably a good idea to accept a small amount of variation provided the layout doesn’t appear broken.

  • Del in the Web Team

    Hi Alex, enjoyed this article but by heck it sounds complicated. As a web developer and web designer it reminds me of the Apple Mac/Netscape/IE 4 browser issues many years ago, only worse and adding to the mix now is smart phones!

    I have a hard time explaining these compatibility issues to my clients who just see it as expensive!

    I have found that MailChimp does a good job if you stick to their templates – which are extensive and should cover most people’s needs.

  • BobVSEmail

    http://www.emailonacid.com is by far the best solution out there. Not only do they show you how it will look in each email client they tell you why.

    Also check out http://www.emailology.org, has some great resources for HTML design.

  • http://pulse.yahoo.com/_BGWD7KAJDR76MZ27BSWHMCLCF4 Kirk

    my co-worker’s sister-in-law makes $86 an hour on the internet. She has been out of work for 5 months but last month her pay was $8469 just working on the internet for a few hours. Read this site MakeCash4. {com}

  • Jackackman

    thanks I that’s great good Idea and really help full… 

  • http://www.nicolas-chevallier.fr/ Nicolas

    It’s really hard to create an email template that can be viewed in all clients, specially Lotus Notes. For testing I use Campaign Monitor tool when I finalize the template and I want to be sure that it will be perfectly displayed on all platform.