You’ve overhauled the entire way you design your emails to take advantage of the phenomenal capabilities of Responsive Web Design (RWD) and you are absolutely thrilled at the way that the entire layout flows and reflows to suit just about any screen size. Then you get an email from a customer stating that your emails are now overflowing their screen, another that says that they can’t read the type, and yet another that says that they look like their dog’s breakfast. What’s happened? You’ve run headlong into the evil RWD app incompatibilities! RWD is nowhere near as universal as we’d like to think it is but there are some workarounds which will restore some measure of cross-app sanity to your email layout displays.

Some apps reject RWD

We have to remember that RWD is a relatively new development and we can’t expect older operating systems to embrace our responsive emails. That’s why if you’re displaying your emails on:

• BlackBerry OS 5
• Windows Phone 7
• Windows Mobile 6.1

…then you’d better just brace yourself as your RWD will be hopelessly messed up on those OSs. However, it’s not just for those older OS variants as there are various extremely popular apps which simply reject RWD:

• Android Gmail app
• Android Yahoo Mail app
• iPhone Gmail app
• iPhone Mailbox app
• iPhone Yahoo Mail app

The safe list of RWD

The “safe list” of RWD mobile display unfortunately is limited to:

• Android 2.2 Froyo native client
• Android 2.3 Gingerbread native client
• Android 4.0 Ice Cream Sandwich native client
• Android 4.1 Jelly bean native client
• Android Outlook.com app
• BlackBerry OS 7
• BlackBerry Z10
• Good.com Mail app
• iPad Birdseye Mail
• iPad full-sized native
• iPad Incredimail
• iPad mini native
• iPhone Boxer app
• iPhone Evomail app
• iPhone Mailbox app
• iPhone native
• iPhone Sparrow app
• iPod Touch native
• Microsoft Surface tablet – Outlook.com/Hotmail
• Original Kindle Fire + HD native client
• Palm webOS 4.5
• Sony PlayStation Vita game console
• Windows Phone 7.5

That’s pretty well it… Now you might review that list and wonder if we’ve left out Windows 8 and the answer is yes, and no. In order to keep Windows 8 from misreading your RWD code in many cases you need to add a special little line to your media query:

-webkit-min-device-pixel-ratio: 1

Yes, isn’t it just like Microsoft to require a special little tweak all its own?

Consider returning to fixed 600 px width

So if you’re ready to pull the last few hair you have left on your head over all this RWD confusion, there are some things that you can do to get over these obstacles. The first option is to just throw up your hands and go back to a fixed width 600 px layout and forget that RWD ever existed. While this may be the low tech way of proceeding it does have some advantages in that most devices and apps will display that email just fine.

If you’re not ready to just walk away from RWD, then you might want to consider taking the plunge into Conditional Style Sheets, for older versions of Internet Explorer for instance. You create and load a basic style sheet that creates a multi-column layout for any display that is larger than your typical comfortable minimum and let it rip. There are various ways of doing this but Jeremy Keith’s approach seems to be the most logical and workable so check it out. You could also resort to polyfilling with respond.js or css3-mediaqueries-js but now you’re talking about getting knee deep in research and often obtuse details. Whatever you decide, make sure that you have a highly competent expert on board!