Windows Phone DOES support CSS3 Media Queries in HTML email

Being a Windows Phone user I felt compelled to share some recent discoveries regarding HTML email and Windows Phone. If your in the HTML email game you’ll probably know about great sites like Campaign Monitor, Litmus, Email on Acid etc. that provide resources and documentation on how to create cross compliant email templates and how to target mobile devices. One area I have noticed that is lacking information, is Windows Phone and specific information on its support for CSS3 and Media Queries. In fact, some of the information out there is no longer accurate, thanks to a few recent new discoveries.

In order to explain how CSS3 support is present within the built-in mail app, let me first plot the major update milestones that occurred related to CSS3 support:

Windows Phone 7:

• Windows Phone 7.0 (The beginning, October 2010)
• Windows Phone 7.5 (a.k.a Mango)
• Windows Phone 7.8 (End of the WP7 upgrade path)

Windows Phone 8:

• Windows Phone 8.0 (Latest is 8.0 Update 3 or GRD3)
• Windows Phone 8.1 (Major update for 8.0)
• Windows Phone 8.1 Update 1/GDR1 (Upcoming update of 8.1)

There were more updates in between for Windows Phone 7 and Windows Phone 8, but these are the major milestones. Did you know that the version Internet Explorer Mobile heavily influences the built in email client? Let me explain.

Windows Phone 7.0 (IE Mobile 7)

The very first version of Windows Phone 7 came with Internet Explorer Mobile 7. This is a variant of Internet Explorer 7 and its rendering engine was hybrid of both Internet Explorer 7 and 8. Its mostly like its desktop counterpart in terms of capabilities but it was developed for mobile and has some differences. For the website development people out there we know Internet Explorer 7 or 8 cannot do Media Queries or anything CSS3 related natively. So that quickly clears up support for CSS3 here.

CSS3 Media Query Support: NO

CSS3 support was never possible with the early software versions of Windows Phone 7 due to IE Mobile 7. Enough said. There was however a specific conditional statement that did target Windows Phone 7 (early versions pre 7.5):

<!--[if IEMobile 7]>
    // Your Windows Phone 7 specific code here.
<![endif]-->

This however will not work for newer versions, as you’ll see why in a moment.

Windows Phone 7.5/7.8 (IE Mobile 9)

The IE Mobile version is identical on both Windows Phone 7.5 and Windows Phone 7.8, this was actually taken on a device running 7.8, but the UA string identifies itself as 7.5.

Windows Phone 7.5 was a fairly big update for Windows Phone and with it Internet Explorer Mobile got bumped to version 9. Again sharing most of its characteristics with its desktop counterpart (though again there are some differences). Standards support for latest generation web stuff like HTML5 and CSS3 got a whole lot better in Internet Explorer 9, this includes support for media queries in IE Mobile 9.

Likewise for Windows Phone 7.8 update it also featured IE Mobile 9 which was unchanged from 7.5. In fact in terms of changes for 7.8 update, not a lot actually did, it was mainly to backport some features from Windows Phone 8, because it was at this point Microsoft ended the Windows Phone 7 update cycle.

CSS3 Media Query Support: YES

Windows Phone 8.0 (IE Mobile 10)

Windows Phone 8.0 features IE Mobile 10, gaining significant changes from IE Mobile 9 from the Windows Phone 7.x cycle. Standards support in IE10 is really good and the same follows for the IE Mobile variant.

CSS3 Media Query Support: YES

Windows Phone 8.1 (IE Mobile 11)

Windows Phone 8.1 is a major update of Windows Phone 8.0 and it brings IE Mobile 11 to the table, further enhancement of the mobile browser continues to be made and as always it benefits from the standards support of IE11.

CSS3 Media Query Support: YES

Windows Phone 8.1 Update 1/GDR1 (IE Mobile 11)

Not long after the Windows Phone 8.1 rollout officially begun, the next update for Windows Phone 8.1 has been revealed, simply named as Update 1 or GDR1 internally at Microsoft. The update will be available via the Preview for Developers programme soon. It will feature IE Mobile 11 just like Windows Phone 8.1. I don’t expect any changes in relations to media query support.

CSS3 Media Query Support: YES

But Media Queries don’t work on any of those Windows Phone versions?

That’s actually correct, by default CSS3 Media Queries do not work, but thanks to this great discovery over on the Campaign Monitor forums by a user called zerocents. We now know the reason why.

When a email is received by the built in mail app on Windows Phone (which we also now know is heavily tied to the IE Mobile version), it removes the Doctype. For example, I use the XHTML 1.0 Transitional Doctype in my email template so they start with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The default behaviour of the Windows Phone mail app is to remove this or any other set Doctype entirely. This isn’t an uncommon occurrence, many email clients are known to do this. In the case of Windows Phone however, this has a very big effect. By removing the Doctype, this makes the email client render in Quirks mode. In Quirks mode, support for all the latest generation stuff like CSS3 won’t happen, think of Quirks Mode as a fail safe fall-back for backwards compatibility if you will, rendering with the bare minimum. As this Internet Explorer were talking about here, removing the Doctype is one of the triggers to render in Quirks Mode.

