That email sure looks beautiful! But why did the design break and look wonky and unprofessional in your recipients’ inbox? Understanding the basics of mobile email design will help you draft an email that looks great no matter what. The key is to draft two versions of each email: one that renders well in HTML, and one that is optimized for plain text.
What’s the difference between HTML & plain text emails?
Let’s look at the differences between HTML email and plain text emails to better understand what we’re talking about.
Plain text emails are simply emails that do not have any formatting such as bold, italics, underlined text, images, different fonts or colors, hyperlinked anchor text, etc. With plain text emails, the content is the same on all mobile devices (and on all desktop devices). It’s just typed text, and on some devices linked URLs.
HTML email uses a lot of formatting like a web page. You can include all the types of visual content mentioned above, and a lot more. The result is a more beautiful email. . . but ONLY if the email client (software) on your recipient’s mobile device can handle it.
To help you understand the difference, below are examples (from Hubspot) of the same email rendered in plain text and HTML.
Plain Text Version
HTML Version
Of course, the recipient viewing the HTML email will only see the image above if they have images turned on by default in their email. Like many people, I have images turned OFF by default. So I wouldn’t see the logo, the call-to-action, or the social sharing buttons in the above email.
27% of all emails were opened on a mobile device (phones and/or tablets) in the 2nd half of 2011
All email service providers (ESPs) today allow marketers to easily draft beautiful and visually-engaging emails using simple tools, so you might be tempted to disregard plain text email as a thing of the past. But it can still be a critical component for a successful email campaign, especially when it comes to mobile devices and mobile email design. I’ve written previously about 10 best practices for mobile email design, but here we’ll dive deeper into HTML and plain text versions of your email.
Don’t ignore plain text email, especially for mobile devices
According to email service provider MailChimp, there are five great reasons why you still need to consider plain text.
1. Some browsers, email clients & mobile devices can’t handle HTML
Due to factors like bandwidth and functionality, not all email client, browsers, and mobile devices that support email are sophisticated enough to display HTML formatting properly. When you neglect to optimize your email campaigns for both versions, what happens is a broken design and an undecipherable, ineffective email.
2. Some people prefer plain text
Some people would rather avoid all the bells and whistles and just read your message. If you don’t consider this in your HTML email design, those people (including me) simply won;’t get your message. The biggest error I see here is using an image to contain the entire message of your email. Since I have images turned off, I’ll likely simply trash your email and move to the the next one.
3. Some email types lend themselves to plain text
Not all messages are worth the extra time it takes to create beautiful HTML emails. For example, if you send simple, daily email alerts with content such as quick news feeds or quick links, or if you send email very frequently, plain text is a more efficient way to go. Your message gets across quickly and simply.
4. SPAM filters like to see plain text
When a SPAM filter sees an HTML email without a plain text counterpart, it’s more likely to suspect the email to be SPAM, since it’s an indication of a “lazy spammer.” In other words, failing to include a plain text version of your email is a red flag to SPAM filters.
5. It’s safer to use plain text for transactional messages
When HTML emails include click trackers, it’s not uncommon for email clients to warn recipients against “potential privacy threats” or a potential “phishing attempt.” Therefore, when sending transactional emails, stick to plain text emails, or you could put yourself at risk of a damaged reputation.
Luckily, most popular email service providers enable marketers to edit and customize both the HTML and plain text versions of their emails, making it unnecessary to completely give up the visually appealing benefits of HTML emails for the sake of plain text.
And even if your email service provider doesn’t require you to create a plain text version when designing an HTML email, it’s a best practice to create a plain text version regardless, for all of the reasons we just mentioned above. When you optimize both HTML and plain text versions of your email, you ensure that anyone can read it, regardless of their default settings, email client, browser, or mobile device’s capabilities. That being said, there are still a few things you should keep in mind when creating each version of your emails.
Tips for designing HTML versions of email
1) Assign Clear Alt Text to Images
Even if your recipients’ email client does support some HTML formatting, your recipient might have email images turned off. 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
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, 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 with your email.
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
Wow, this get bad fast! When you copy and paste from a Word document to your email creation tool, you’re probably copying all of the formatting along with your text. Things are going to get very funky! The best bet us to start from scratch and write your copy directly within your ESP’s email creation tool.
6) Beware 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.
Tips for creating plain text version of your email
1) Keep the Copy the Same as Your HTML Version
Remember I mentioned that having no plain text version of your HTML email is a signal to SPAM filters that your email may be SPAM? The same holds true for plain text emails with copy that is much different than its HTML version. And never use your plain text copy to simply direct recipients to the web-based version of your email or visit a certain page on your website.
2) Create Compelling Email Copy
Sure, a picture is worth a thousand words, but pictures aren’t exactly an option in plain text emails, are they? In plain text emails, words are more important than ever, so take the time to craft compelling email copy for both your HTML and plain text versions of your emails.
3) Don’t Overdo it With Links (And Shorten Them!)
Wherever you included anchor text links in the HTML version of your email, you’ll need to include the full URL in parentheses in your plain text version. Therefore, an HTML email littered with links will easily translate into a long and messy-looking plain text email. And while some email clients will end up hyperlinking the full URL in recipients’ inboxes — even for plain text (see our plain text email example earlier in the post) — those that don’t will require subscribers to copy/paste the URL into their browser, which isn’t exactly very user friendly. So keep the links in your email to a minimum, and consider limiting the messy look by creating shortened URLs using a service like Bitly.
4) Consider Using All Caps in Headers
Because formatting elements such as bolded text, italics, headers, etc. that you’d use to emphasize important text in your HTML emails won’t display in plain text versions, consider using techniques such as all caps for things like headers to help you highlight important parts of your email or to separate sections from one another.
5) Use Bullet Points
Another way to separate blocks of text or highlight important points is by using bullet points. Just as with HTML emails, this can be accomplished with asterisks (*) or dashes (—).
Are you developing your mobile email design skills? What other tips would you add to these lists?
First image courtesy of FreeDigitalPhotos.net
Subscribe to Our Blog
Join hundreds of people who get free and fresh content every week.
