The Importance of Content-Type HTML Character Encoding in Email
There have been many questions raised by our followers and subscribers on how email clients set the content-type within their HTML emails. As you may already know, the content-type plays a major role in the way an email will display, especially with respect to special characters in non-Latin languages or when copying from a text editor like Microsoft Word.
In short, all email clients ignore the content-type defined within your meta tag. Instead, they read it from the content-type value that is in the header of your email.
The server sending your email will automatically set the character type value within the header. You can change this value but you would need direct access to the email server. The safest solution is to convert all of your special characters to HTML entities and we’ve created a free online tool to help you in that process.
What Is Content-Type?
A content-type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1.
To illustrate, let’s take the following code:
<p>UTF-8 Characters: ö ü ä</p> <p>UTF-8 Chinese: 激 光 這 </p> <p>HTML Entity Characters: 漢 字</p>
Here’s how it renders using each character set:
As you can see above, the Chinese symbols are not represented in the ISO-8859-1 character set. This is because ISO-8859-1 only includes Latin-based language characters. The result is a bunch of jumbled text, which is the ISO-8859-1 interpretation of the symbols.
Setting the content-type is also important for email accessibility; it ensures nothing breaks the reading pattern for a subscriber, whether the subscriber is reading the email herself or using a screen reader.
Within Campaign Precheck’s accessibility workflow, you can set your email content-type with the click of a button. We’ll make sure the right code is added to your HTML.
Where Does This Fit into HTML Emails?
In website development, we can specify the character set in a meta tag using this code:
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
Email clients display emails using the same premise; it will display the email based on the content-type. However, email clients read the content-type value set in the email header and they ignore the meta tag within the HTML.
How to Set the Content-Type in the Email Header
The server sending the email sets the header content. The header contains information like who is receiving the email (“to”), who is sending the email (“from”), date and time. Users can see some of this information at the top of each message when viewing it in an email client.
Here is a snippet of an email header (notice the content-type value):
Date: Wed, 15 Dec 2010 12:45:55 -0700 To: email@example.com From: firstname.lastname@example.org Subject: UTF-8 Message-ID: <email@example.com> X-Priority: 3 X-Mailer: EOAMailer 5.0.0 MIME-Version: 1.0 Content-Transfer-Encoding: 8bit Content-Type: text/html; charset="UTF-8"
Email Client Test Results
We sent the above code example in an email test to all the email clients Email on Acid supports. Nearly every client renders text based on the content-type value set in the email header. Gmail is the only client that automatically converts your text to UTF-8, regardless of what you set in the header.
Here are the test results:
Outlook 2003, 2007 and 2010
Lotus Notes 8 and 8.5
|Takes the content-type from the header of your email|
|Converts the content-type to UTF-8|
One interesting action we noticed: The web-based clients convert your text to the content-type character set before displaying it in the browser. We were able to check this by viewing what content-type they were setting in their meta tags. As it turns out, most of them are using UTF-8.
Because email service providers (ESPs) set content-type in the header, we have another layer of complexity added to our email development. Here are a couple of ways to tackle this:
Contact your email service provider (ESP) and ask them what content-type they set in the header when sending the emails. Once you know the content-type, use that value in your HTML meta tag when designing the email.
Convert all special characters to their HTML entities and you won’t have to worry about the header Content-Type. For example, the following character “漢” has an HTML entity value of “漢“. To help you with the conversion we have created a free online tool that will convert all of your special characters for you. Just use this conversion tool before you send your email.
Final Words on Content-Type
It is always important to check your character sets using both Internet Explorer and Firefox, especially if you are using non-Latin characters or copying and pasting content from a text editor like Microsoft Word.
When you send an email test through Email on Acid, our servers are configured to send your email using the UTF-8 Content-Type to each of our supported email clients.
Whether you’re making design changes to your email, changing your content-type, or adjusting the way you encode HTML characters, all of it can have a big effect on how your email renders. That’s why it’s crucial to test and preview your email before each send. Want to see for yourself? Give our free trial a shot and see how we can help you streamline your email QA process.
Author: John Thies
John is the man behind the scenes who makes sure everything is running smoothly. He loves all things technology, from programming to tinkering with mobile devices to reading the latest issue of Wired magazine. Follow him on Twitter: @johnethies.