{"id":174,"date":"2014-01-13T01:01:16","date_gmt":"2014-01-13T01:01:16","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=174"},"modified":"2015-09-02T10:43:17","modified_gmt":"2015-09-02T10:43:17","slug":"email-client-media-query-and-embedded-styles-support-2014","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/email-client-media-query-and-embedded-styles-support-2014\/","title":{"rendered":"Email Client Media Query and Embedded Styles Support 2014"},"content":{"rendered":"<div style=\"max-width:450px;margin:10px auto;padding:10px;border:1px solid #5E195E;text-align:center;border-radius:8px\">\nFor the latest interactive and dynamic CSS support in email clients,<BR> see: <a href=\"https:\/\/freshinbox.com\/resources\/css.php\">Kinetic Email CSS Support<\/a>.\n<\/div>\n<p><BR><\/p>\n<p>The email client landscape is very fluid. Webmail providers make frequent tweaks which often affect the rendering of our email design.<\/p>\n<p>The following is a table of media query and embedded styles (CSS placed within &lt;style&gt; tags) support in the various major email clients as of January 2014 &#8211; attributes used in the interactive techniques covered in this blog:<\/p>\n<style><!--\n.shead { font-weight: bold; text-decoration: underline; } .mediatable { width: 400px; margin-left:20px; border-collapse:collapse; background-color: #fafafa; border:2px solid #888888; border-radius: 15px; } .mediatable td,.mediatable th{ border: 1px solid #888888; padding:5px 10px; } .mediatable th{ font-weight: bold; } .sno, .syes{ color: white; text-align: center; } .sno { background-color: #BA2B03; } .syes { background-color: green; }\n--><\/style>\n<table class=\"mediatable\" width=\"400\" border=\"0\">\n<tbody>\n<tr>\n<th><\/th>\n<th>&lt;style&gt;<\/th>\n<th>@media<\/th>\n<\/tr>\n<tr>\n<td class=\"shead\">Webmail<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>AOL<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td>Gmail<\/td>\n<td class=\"sno\">no<\/td>\n<td class=\"sno\">no<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (Hotmail)<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail<sup>*<\/sup><\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td class=\"shead\">Desktop<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Apple Mail 6<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2003<sup>**<\/sup><\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"sno\">no<\/td>\n<\/tr>\n<tr>\n<td>Outlook 2007\/10\/13<sup>***<\/sup><\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"sno\">no<\/td>\n<\/tr>\n<tr>\n<td class=\"shead\">Mobile<\/td>\n<td><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Android 2.3+ Mail<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td>iOS 5+ Mail<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td>Windows Phone 7.5<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<tr>\n<td>Gmail app + mobile web<\/td>\n<td class=\"sno\">no<\/td>\n<td class=\"sno\">no<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com mobile web<\/td>\n<td class=\"sno\">no<\/td>\n<td class=\"sno\">no<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail app + mobile web<\/td>\n<td class=\"syes\">yes<\/td>\n<td class=\"syes\">yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Key takeaways:<\/strong><\/p>\n<ul>\n<li>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.<\/li>\n<li>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 <a href=\"http:\/\/www.creativebloq.com\/responsive-web-design\/build-responsive-emails-2132830\" target=\"_blank\">this guide<\/a> by Elliot Ross.<\/li>\n<li>The app and mobile web versions of the major webmail providers do not support media queries and hence will display the &#8220;desktop&#8221; version of the email. For these clients consider scalable email design. Litmus has a good overview of <a href=\"https:\/\/litmus.com\/blog\/responsive-scalable-email-design-whats-the-difference\" target=\"_blank\">responsive vs scalable design<\/a>.<\/li>\n<li>The actual CSS styles supported by each of these clients vary. For more details refer to <a href=\"http:\/\/www.campaignmonitor.com\/css\/\" target=\"_blank\">Campaign Monitor&#8217;s CSS Guide<\/a>.<\/li>\n<\/ul>\n<div style=\"text-decoration: italic; color: #888888;\"><sup>*<\/sup> Yahoo! Mail <a href=\"https:\/\/freshinbox.com\/blog\/yahoo-mail-fixes-media-query-bug-yahoo\/\">added partial support for media queries<\/a> in 2015.&nbsp;<\/p>\n<p><sup>**<\/sup> For a 10 year old client Outlook 2003 is surprisingly popular. However it does not support the newer CSS3 styles which includes media queries.<\/p>\n<p><sup>***<\/sup> Outlook 2007\/10\/13 HTML support is a can of worms. Be careful when attempting ambitious email layout. Consider using <a href=\"http:\/\/litmus.com\" target=\"_blank\">Litmus<\/a> or <a href=\"http:\/\/emailonacid.com\" target=\"_blank\">Email on Acid<\/a> to test your designs.<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n<p><BR><BR><br \/>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The email client landscape is very fluid. Webmail providers make frequent tweaks which often affect the rendering of our email design.<BR><BR><\/p>\n<p>The following is a table of media query and embedded styles (CSS placed within &lt;style&gt; tags) support in the various major email clients as of January 2014 &#8211; attributes used in the interactive techniques covered in this blog&#8230;<\/p>\n","protected":false},"author":2,"featured_media":142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,28],"tags":[8,11,10,30,5,16,9,4,14,18,29,15,26,13,27],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":33,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":2191,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions\/2191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/142"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}