Email Campaigns on Windows Phone (Part 2: POP3/IMAP)

0
Tuesday August 19th 2014 at 8:04 PM
Email Development Microsoft Windows
logo-windows-phone-8

This is the second part of the email campaigns on Windows Phone series where I look into how email accounts that are configured with POP3/IMAP behave within Outlook Mobile. IMAP is a very common protocol for email these days which mail accounts like Gmail, Yahoo! Mail and others all use so potentially you’ll likely encounter a user base in your marketing list(s) using Windows Phone with these mail accounts. Find out more to see how email campaigns behave on Windows Phone with POP3/IMAP.

If you didn’t catch the first part of the series or want to read ahead, here are the links to the previous and next part:

Email accounts that use POP3/IMAP

Any email account that uses the POP3/IMAP protocol uses IE Mobile to render emails. Accounts that fall in this category include:

  • Outlook.com/Hotmail
  • Yahoo! Mail
  • Gmail
  • iCloud
  • Any custom/generic POP3/IMAP account (manual setup)

The exact version of IE Mobile can be discovered by using IE conditional comments, which is a common techniques used in general web projects to cater for older versions of IE.

Windows Phone 7.0

Initial release and minor versions pre 7.5

  • Rendering Engine: IE Mobile 7
  • Responds to conditional comments?:
    Unknown (Likely <!–[if IEMobile]> or <!–[if IEMobile 7]>)
  • IE Version rendered with by default: Unknown (Likely IE Mobile 7)

The very first version of Windows Phone 7 comes with IE Mobile 7. Unfortunately as my physical Windows Phone 7 test device was a Lumia 800, I was unable to flash any OS version below 7.5 (as that’s the version it was released with). Likewise the 7.0 emulator ROMs don’t allow access to add any email accounts at all (even the unlocked ones).

I can however tell you that IE Mobile 7 had the rendering capabilities of both IE7 and IE8 as it had a hybrid rendering engine. Native CSS3 support in IE7/IE8 is not possible, so responsive design would equally be impossible in the email client. In order to work around this, a specific conditional comment for the early 7.0 versions may have been some use.

Windows Phone 7.5 (Mango)

Includes the Tango update and minor versions preceding 7.8

  • Rendering Engine: IE Mobile 9
  • Responds TRUE to: <!–[if IE 9]>
  • Responds TRUE to <!–[if IE]>
  • IE version rendered with by default: IE 9

Windows Phone 7.8

Final update for 7 series devices

  • Rendering Engine: IE Mobile 9
  • Responds TRUE to: <!–[if IE 9]>
  • Responds TRUE to <!–[if IE]>
  • IE version rendered with by default: IE 9

Windows Phone 8.0

Includes all versions up to GDR3

  • Rendering Engine: IE Mobile 10
  • Responds TRUE to: <!–[if IE 7]>
  • Responds TRUE to <!–[if IE]>
  • IE version rendered with by default: IE 7

Windows Phone 8.1

Includes all versions up to GDR1

  • Rendering Engine: IE Mobile 11
  • Responds TRUE to: <!–[if IE 7]>
  • Responds TRUE to <!–[if IE]>
  • IE version rendered with by default: IE 7

Despite IE 10 and IE 11 having excellent standards support, Outlook Mobile renders email in IE 7 standards by default. This is possible because IE has the ability to use document modes of older versions of IE before itself. Because of this, CSS3 support is lost and responsive design techniques won’t work.

Outlook Mobile removes Doctypes in POP3/IMAP mailboxes

An explanation as to why less than optimal IE rendering is used by default could be because the doctype is stripped from any email upon landing on Windows Phone. For POP3/IMAP based email accounts, whatever doctype has been set in an email, is removed entirely. You can discover this by forwarding any email that’s landed in a POP3/IMAP based mailbox on Windows Phone to another device where you can analyse the source code. This is the likely cause for IE 7 standards being used by default as its a sign of IE running in compatibility mode, buts its not quirks mode as originally thought.

