This week the design team at Elite Email started noticing some strange behavior with Hotmail. At first they thought it was just a temporary bug as Microsoft might have been rolling out some new features that caused this rather strange side-effect.

What we were seeing was that special characters such as copyright ©, registered trademark ®, trademark ™ and others were being replaced with images:

But, as they sunk their teeth into this a bit more, ran further tests, did some research, and contacted Microsoft, we found out that this was not a bug, but rather a new process Microsoft had deployed that replaces these and other special characters with their own emoji icons. You can see a full list here.

So far the response from the email marketing community has been slightly less than favorable as this automatic swapping of special HTML characters with custom Hotmail images can really distort an email design. Our design team has summarized the problems by saying:

• The images that Hotmail is using are 19 x 19 pixels in dimension. But, this is often larger than the font size, so it makes the symbols that previously flowed naturally now stick out like a sore thumb.
• The images that Hotmail is using (for the most common copyright, registered trademark, etc) have the text in dark gray with white edging around them. What this means is that it will display correctly if you have it on a white background, but if your text (and this new Hotmail icon) appears on anything other than a white background, it really doesn’t look good.

We are currently recommending two possible solutions to resolve this.

Insert Your Own Images
Go through your email design and replace all instances of these special HTML characters with your own custom image that is sized correctly to flow naturally with your text and render correctly on whatever background color you are using. We’d suggest creating the image as a PNG just so it will be a bit more versatile for you in the future when your background color might change. (If you need help creating these images, contact the Elite Email Support Department and they’ll be happy to help you.)

There are some obvious downsides to this approach, since now your email will require more images to load, and these symbols will not display if images are turned ‘off’.

If possible, you can segment your mailing list to create a separate interest group for Hotmail users and the apply this fix to emails only sent to that group. This way everything remains the same for everyone else. This, of course, adds more work, but it ensures that that ‘fix’ is only used when absolutely needed.

CSS To Resize Hotmail Emoji Icons
Our friends over at Email Design Review have come up with an interesting CSS solution that doesn’t really get rid of these new Hotmail icons, but does re-size them to improve the flow of your email. (Keep in mind, the same image is being used so if you’re not on a white background, then you’d want to explore the previous suggestion above).

<style>
/* Hotmail symbol fix */
.symbolfix img{width:10px !important;height:10px !important;}
</style>

Then, wrap your special symbols with this span tag:

<span class=”symbolfix”> &copy; </span>

There might be other solutions in the future, or Hotmail may may further changes based on industry feedback. As always, we will stay on top of this to make sure that we can always help your emails look great.

Many thanks to all those in the industry that were quick to test and try to find out how to fix this most recent Hotmail change.

Hotmail: Before & After