The ‘responsive’ word in the world of web browsers, means that the layout of the content will adjust to the width of the viewport, but it won’t happen automatically! Even if you code a superb responsive email template, with the appropriate CSS based media queries and CSS properties for different viewport sizes, your responsive email won’t change it’s layout in a lot of email clients. Why?
Because not all email clients support CSS media queries. Only modern web browsers do! The field of email works a bit differently, as usual.
Email clients regularly strip parts of the HTML for various security reasons. Also sometimes they remove CSS media queries too, or the viewport meta tag, which helps us to set the default behavior for different pixel densities and device widths.
And this is still not the whole picture! There are additional email client specific nuances, which tend to break up everything.
For example YahooMail does not support CSS media queries, but still allows all of the CSS properties that we include in the media query blocks. That can make a really big mess.
Here’s a summary of how the most popular email clients will handle our (and others’) responsive emails templates as well. We hope it helps clear the air!
|Email client||Type||Media Query / Responsive||EDMdesigner generated HTML|
|Outlook 2007/2010/2013||desktop||not supported||desktop version|
|Outlook 97/03/Express/Mail||desktop||not supported||desktop version|
|Thunderbird 31||desktop||not supported||desktop version|
|Apple Mail 6.5+||desktop||supported||desktop/mobile version (based on window width)|
|iOS 7 – iPad||tablet||supported||desktop/mobile version (based on orientation and resolution)|
|iOS 7 – iPhone||mobile||supported||mobile version|
|Gmail App||mobile||not supported||desktop version without width values|
|Gmail.com||browser||not supported||desktop version|
|Outlook.com||browser||supported||desktop/mobile version (based on window width)|
|YahooMail||browser||not supported||desktop version|
Email client developers do not really care about rendering HTML on-the-fly. They focus on building a secure software and frankly this is the easiest way. But not the best one at all. Until the developers of various email clients stick to this old style method, we won’t be able to produce magically responsive email templates.
We “just” have to accept that responsive emails won’t be perfectly responsive in many email clients. It’s strange, we know. But that’s all folks!
Beginner's Guide to Using Sass in Email Coding
Do you repeat bits of CSS code across email template projects? Learn to use the Sass preprocessor language to change that and design reusable components.Read more
Open Source Email HTML Modification Tools for Email Developers
Grab these free & open-source HTML code modification tools created by EDMdesigner specifically for email coders.Read more
Managing Full-time Employees at a Growing SaaS Company
In this article you can read about how an early-stage startup can overcome management difficulties with the SCRUM methodology and the pomodoro technique.Read more