Email Client Media Query and Embedded Styles Support 2014
For the latest interactive and dynamic CSS support in email clients,
see: Kinetic Email CSS Support.
see: Kinetic Email CSS Support.
The email client landscape is very fluid. Webmail providers make frequent tweaks which often affect the rendering of our email design.
The following is a table of media query and embedded styles (CSS placed within <style> tags) support in the various major email clients as of January 2014 – attributes used in the interactive techniques covered in this blog:
| <style> | @media | |
|---|---|---|
| Webmail | ||
| AOL | yes | yes |
| Gmail | no | no |
| Outlook.com (Hotmail) | yes | yes |
| Yahoo! Mail* | yes | yes |
| Desktop | ||
| Apple Mail 6 | yes | yes |
| Outlook 2003** | yes | no |
| Outlook 2007/10/13*** | yes | no |
| Mobile | ||
| Android 2.3+ Mail | yes | yes |
| iOS 5+ Mail | yes | yes |
| Windows Phone 7.5 | yes | yes |
| Gmail app + mobile web | no | no |
| Outlook.com mobile web | no | no |
| Yahoo! Mail app + mobile web | yes | yes |
Key takeaways:
- Gmail is the only major email client that still does not support embedded styles. This limits our ability to implement interactive techniques such as using the :hover pseudoclass.
- The native email clients of mobile operating systems support media queries and that means the majority of mobile users will be able to view the fruits of responsive design. To learn more about responsive email design check out this guide by Elliot Ross.
- The app and mobile web versions of the major webmail providers do not support media queries and hence will display the “desktop” version of the email. For these clients consider scalable email design. Litmus has a good overview of responsive vs scalable design.
- The actual CSS styles supported by each of these clients vary. For more details refer to Campaign Monitor’s CSS Guide.
* Yahoo! Mail added partial support for media queries in 2015.
** For a 10 year old client Outlook 2003 is surprisingly popular. However it does not support the newer CSS3 styles which includes media queries.
*** Outlook 2007/10/13 HTML support is a can of worms. Be careful when attempting ambitious email layout. Consider using Litmus or Email on Acid to test your designs.
Latest Comments