Hotmail Converts HTML to ASCII

Some recent tests have lead to a discovery about how Windows Live Hotmail (Hotmail) processes and delivers HTML in emails. Following are the results of my exploration, covering the conversion, delivery and rendering process using our own acid test.

Because webmail isn’t a self-contained application, and can be accessed via most common web browsers, this post discusses cross-browser performance rather than cross-client performance. Specifically because browser performance is the variable in the findings.

The Conversion: HTML-to-ASCII

The first thing Hotmail does is convert all non-number/letter characters in the HTML to hex-formatted ASCII characters. So:

<h1>H1 headline (34px/1em)</h1>

Becomes:
\x3ch1\x3eH1 headline \x2834px\x2f1em\x29\x3c\x2fh1\x3e

And the source code is printed exactly the same (byte-for-byte) irrespective of the browser.

This has an impact on how emails render—not in every browser, just Safari and Microsoft’s own Internet Explorer. Regarding the latter, my guess is that this has something to do with an IE security vulnerability identified in the CVE dictionary, but of course I can’t say for sure. Why Safari doesn’t render the ASCII characters is also a mystery.

The Delivery: JavaScript innerHTML Function

Most popular webmail clients rely heavily on Javascript to print messages into HTML-based GUIs, and Hotmail is no exception. After Hotmail converts the HTML to ASCII characters, it prints the converted markup using the Javascript innerHTML function:

<script>document.getElementById("MsgContainer").innerHTML='[markup here]';</script>

And there is no alternative because scripting must be enabled to even log in to Hotmail.

The Rendering

While the markup prints the same across the board, IE and Safari renders the markup differently. Following are screen shots from Firefox/Netscape (same screenshot), Opera and Safari/IE (same screenshot):

Firefox 2 and Netscape 9

Opera 9

Safari 3 and IE 7

Notice how while Safari/IE do render the HTML in ASCII they do not render the CSS in ASCII. Yet if you view the converted message source you can clearly see that both the HTML and CSS have both been converted the same way. This is what I find especially perplexing.

I had considered that the meta character encoding or DOCTYPE may be different from one browser to the next, but as it turns out Hotmail delivers the same DOCTYPE and encoding across the board. There are some variables with browser-specific classes on the body and even a unique Javascript for Firefox; however, as far as I can tell they simply impact Hotmail design/functionality.

Conclusion

My research concludes that this issue is something which we can neither prepare for or remedy with special markup techniques. If you happen to be someone who understands how to force IE or Safari to render ASCII text, please feel free to share your comments below. In the interim, awareness is the key.