Hotmail replaces symbols with emoji graphic??

Just today, Hotmail seems to be replacing all instances of specific symbols (such a ® and ©) with a static GIF counterpart.

This is obviously playing havoc with my HTML emails, as throwing in a large, un-customisable GIF in place of text isn't really ideal.

Anyone come across this? It seems to be happening across the board with Hotmail, even in plain text emails... I kind of urgently need to get around this! Anyone?

dedra dedra, 2 years ago

Hi DuncanMW,

that's right, but not only ® and ©. As i test now, ™ too and maybe other special unicode characters. Interesting is, that € symbol remains as is.

If you in Hotmail can wrote an new message and use any of these characters, it seems that everything is OK, but after you send this message, in Sent folder you see in this message these as "R", "C" and "T". Super, recipients not understand what's going on. Sure, simple claim: "It's Hotmail, it's Microsoft" probably will not stand. It is 100% error in service, but maybe original idea is show emoji for mobile devices only.

It's like error in web interface at our country provider Seznam.cz, that i now deal, where he add paragraph close tag ("</p>") before paragraph open tag ("<p>") and on end, where must be, it's missing. It's add unneeded spaces begore paragraphs and fragments intended layout in our html e-mails. Funny error, but still no one correct it.

Standards go out and we as e-mail designers must constantly invent new and new things to get around it somehow.

I'm sorry, that there pouring out my heart, but it's still the same thing over and over.

And around? Maybe you can use your inline images for these characters instead html entities. But recipients cannot see it, until he confirm to show your external images or until he add your address to their safe senders list.

totori totori, 2 years ago

Hello Duncan,

Seems like I'm encountering the very same issue.
It's bugging the heck out of me as it's messing up the whole look of my emails.

iamelliot iamelliot, 2 years ago

Hey guys

we've been playing around with this today. Hotmail seems to be replacing the symbols with emoji type images. The only way we've found to fix it is to wrap the symbol in a span, then put some css in the header to resize the image back down to normal size - so its still using their image, it just looks a bit nicer.

Or the other alternative is to not have a ®, ™,


HTML Email Design and Build - http://www.elliot-ross.co.uk
Email Marketing Design Blog - http://www.emaildesignreview.com
BThies BThies, 2 years ago

Here's the offending javascript: http://gfx3.hotmail.com/mail/16.2.5069.0406/c1a.mozilla.js


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
DuncanMW, 2 years ago

Thanks for the link. While it works, it leaves you SOL if you have the symbol on anything but a white background.

The only other thing I can think of would be to replace all symbols with your own gif counterpart, however unless I'm mistaken there's no way to get inline images displaying in Hotmail, so again that's no use if the © symbol is in the middle of a paragraph of text.

BThies BThies, 2 years ago

@DuncanMW in regards to inline images -

Although you'd need to break up lines of copy (which is a big time PITA), you can use this:

<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" align="left">
<div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; color:#000001;">The end of the universe.</div>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; color:#000001;">Copyright</div></td>
<td valign="top"><img src="http://placehold.it/7x7" width="7" height="7" style="display:block;" alt="Copyright" /></td>
<td><div align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; color:#000001;">&nbsp;2012 Thies Publishing.</div></td>
</tr>
</table>
</td>
</tr>
</table>

(Note: it's just a placeholder image - use a PNG for your marks)


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
DuncanMW, 2 years ago

Ah, I see what you're doing there Brian.

Unfortunately for the specific emails I'm working on now I need to embed several ® symbols throughout multiple lines of a paragraph, so making a separate table for each line isn't really feasible.

Thanks for the help though!

BThies BThies, 2 years ago

In that case, just wrap the image like this:

<p align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; color:#000001;">Copyright<span style="vertical-align:super; font-size:90%; line-height: 0.5em;"><img src="http://www.thiespublishing.com/images/copy.png" width="10" height="8" style="display:inline;" alt="Copyright" /></span> Thies Publishing</p>

Works in everything from what I can see.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
DuncanMW, 2 years ago

Brian you are a scholar and a gentleman.

Don't know why I didn't think of wrapping it in a span.

Thank you!

roshodgekiss roshodgekiss, 2 years ago

Hey guys, this has been an awesome discussion. We've been working on our own solution too, which we've documented in a new post, 'Hats off to Hotmail, for replacing symbols with oversized emoji' (to go live tomorrow).

I thought I'd give you guys a sneak peek, as so many people have turned to this thread for a solution.

In essence, you can resize the emoji safely by adding the following code to your CSS stylesheet:

.ExternalClass img[class^=Emoji] { width: 10px !important; height: 10px !important; display: inline !important; }

The attribute selector above removes the need to surround each symbol instance with a span - which is desirably what you want to avoid in email templates.

A huge thanks to everyone here for the code snippets and inspiration - the crowd mind is an amazing thing!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 2 years ago

Hi Ros,

I think the issue with using their emoji symbols would be the font color/background color differences.  As a .gif, their files have rough edges which look horrible on anything other than white, and a black symbol on, say, red text would look out of place.

Hopefully enough people are getting through to the Hotmail team to get this reversed.. otherwise fixhotmail.org will be coming soon.

Cheers,
Brian


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 2 years ago

+1 for fixhotmail.org. We can't win with this email client :P


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 2 years ago

After a high level escalation within Microsoft, the Emoji symbol issue has been resolved.

The reg, copy, and trade symbols are no longer being converted to images.  :-)


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 2 years ago

Brian, that's The Best. I'll update the post shortly - thank you!!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
christinap., 2 years ago

Hotmail is still up to their old tricks.  Don't know if anyone else has caught this, but I was using ASCII Code &#10004; (Heavy Checkmark) in place of bullets for a list in one of my emails.  When I went to test it, Hotmail replaced it with a bright "green for go" heavy checkmark emoji GIF!

http://gfx1.hotmail.com/mail/w4/pr04/ltr/emoji/emoji_02714.gif

Seriously Hotmail?

roshodgekiss roshodgekiss, 2 years ago

Hah, looks like Hotmail are back to their old shenanigans. Did the above fix affect how the checkmark displays? Gee, I thought this saga was over :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
christinap., 1 year ago

Nope, because in this instance the issue isn't with the size, but the color of the graphic they replaced the code with.  In my design, I need the checkmarks to be a dark gray, but the emoji gif is a bright green.  Therefore the only immediate solution I could come up with (since the project was time sensitive) was to create my own checkmark image for my listed items.  Not cool for past designs that clients may be viewing in Hotmail now  :(

roshodgekiss roshodgekiss, 1 year ago

Ah Christina - I totally understand, what a pain! I'll absolutely let you know if we find a better workaround. Unfortunately, emoji have persisted from Hotmail to Outlook.com, so I feel that we may see this behavior for a while :P


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account