Hats off to Hotmail, for replacing symbols with oversized emoji

This week, a rather obvious Hotmail quirk cropped up. By obvious, I mean that a garden-variety set of symbols like © ® and ™ are being replaced by 19x19px ‘emoji’, or .gif images that look like so: . Apparently Hotmail thought this would be a fun way to spice up your email newsletters, but in fact, it’s an annoyance to email designers, who don’t want to have their tiny footer text broken up by a © character that’s the size of a fist. Yes, the images are here to stay - there’s a new bit of JavaScript code in Hotmail which ensures that no symbol goes by unmolested.

Emoji in email

To make matters worse, if you have img { display: block; } in your email design’s CSS code to prevent gaps in Gmail, each emoji will be followed by a line break (pictured).

Bringing emoji down to size

Thankfully, there’s a fix - resizing the images so they’re more in line with the surrounding text. After viewing a couple of the solutions being spun around, we took a crack at our own and found that adding the following snippet of CSS code to your stylesheet works a charm:

.ExternalClass img[class^=Emoji] { width10px !importantheight10px !importantdisplayinline !important

In the above fix, we’re using an attribute selector to say, ‘if an image is assigned a class that starts with ‘Emoji’, make it 10px x 10px’. You can change the size to whatever suits the surrounding text. The display: inline !important; has been added to prevent the Gmail gap fix from forcing line breaks. Also, .ExternalClass has been added to prevent Hotmail from renaming the img[ ], as it does to ‘unique’ classes.

Alternately, if you were meaning to superscript symbols like ™, you can try:

.ExternalClass img[class^=Emoji] { width8px !importantheight8px !importantvertical-alignsuperdisplayinline !important

While we’re talking Hotmail quirks…

Stephen here recently brought to our attention that mailto: links have been disabled in Hotmail. As we’ve mentioned here before, using a contact form is preferable to using a mailto: when collecting responses - now Hotmail has made this more so.

Many thanks to Email Design Review for diligently reporting the issue and inspiring the above fix. There’s a great discussion on Hotmail’s emoji in our forums, so if you’re more than welcome to join in and hang out with some of the smartest folk in email design.

Posted by Ros Hodgekiss

15 Comments

  • RyzeDesign
    20th April

    I personally think the webdesigners of Microsoft still have a lot to learn, in my eyes they always seem to be experimenting with designs, without even asking themselfs: is this good, is it like it should be? Almost EVERY microsoft website has a completely different layout. Why not keep things about the same, just like Google does? They are after all one company. Here take a look at these differences : http://msdn.microsoft.com/nl-nl/ms348103  and http://blogs.microsoft.nl/blogs/ , wouldn´t really say they were the same company now would you :px0aAnyway, sorry for my bit off-topic answer, but i just had to say this.x0ax0aKeep up the good work!

  • Jacques
    20th April

    Also worth remembering that these effect symbols in subject lines, so including them there might result in an increase in open rate. to test, test, test.

  • Ed Melly
    20th April

    Apparently (according to the Retail Email Blog) this change wasn’t intentional, and a fix should be rolling out some time soon(ish). Still, ingenious little fix that will be very helpful in the short-term.

  • Andrew Robbins
    20th April

    Thanks for the fix! Our company uses Rballs all over the place.

  • Andrew Robbins
    20th April

    I couldn’t get this solution to work. Out of curiosity, I did a quick search to see if attribute selectors were supported in Hotmail, and according to this link they aren’t? Can someone confirm this solution works. http://www.campaignmonitor.com/css/

  • Ros Hodgekiss
    23rd April

    Hi Andrew, that’s unusual - could you kindly post your code in our forums? I’ve tested the above in Safari, Firefox and Chrome:
    https://img.skitch.com/20120423-fydme3w6i31rbu4dsnumkigadd.png

    Note that attribute selectors aren’t supported in IE6. It was a surprise to me when I got this working, but lo and behold, the issue seems to be the addition of .ExternalClass by Hotmail, not the attribute selectors themselves.

    Thanks Andrew, I hope we can get this fix working for you.

  • Eyal Briton
    23rd April

    These CSS doesn’t work on Hotmail on IE8.

  • Eyal Briton
    23rd April

    It is Actually works on IE8. And Best practice for it is to use “em” instead of “px”. Unfortunately em’s will set the width and height if your recipients have IE9 and up.

    <font size=“1”>Microsoft</font> <font size=“15”>®</font> is funny!

  • Dan Wainman
    23rd April

    So glad I found this article. The oversized symbols were sending me crazy. Couldn’t for the life of me work out why :p

    Good work CM

  • Nicole Merlin
    23rd April

    This is great, and thank you!

    A part of me, however, feels like this isn’t something we should be fixing. Customers would be noticing that ALL of their mail in Hotmail is broken and I would rather that they realise that Hotmail sucks rather than thinking some email senders suck (and not others). Might be a myopic view of it all but I think scrambling to fix temporary glitches like this is a misuse of our time!

  • Andy Craddock
    26th April

    This appears to have been reverted by hotmail now so standard html symbols ™ © ® are back.

    happy days :)

  • Brian Thies
    26th April

    Confirmed - as Andy has pointed out, this issue has been resolved with a rollout issued in the past 24 hours.

  • Eyal B
    27th April

    HOTMAIL has reverted the standard symbols ™ © ®

    Happy Happy Joy Joy.—No more pain killers :)

  • Erik Woods
    7th June

    I have questions and things I want to discuss with you all.

    1. A generic rule to set it to 10px by 10px is a bad idea because some areas may have larger text than others. Obviously this can be fixed easily, but you might want to make a note about it in this article. Would it be possible to simply use a relative measurement like em instead? I’m not sure what the support for using ems is like but I’d much rather have one relative statement than to have to manually set the size for each block of copy that might be differently sized.

    2. What does the author mean by “if you meant to superscript â„¢?” Isn’t it superscript by default? Does Hotmail now use an image which is not superscripted? I have to admit - I like the idea of Hotmail’s change, but they went about it the wrong way. Instead of educating everyone on the issues first, they just go ahead and do what they think is best. Terrible has a new name and it is Hotmail. It very well could be a good fix some day, if we can get people to agree on some things, and we can get Hotmail to fix the styling so that it is dynamically based on the text size, and always inline. Then again - there’s the cowpath theory. People do what they’ve always done, until there’s a reason to change it. Maybe they are trying to herd the cows into taking a different route. Still, I think it was executed poorly.

    3. What is your opinion on superscripting Registered (®) and Copyright (©) symbols? For the past six years, I have been arguing that symbols should not be forced to be superscripted if they are not natively superscripted. In my opinion, it is a bad habit that people have gotten into simply because it is a commonly seen thing in logo designs. Please tell me I’m not crazy - I give you permission to be absolutely brutal with me on this one. It would also be nice to see an article (if you don’t already have one) talking about this so that I can reference it when I need to.

    4. Why do people continue to call Registered marks (®) R-balls? I cannot stress enough how annoying this is, knowing that an R-ball is a street term for Ritalin.

  • Erik Woods
    3rd July

    Please kindly disregard everything I’ve said in my previous comment. Unless you have an opinion on #3 or #4. :) Since this is no longer an issue in Hotmail.

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

Create an account