.png)
Chrome, DuckDuckGo, Firefox, Internet Explorer, Microsoft Edge, Safari … You know how websites look pretty much the same, no matter what browser you use to view them?
Well, email doesn’t work that way. It never has. There are discrepancies in how email clients like Apple Mail, Gmail, Outlook, Yahoo, and so on interpret HTML and CSS code, as well as which features they support. This causes rendering issues.
It’s a bummer, I know. But here’s some good news: There are email preview tools out there that allow you to see how your email will render on all the different browsers in use. Below, I’ll show you how to do it using HubSpot, and also run through a few things you should test for before you send.
Table of Contents
- Here's How HubSpot Email Preview Works
- What to Check For When You Preview Your Email
- Why Previewing Your Email is a Good Idea
Free Email Marketing Tools
Create, personalize, and optimize your marketing emails without waiting on designers or IT.
- Boost email opens.
- Design stunning emails.
- Automate follow ups.
- And more!
Here's How HubSpot Email Preview Works
1. When you've finished writing your email in HubSpot, click on the “Actions” drop down directly below the “Review and send” button, and select “Preview.”
2. Click on that button and you’ll be brought to a screen where you can preview the email on different devices, and from different email clients. If you have personalization tokens or smart content in your email, you can also add a test contact and see how the personalization will look to that recipient.
3. On the clients tab, select the different email clients you’d like to preview your email in. You can preview your email across more than eighty different email clients across a number of different browsers. When you’ve selected the email clients you want to preview, click the "Test my email now" button. The test will take a few moments to run.
4. When they're ready, you’ll be able to view the results for each inbox. In the center of the screen, you'll see the ability to toggle "on" or "off" image blocking.
5. After previewing, note any displays that are problematic and make changes in your email to address it. For example, do you have an image that is overwhelming the email in a certain client? It may be because you've resized a very large image. You may want to try to upload a smaller version.
What to Check For When You Preview Your Email
Many of the things you’ll be testing for are design best practices, like:
- Do all your images appear as intended? Are they the right size? Are they in the right locations in the desktop and mobile views of your email?
- Does your text have appropriate color contrast with its background so it’s readable on all platforms?
- Look at the mobile views of your email. Have things stacked as you anticipated? Is the text large enough to read, and are the buttons big enough for adult fingers?
- Is the padding and spacing in your email conducive to readability across all devices?
- When your email is viewed in dark mode, does it still get the point across?
Pro tip: When you’re previewing an email, I recommend creating a checklist you can run through using the questions above and the email best practices I linked to.
Why Previewing Your Email is a Good Idea
The main reason? Previewing your email allows you to identify any issues before you send.
For instance, I’ve seen headlines which are perfectly readable in Gmail showing up as white font on a black background. But when you view the same email in Outlook, the headline is an unreadable dark purple text on a black background.
There are emails in my inbox where the images appear as they should in my Apple iPhone native email app, but are included as attachments in the version delivered to my desktop Outlook.
And I’m sure I’m not the only one who’s received an email with the salutation “Dear [FNAME],” when the dynamic content didn’t work correctly.
Some issues you will identify with testing won’t impact your email’s performance – but some will.
That’s why you test. So that you can:
- Fix your HTML code so that your headline appears as white on a black background and can be read no matter what platform your recipient is viewing it on.
- Ensure that images will appear within the body of your email, not as attachments.
- Confirm that your email salutation will pull in your recipient’s first name, as intended.
Testing ensures that your email has the best chance of being effective, of presenting your message, and motivating your readers to action.
Happily, most email preview tools will provide information on how to fix any issue they find. And the best news of all is that many email marketing platforms include one of these tools right in their interface, making it easy to test every email before you send it.
Bonus: Litmus (now owned by Validity) is a leader in this space, and it’s integrated right into the HubSpot platform.
Test first — then send.
Could you send an email message without doing render testing first? Yes. But it’s risky. Maybe any issues in your message won’t impact performance. But maybe they will. It’s easy to test now that tools like these are integrated into your email marketing platform, and your metrics (and audience!) will thank you.
Editor's note: This post was originally published in February 2014 and has been updated for comprehensiveness.
Free Email Marketing Tools
Create, personalize, and optimize your marketing emails without waiting on designers or IT.
- Boost email opens.
- Design stunning emails.
- Automate follow ups.
- And more!