What’s interesting is despite this behaviour also occurring on Windows Phone 7.5/7.8 Outlook Mobile will still use IE9 rendering by default, making it the only two versions to render in standards mode without forcing the document mode.

A note on conditional comments in IE 10 and above

As my test emails used conditional comments, it’s important to note that from IE 10 onwards, support for conditional comments has been dropped from the browser completely. A conditional comment like <!–[if !IE]> for example would actually be displayed but this isn’t actually a genuine true response. The actual reason for this is because its treated as just a normal HTML comment. The rendering engine is still IE Mobile, it’s just IE 10 and above can no longer be queried via conditional comments.

Note: As IE 7 standards are used by default, conditional comments do provide a valid true or false response in this case as they are supported in that version.

Forcing the IE document mode

It was discovered a while ago by Michael Muscat on the Litmus community that this behaviour can be overridden with this meta tag:

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

This is something not specific to IE Mobile/Windows Phone but more general IE behaviour. You may actually recognise this tag from web projects, one example is the HTML5 boilerplate. What this meta tag does is force IE to render with its highest capable standards, whenever IE comes across this meta tag in the source code of a webpage, it’s an instruction for the browsing mode to change.

This behaviour carries over to Outlook Mobile when IE Mobile is used and it too will render with the highest possible IE standards that the version of IE Mobile within the OS is capable of when it sees this meta tag.

Tip: You can always find the exact version of IE Mobile by putting “about:version” in the address bar of IE Mobile on any Windows Phone device.

In short Windows Phone 7.5 and above all have CSS3 support, meaning responsive design IS possible in Outlook Mobile. All resources saying Windows Phone 8 doesn’t support media queries is wrong, Outlook Mobile just doesn’t render with standards mode by default.

Forcing edge mode will affect other IE based clients too!

This meta tag isn’t limited to just Windows Phone, other IE based clients will also benefit from this including:

  • Windows Live Mail
  • Outlook 2000, 2002, 2003
  • Outlook Express

In an weird twist, if Outlook 2003 is running on a clients machine that has Internet Explorer 9 installed and the meta tag is used, Outlook 2003 gains CSS3 support! Wilbert Heinen notes this in the mentioned Litmus community discussion, but we can expand on this a bit further.

Email on Acid did a write up a while ago that shows what IE version Outlook clients (2003 and below) could render with, the combination is dependant on several factors. Now however, with the meta tag above, you can prevent all of the differences and basically force some consistency based on the version of IE installed on the client machine in question, rather than the version that was originally present at the time of installation of Outlook.

Webkit support in IE Mobile 11 on Windows Phone 8.1 GDR1

Yes you’ve read that right, IE Mobile 11 in Windows Phone 8.1 GDR1 (The next update after 8.1) actually supports some -webkit specific vendor properties! The main two reasons as to why the IE team have done this are:

  1. Improve the overall web experience on Windows Phone
  2. Stop websites serving basic web experiences for IE Mobile clients unnecessarily

The main changes the IE team have made to remedy the point above are adjusting the UA (User Agent) string of IE itself, and also adding some support for -webkit properties and mapping them to IE equivalents.

I won’t go into too much detail on this as its more generic information to towards IE Mobile in general, however if you fancy a read of the changes read the official blog entry about it on MSDN.

Taking in all the back story to all of this, these changes also affect Outlook Mobile as some -webkit prefix properties will now render in Outlook Mobile for 8.1 GDR1. As a generic example a webkit media query like the one below will return true on IE 11 in 8.1 GDR1, whereas before it would have been ignored and returned false as you’d expect.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* IE Mobile 11 in 8.1 GDR1 will parse CSS in this media query :0*/
}

This potentially opens up better experiences for email more on par with iPhone and Android users where Windows Phone has been somewhat side lined, but now might make feature detection techniques i.e. detect wekbit vs non-webkit a little harder.

Exchange ActiveSync

Not every mailbox is going to be POP3/IMAP, there is also the enterprise segment to consider, which is where Office 365 and Exchange users sit. How do email campaigns on Windows Phone work for this user base? Find out in the final part of the series!

Share This:

Tags: