Bulletproof your Email with Character-Encoded HTML Symbols

4 minute read

Team PostUp

The Scenario: Email Rendering Errors

Skimming your inbox, you find an email subject line that interests you enough to prompt opening when you spot it. But what is that incoherent symbol? What is that supposed to be, a dash? An ampersand? Why is there a question mark in a box? Or worse, why is there a random selection of symbols and numbers seemingly floating in the email?

In short, why am I now distracted, focusing on the error in your email instead of being enamored with its content?

As email marketers, we can all agree that the content or main call(s)-to-action of your email is where you want the reader’s concentration to go. Mistakes will inevitably happen, but there are some things that should be done to better “bulletproof” your email, and one of those things is the use of character encoding.

What is Character Encoding?

Essentially, character encoding is a way of writing (encoding) certain symbols in HTML so that they render as that symbol regardless of email client or browser. For example, the “&” symbol may look perfect in Gmail, but in Outlook 2003 it looks garbled, or as a red “x”, or one of these: �.

To keep all characters looking consistent and easily readable, we use what are called “HTML Characters” within the HTML.

So rather than simply copying and pasting, or merely typing the “&” symbol within your HTML like so:

"While PostUp Kate greatly enjoys the content she finds in both Men’s Health & Women’s Health emails, Men’s Health tends to have better workout content  and doesn’t try to sell her as many '21 Days to a Bikini Body' diet programs."

I would write this within the HTML of my email like:

"While PostUp Kate greatly enjoys the content she finds in both Men’s Health & Women’s Health emails, Men’s Health tends to have better workout content – and doesn’t try to sell her as many '21 Days to a Bikini Body' diet programs."

 

Both the ampersand and en dash symbols have been written out in the HTML character version, which will ensure that both Gmail and Outlook 2003 show those symbols, and leave less room for symbols to get lost in translation.

Common Symbols that Should be Written as HTML Characters for Ideal Rendering

Symbols that Can Be Used as Calls-to-Action

Another great way to use HTML symbols are as ways to help the URLs stand out in your email. They can be used as arrows in your bulletproof buttons or directly next to your text links at the end of your content.

You can see from the client example on the right how the difference in font color, font weight, and the arrow help make it crystal clear that is a clickable URL and helps emphasize the call-to-action.

Here are some examples of great “arrows”:

Is there anything else I need to make sure my symbols will render the way I want them to?

In addition to using HTML character encoding, always make sure that your email has a “Content-type” tag in the section of the HTML code that properly declares its character encoding. An example of this can be seen below:

The charset states what set of characters should be used to display the code within your email. Depending on the language of your email, the charset may need to change. UTF-8 is one of the most commonly used charsets, and is the default in the PostUp platform.

Always remember, If you’re unsure of how this looks, in addition to sending email test messages you can preview this within PostUp to check if your symbol is rendering. Regardless, I would highly recommend sending a rendering test to check what your symbols look like across a variety of email clients. Need help with your email testing? Download our free guide, “How to Be an Email Testing Rock Star.”

Reliable products. Real results.

Every day, thousands of companies rely on Upland to get their jobs done simply and effectively. See how brands are putting Upland to work.

View Success Stories