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 clientTypeMedia Query / ResponsiveEDMdesigner generated HTML
Outlook 2007/2010/2013desktopnot supporteddesktop version
Outlook 97/03/Express/Maildesktopnot supporteddesktop version
Thunderbird 31desktopnot supporteddesktop version
Apple Mail 6.5+desktopsupporteddesktop/mobile version (based on window width)
iOS 7 – iPadtabletsupporteddesktop/mobile version (based on orientation and resolution)
iOS 7 – iPhonemobilesupportedmobile version
Gmail Appmobilenot supporteddesktop version without width values
Gmail.combrowsernot supporteddesktop version
Outlook.combrowsersupporteddesktop/mobile version (based on window width)
YahooMailbrowsernot supporteddesktop version
It’s easy to be responsive in web browsers, since they have the ability, to render (re-render) the HTML any time and they also support scripts (JavaScript, activeX, Flash, etc) which help us change look and feel easily. **Email clients regularly deny all kind of scripts** for security issues **and** in addition they **tend to render your HTML code only once** (when it shows up on your screen) and won’t change it if you resize your reader window for example.

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!

Author
Gergely Mecs

Gergely Mecs

Chief Frontend Developer @ EDMdesigner.com

  • 16 Command Examples to Send Email From The Linux Command Line 16 Command Examples to Send Email From The Linux Command Line

    In this post you'll learn how to send emails from the Linux command line. I'll show the most often used commands, SMTP configuration and terminal options.

    Read more
  • How to Create Responsive Email Designs with React Native How to Create Responsive Email Designs with React Native

    Responsive email coding is complex. Are you native in React Native? Abstract away email HTML & CSS into components with react-html-email or mjml frameworks.

    Read more
  • Using PHP for Sending HTML Emails with Mailgun, Sendgrid & Amazon SES Using PHP for Sending HTML Emails with Mailgun, Sendgrid & Amazon SES

    Ever wondered how to use PHP for sending HTML email templates with Mailgun, Sendgrid and Amazon SES? Read on for step-by-step coding advice.

    Read more