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
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 ?
While developing HTML Emails, lots of limitations occur. Below are the main limitations
- Use table-based layouts
- Inline CSS only
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 )
- 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:firstname.lastname@example.org">email@example.com</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
Firefox, IE, Edge, Chrome, Opera etc...
Email service providers (ESP)
Gmail, Yahoo, Outlook etc...
- Android : Tablet and Mobile device
- iOS : Tablet and Mobile device
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.