HTML E-mail Testing

In this article I will discuss about "Testing HTML Emails". But before jumping in testing of HTML emails, let us understand why we need to develop HTML Emails. As we all know that in our daily life we are sending plenty of emails to our clients, customers, companies, etc.

So why do we need to send emails? When we are sending emails our main objective and focus is to increase marketing of our products we build or services we provide. So for that marketing of the product is a must and the best approach is to implement Email Marketing.  

Email marketing messages can be sent in two different forms - HTML email and Plain text email

Which one works better for your business?

An HTML email is what you typically see from Businesses and Organizations. They contain images, colors, formatting, and often start with an email template.

And plain text emails are exactly what they sound like. No bells or whistles here - just plain text without graphics, formatting, or buttons.

 

Here are some types of HTML emails frequently sent:

Newsletters - sent on consistent schedule

Standalone Emails

Promotional Emails

Transactional Emails

Mobile Optimized Emails and many more

 

As we now know the difference between HTML Emails and Plain text emails, let us now focus on “Why we need to test HTML Emails” ? 

• To preserve your product/brand and reputation
• Retain conversions and revenue
• HTML and CSS are not always well supported
• Dozens of different email clients( ESP ) and devices that are used
• Email rendering

Lets focus on “How to test HTML emails”, But before that we need to focus on some important point which are listed below:

 

a. Is HTML Emails testing same as HTML Webpage Testing ?

Absolutely NO.

While developing HTML Emails, lots of limitations occur. Below are the main limitations

• Use table-based layouts
• Inline CSS only
• Limited or no support for: Forms/surveys, Video, Javascript, Flash, Background images and Animated .gifs

b. Difference between Desktop client vs Webmail client

A Desktop (Email) client is a desktop program that allows users to access their emails on their computer without having to log in via the web. They are linked to email accounts through POP3 or IMAP addressing. This means they can handle email for accounts with ISPs and other non-webmail services.

Eg. Outlook 365, Outlook 2016, AOL 9, Lotus Notes 6.5.4, Outlook 2003, Outlook 2007, Outlook Express 6, Outlook XP, Thunderbird.

A Webmail client is an email system that can be accessed via any web browser when connected to the internet. All emails, calendar services, and contacts are hosted on the email service provider’s online servers.

Eg. Gmail.com, Outlook.com, Yahoo! Mail, Yahoo! Classic, iCloud Mail, AOL Mail, zoho mail, AOL Web, Comcast, Earthlink, Mail.com, MSN Hotmail, Windows Live, Hotmail.

c. Why is email rendering so complex?

• Email service providers (ESP)
• Operating systems
• App-based and web-based email clients
• Screen sizes ( resolution)
• Images enabled/blocked

 

Let us now dive into actual testing of HTML Emails

Important Email elements to consider are:

• Email width - Emails should be 600-800 pixels maximum width
• View in browser or View online or Read online button
• Head ( Title , favicon )
• Logo ( Company , Product )
• Images
• Links
• Content - Avoid using SPAM trigger words
• Correct Address (Personal / Company )
• Unsubscribe button

 

Properties of Images

Images - <img src="http://abcd.png"> 

Width and height - <img src="http://abcd.png" width=”123” height=”123”>

Alternative Text - <img src="http://abcd.png" width=”123” height=”123” alt=”image name”>

• Always optimize your images for email by compressing them first. 
• Rendering when images are not displaying

 

Properties of Links

Websites Link : <a href="https://www.example.com" target="_blank">www.example.com</a>

Incorrect link : “www.example.com” . Link should contain "http" or "https"

Email address : <a href="mailto:[email protected]">[email protected]</a>

Telephone or mobile number : <a href="tel:+91 9834876787">+91 9834876787</a>

 

Mandatory testing checklist

Remove / convert symbols and nonstandard characters. Example : ® < ▼© should be converted using tool.

Ensure images and URLs start with "http://www" or "https://www"

Are prices and other information correct?

Does email content lead to relevant landing pages?

Perform spam check

Test in common/popular email clients ( test accounts )

Preview with images on and images off

Check rendering in desktop, mobile and webmail clients

Verify all links works and point to the correct pages

Are CAN-SPAM elements in place?

Working unsubcribe mechanism, mailing address, etc

 

Email Sending and Testing Tools

Putsmail - offer email previews across 50+ different platforms and devices - from Lotus Notes to iPhone 6.

Email on Acid - offer email previews and unlimited testing across 90+ clients and devices

Sendgrid - emails sending and marketing tool

More tools like Mailchimp, Activecampaign, ConvertKit, ConstantContact can also be considered as per the needs.

 

As we have seen many tools used to send and test HTML emails. We must also test on the physical devices too. Following platforms should be considered when testing

 

Operating System ( Desktop )

- Windows : Windows 7, Windows 8.1 and Windows 10

- Mac : macOS 10.15, macOS 10.14 and macOS 10.13 

Browsers :

Firefox, IE, Edge, Chrome, Opera etc... 

Email service providers (ESP)

Gmail, Yahoo, Outlook etc...

Mobile Devices

- Android : Tablet and Mobile device

- iOS : Tablet and Mobile device

 

Conclusion:

Email testing in different email clients is mandatory for many email marketers and designers. If they are not tested properly before hitting "Send", it can cause alot for businesses of product and services in terms of revenue as well as in sales. As there are many tools available for Testing of emails we should make use of them but Testing of emails multiple times is a must.