Tips for Designing HTML Versions of Email
When you send an email, a lot goes on behind the scenes. And as mere marketing mortals, most of us probably don’t understand the process fully, especially when we rely on software to take care of all that technical mumbo-jumbo for us. Just take a look at the following infographic from litmus, which documents an email’s journey from the click of the “send” button all the way to the subscriber’s inbox. It turns out, getting an email to display properly in a recipient’s email client isn’t so cut and dry. There are quite a few factors that can affect an email’s ability to show up the way you, the marketer, originally intended!
1) Assign Clear Alt Text to Images
As we saw with the Groupon example above, even if your recipients’ email client does support some HTML formatting, it may not always take kindly to images in email. Try to avoid image-heavy emails, and when you do include images, be sure to tag the image with alt text that clearly denotes what the image is. It’s not uncommon for the alt text to show up in place of the image, and when this is the case, it’s helpful to give recipients an idea of what the image was supposed to portray.
2) Make Sure Email is Comprehensive Without Images
To piggy-back off our last tip, avoid using images to display important information. As a general rule of thumb, think about how your email would look if the images didn’t display. Would your recipients be able to obtain the same information as they would have if the images did display? If not, re-think your email. If you include a call-to-action (CTA) image button as we did in the HubSpot example earlier in this post, include a text-based CTA in the post as well. Failing to do so will mean you’ll take a hit in the traffic and/or leads you were hoping to generate from the image CTAs in your email if they fail to render.
3) Avoid CSS in Emails
CSS, or Cascading Style Sheets, is a type of coding language that is more complicated than HTML. Because not all email clients/browsers accept the same codes, and because email doesn’t tend to be as sophisticated as a web browser, including CSS in email tends to be a recipe for rendering disaster. For more information about how different email clients support CSS, see this overview from CampaignMonitor.
4) Use Plain Text-Style Bullets
In addition to images, another element that tends to break in HTML email renderings are HTML-style bullets.
You know, those nice-looking
rounded or square bullets
that look like this?
So rather than running the risk of invisible or wonky bullets, use a plain text alternative such as asterisks (*) or dashes (—) that are more likely to show up no matter what.
5) Don’t Copy & Paste Text From Other Word Processors
Oh, the formatting horror! Raise your hand if you’ve ever suffered the frustration of copying and pasting text from a Word document into your ESP. I know mine is raised. Doing so carries over formatting from within the word processor, and funks up the text within your ESP. Your safest bet is to start from scratch and craft copy directly within your ESP.
6) Be Wary of Dark Background Colors
While blocks of color can add a pretty design element to your email, be careful. Say you decided to create your entire email — or just a section — with a dark gray background. To make the text readable, you selected white as your font color. Now what happens when your recipient’s email client doesn’t render that background color? Invisible text! Lesson: the visibility of your email’s copy should never depend on the background color of your email.
7) Always Include a Link to the Web Version
Many ESPs will enable you to create a web-based version of your email. Include this link in your email send. That way, if the images or anything else isn’t rendering properly for your recipients, they can easily click over to the web-based version and see exactly what you intended.
8) Test Emails Using Different Email Clients, Mobile Devices & Browsers
The best way to understand how different browsers, email clients, and mobile devices interpret your HTML email is to see for yourself! To save yourself the trouble of testing every single email send, test a few options once, and then create a template to use for each email you send using the winning version.