The magic in order to stop this from happening is to force the mail client to render in standards mode, with this one line gem in the <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

By placing this in your template, you will force the email to be rendered in the highest capable standards available (which is what edge means). For a more detailed view on this tag head over to this excellent answered question on Stack Overflow.

If you’re also in the Website Development scene, you may recognise this meta tag from other places such as the HTML5 Boilerplate, but its suddenly become very useful for Windows Phone, perhaps even a candidate for the HTML email boilerplate.

So by applying this to your email template, Windows Phone 7.5, 7.8 and 8 will render Media Queries in emails. Tested and confirmed by myself. Using a Nokia Lumia 800 for 7.5 and 7.8 and a Nokia Lumia 925 for Windows Phone 8.0.

Side affects of forcing IE Edge mode

It was recently discovered that using this meta can affect Outlook clients pre 2007, as they use IE for rendering. Mainly Outlook 2003. In a weird twist, Outlook 2003 can actual gain CSS3 support if it was installed on Windows Vista or Windows 7 with Internet Explorer 9 installed, but the combination and chance of this being the case is rare. The overall usage percentage of these clients has been in decline for years. It was strange to see Outlook 2003 render CSS3 properties though!

One problem that was reported to me is that Outlook 2003 wouldn’t print any email with this meta tag in the template. I confirmed this by testing it on Windows XP and Outlook 2003 with SP3 installed via a virtual machine (matching the clients settings). Sure enough the email wouldn’t print, with no errors or any trace of a problem. While I never design email templates to be printed, this functionality was required based on the type of email is was. The fix was to exclude it from Outlook entirely with:

<!--[if !mso]><!-- -->
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->

All was well with the printing functionality again.

No love for Exchange Server mailboxes

Update: 28/08/2014:

I was able to properly investigate why Exchange/Office 365 mailboxes renders email completely differently. A more thorough investigation was done by myself, in my email campaigns on Windows Phone series, where I look at all aspects of the built in mail client. Some of the information below has been crossed out because it has been proven to be inaccurate.

CSS3 Media Queries don’t appear to work on emails that have been received through Microsoft Exchange Server on Windows Phone. On the Campaign Monitor forums, zerocents already highlighted this and he’s absolutely right. This however called for some further investigation.

I started by sending a test email with a media query via MailChimp to a POP3, IMAP and Exchange mailbox (Exchange Server 2007), the POP3 and IMAP mailbox rendered the CSS3 media query, the Exchange mailbox did not as the desktop version was served.

Curious about what could be causing this I did another test. I sent the same email again to my Exchange Mailbox and then forwarded the email to my IMAP mailbox (via a Windows Phone device), looking to first establish if the media query code was being stripped out of the template. Turns out it wasn’t as the forwarded message rendered with the media query.

I then forwarded the email back to my Exchange account, and once again the media query didn’t work. It seems once Exchange Server gets its hands on the email, media queries are being ignored. Interestingly the media query code is still present, so the code is still in the email despite the back and forth sending. Perhaps something related to Exchange Server won’t let it run, some form of domain policy is at work?

Another possible explanation is Exchange Server could be ignoring the meta tag or is in fact overriding “edge” mode and instead setting a lower X-UA-Compatible value in the email header (possibly Internet Explorer 7 or 8 standards for compatibility), which is bad news as we know Internet Explorer 7/8 has no CSS3 support, and if this override is being set via the email header, nothing can be done to override it.

This does sound like Exchange Server specific behaviour compared to it being solely related to Windows Phone devices though, media queries not working with Exchange server mailboxes isn’t unheard of and has been known to occur with Android and even iOS. This is a little annoying to say the least, but at the end of the day you can’t control an email recipients MTA.

So Windows Phone does have CSS3 support in email?

Overall yes, certainly in the built in mail client from Windows Phone 7.5 onwards! It turns out the built in email client on Windows Phone from 7.5 onwards is actually rather capable and its CSS3 support is great. Common CSS3 properties like box-shadow and border-radius all work. Its gone from looking like 14 steps backwards from Microsoft to them sitting on a decent email client, with some pretty stupid default behaviour you have to admit, but I guess there are arguments for compatibility vs standards when email is involved. Standards being a word that doesn’t quite have the same meaning in the email game.

Have fun making your emails more mobile friendly on Windows Phone, again big thanks to the discovery of this by zerocents on the Campaign Monitor forums! I hope this write up has been useful to you.

Finally, if you’re reading this Campaign Monitor, I think you should do a new write up on your blog. The world must know that CSS3 is possible in HTML email on Windows Phone!