We’ve got a newbie email client on the block, shipping with all new Windows 8 systems and laptops the Windows 8 Mail client may be not be widely used yet, but over time a significant number of recipients maybe opening your mail on this interface.

Don’t Panic

The HTML rendering is basically the same as Outlook.com / Hotmail.com so there isn’t too much to worry about. There are a couple of issues to be aware of however. Particularly if you are producing responsive emails using media queries.

When a responsive email is received in Windows 8 Mail, the app displays the mobile version of the email using the media queries to determine how the email appears without any reference to the viewing window or screen size. This isn’t very helpful at all, particularly when the only simple fix at the moment causes the email to not render correctly on the Windows Phone.

The way to fix the issue is to ensure that only webkit based email programs use them. Both iPhone and Android use webkit and so this will solve the issue in 99% of cases, however as mentioned previously Windows Phone do not use webkit and so you may run into trouble.

To do this is very simple, you need to simply add the following information to your existing media query expression.

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)

Give this a try and this should easily sort out any issues with the Windows 8 Mail App.