HTML Email Testing — Read This Before You Hit Send

Share this article

html email testing
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 do some HTML email testing. 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. [author_more}

Preliminary HTML Email 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.

Frequently Asked Questions (FAQs) about Testing HTML Email Newsletters

What are the best practices for testing HTML email newsletters?

Testing HTML email newsletters is crucial to ensure that your message is delivered correctly and looks professional. The best practices include testing your email on multiple email clients and devices, checking for broken links, ensuring that images load correctly, and checking the email’s spam score. It’s also important to validate your HTML code and ensure that it’s compatible with all email clients.

How can I ensure my HTML email newsletter is mobile-friendly?

To ensure your HTML email newsletter is mobile-friendly, you should use responsive design techniques. This means your email will automatically adjust to fit the screen size of the device it’s being viewed on. You should also test your email on various mobile devices to ensure it displays correctly.

Why is my HTML email newsletter going to the spam folder?

There could be several reasons why your HTML email newsletter is going to the spam folder. It could be due to the use of spam trigger words in your content, poor IP reputation, or lack of subscriber engagement. To avoid this, make sure your content is relevant and engaging, avoid using spam trigger words, and regularly clean your email list to remove inactive subscribers.

How can I test the loading time of my HTML email newsletter?

You can test the loading time of your HTML email newsletter by sending a test email to yourself and timing how long it takes to load. You can also use online tools that simulate different connection speeds to see how your email performs under different conditions.

What should I do if my images are not displaying correctly in my HTML email newsletter?

If your images are not displaying correctly, it could be due to several reasons such as incorrect image URLs, large image file sizes, or compatibility issues with certain email clients. To fix this, make sure your image URLs are correct, compress your images to reduce their file size, and test your email on different email clients to identify any compatibility issues.

How can I improve the readability of my HTML email newsletter?

To improve the readability of your HTML email newsletter, use a clean and simple design, break up your content into short paragraphs and bullet points, use subheadings to organize your content, and choose a font size and color that is easy to read.

How can I test the deliverability of my HTML email newsletter?

You can test the deliverability of your HTML email newsletter by sending a test email to a list of different email addresses from various email service providers. You can also use email testing tools that provide detailed reports on deliverability issues.

How can I ensure my HTML email newsletter is accessible to all users?

To ensure your HTML email newsletter is accessible, use alt text for images, use a high contrast color scheme for text and background, use a readable font size, and structure your content in a logical order. You should also test your email with screen readers to ensure it’s accessible to visually impaired users.

How can I track the performance of my HTML email newsletter?

You can track the performance of your HTML email newsletter by using email marketing software that provides analytics such as open rates, click-through rates, and bounce rates. You can also use tracking pixels and UTM parameters to track user behavior and conversions.

How can I prevent my HTML email newsletter from being marked as spam?

To prevent your HTML email newsletter from being marked as spam, avoid using spam trigger words in your content, make sure your email list is clean and up-to-date, provide a clear and easy way for subscribers to unsubscribe, and comply with all email marketing laws and regulations.

Alex WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

tutorial
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week