{"id":3069,"date":"2016-09-20T16:55:25","date_gmt":"2016-09-20T16:55:25","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=3069"},"modified":"2016-09-20T16:55:25","modified_gmt":"2016-09-20T16:55:25","slug":"gmail-responsive-email-win-for-email-community","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/gmail-responsive-email-win-for-email-community\/","title":{"rendered":"Responsive Email in Gmail: A Win For the Email Community"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/header-2.png\" alt=\"header\" width=\"600\" class=\"aligncenter size-full wp-image-3076\" \/><BR><\/p>\n<p>You might still be in disbelief after reading <a href=\"https:\/\/gmail.googleblog.com\/2016\/09\/better-emails-tailored-to-all-your-devices.html\">Google&#8217;s announcement<\/a> that Gmail will be supporting embedded styles and media queries. You are certainly not alone. Check out this article for a <a href=\"https:\/\/www.emailonacid.com\/blog\/article\/industry-news\/gmail-announces-style-and-media-query-support-what-this-means-for-you\">breakdown of the announcement<\/a>.<\/p>\n<p>This is a <a href=\"https:\/\/twitter.com\/search?q=gmail%20media%20queries\">really big deal<\/a> as it is the fruit of years of tireless efforts of the email community advocating for better CSS support in Gmail.<\/p>\n<div style=\"display:inline-block;border:1px solid:#aaaaaa;margin:20px auto;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/twitter-reactions-opt2.gif\" alt=\"twitter-reactions-opt\" width=\"587\" height=\"421\" class=\"aligncenter size-full wp-image-3149\" \/><\/div>\n<p>Email designers were disappointed when Gmail launched in 2004 without embedded style support. When Google <a href=\"http:\/\/www.techrepublic.com\/article\/lollipop-kills-stock-email-app-in-favor-of-gmail\/\">replaced the native Android client<\/a> that supported responsive email with the Gmail app, it became a colossal issue as emails would no longer be rendered using media queries in millions of Android devices.<\/p>\n<p>This problem was further compounded when Gmail introduced <a href=\"https:\/\/emails.hteumeuleu.com\/trying-to-make-sense-of-gmail-css-support-e88cd7995cea#.z0nwngahm\">rendering quirks<\/a> in each of their clients necessitating <a href=\"https:\/\/freshinbox.com\/blog\/gmail-on-ios-increases-font-size-on-some-emails\/\">time consuming hacks<\/a>. It became so bad that many email designers started to hate Gmail more than Outlook.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/remi-gmail-chart.png\" alt=\"remi-gmail-chart\" width=\"550\" class=\"aligncenter size-full wp-image-3077\" \/><br \/>\nSource: <a href=\"https:\/\/emails.hteumeuleu.com\/trying-to-make-sense-of-gmail-css-support-e88cd7995cea#.rw2twdnop\">R\u00e9mi Parmentier<\/a><BR><BR><\/p>\n<p>The email community banded together and tried to convince the Gmail team that supporting embedded styles and media queries would lead to a better user experience for their own users. For a long time, nothing seemed to change.<\/p>\n<p>Finally, it looks like we were heard.<BR><BR><\/p>\n<h3>8 Ways The Email Community Reached Out To Gmail.<\/h3>\n<p><BR><BR><\/p>\n<h4>1. Social Media<\/h4>\n<p>Social media was a natural channel to vent our frustrations with Gmail. Many #emailgeeks on Twitter voiced their displeasure with Gmail\u2019s lack of &lt;style&gt; support by trolling&#8230; I mean tweeting complaints to <a href=\"https:\/\/twitter.com\/gmail\">@gmail<\/a>, Gmail&#8217;s twitter account, with hashtags such as #letsfixemail and #canhasstyle. <\/p>\n<div class=\"video-container\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">&lt;!&#8211;[if <a href=\"https:\/\/twitter.com\/gmail\">@gmail<\/a>]&gt;<br \/>&lt;p&gt;Oh no! You are using a mail client that doesn&#39;t have any &lt;style&gt; or class=&quot;&quot;&lt;\/p&gt;<br \/>&lt;![endif]&#8211;&gt;<a href=\"https:\/\/twitter.com\/hashtag\/CanHasStyle?src=hash\">#CanHasStyle<\/a><a href=\"https:\/\/twitter.com\/hashtag\/LetsFixEmail?src=hash\">#LetsFixEmail<\/a><\/p>\n<p>&mdash; Mike Ragan (@Mike_Ragan) <a href=\"https:\/\/twitter.com\/Mike_Ragan\/status\/557864002425208832\">January 21, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n<p><BR><BR><\/p>\n<h4>2. Google\u2019s Forums<\/h4>\n<p>We tried to get Google&#8217;s attention by posting on the Gmail support forums.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-forum.png\" alt=\"gmail-forum\" width=\"490\" class=\"aligncenter size-full wp-image-3080\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-forum.png 546w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-forum-300x135.png 300w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><br \/>\n<a href=\"https:\/\/productforums.google.com\/forum\/#!topic\/gmail\/YFevHBTdBX0;\">Link<\/a><BR><BR> <\/p>\n<blockquote style=\"margin:0px 20px;font-size:24px;line-height:1.2em;\"><p>I like partying like it&#8217;s 1999 as much as anyone else, but I&#8217;m sick and tired of having to inline all my CSS&#8230;[You] make creating a quality mobile experience difficult (no @media tags&#8230;)&#8230;  You literally add an hour to my average work day.<\/p><\/blockquote>\n<p><a href=\"https:\/\/productforums.google.com\/forum\/#!topic\/gmail\/jAdEqzA9tU4\">Link<\/a><\/p>\n<p><BR><BR><BR><\/p>\n<h4>3. Conferences<\/h4>\n<p>Until recently, the conferences you&#8217;d likely meet developers from email clients would be at conferences on email technology or security. So a bunch of us decided to bring the issue to their turf.<\/p>\n<p>At Inbox Love 2014 in Mountain View, Ros Hodgekiss (<a href=\"https:\/\/twitter.com\/yarrcat\">@yarrcat<\/a>) and  Andrew King (<a href=\"https:\/\/twitter.com\/akingkiwi\">@akingkiwi<\/a>) from Campaign Monitor, Colin Nederkoorn (<a href=\"https:\/\/twitter.com\/alphacolin\">@alphacolin<\/a>) from Customer.io and myself presented to a room full of developers and product managers from the major email client developers. Folks from Gmail, Yahoo! Mail, AOL Mail and Outlook were there.<\/p>\n<p>Our topic: <a href=\"https:\/\/www.campaignmonitor.com\/blog\/email-marketing\/2014\/10\/inbox-from-google-gmail-media-queries-and-css-support-inbox-love\/\">CSS Support In Email &#8211; The Problem We Should Be Fixing First<\/a><\/p>\n<p>The talk was surprisingly well received by the audience and there was even <a href=\"http:\/\/www.youtube.com\/watch?v=7_Xr8Ryl64M&#038;list=PLY48zgWw-LUrO2OXB7YFVOeuP4XjxFMqp&#038;t=19m36s\">a live poll<\/a> on who wanted media queries in Gmail. The Twitter community also tuned in to offer their support including Litmus&#8217; <a href=\"https:\/\/twitter.com\/meladorri\/status\/527529723673710592\">Judge Jordan<\/a>.<\/p>\n<style>\n.video-container {\n\tposition: relative;\n\tpadding-bottom: 56.25%;\n\tpadding-top: 30px;\n\theight: 0;\n\toverflow: hidden;\n}\n.video-container iframe,  \n.video-container object,  \n.video-container embed {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n}\n.entry-content img, \n.entry-content iframe, \n.entry-content object, \n.entry-content embed {\n        max-width: 100%;\n}\n<\/style>\n<div class=\"video-container\">\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/lo6gdQxJ6a8\" frameborder=\"0\" allowfullscreen><\/iframe><\/div>\n<p><BR><BR><BR><\/p>\n<h4>4. Articles<\/h4>\n<p>We published articles that outline Gmail&#8217;s CSS transgressions in the hope that they reach the ears of engineers within Google.<\/p>\n<blockquote style=\"font-size:35px;line-height:1.2em;\"><p><a href=\"http:\/\/www.emaildesignreview.com\/email-design-best-practice\/googles-embarrassing-email-problem-2465\/\">Google&#8217;s Embarrassing Email Problem<\/a><\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-media-queries.png\" alt=\"gmail-media-queries\" width=\"550\" class=\"aligncenter size-full wp-image-3107\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-media-queries.png 639w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-media-queries-300x150.png 300w\" sizes=\"(max-width: 639px) 100vw, 639px\" \/><BR><BR><\/p>\n<blockquote style=\"font-size:35px;line-height:1.2em;\"><p><a href=\"https:\/\/techcrunch.com\/2015\/11\/10\/gmail-we-need-to-talk\/\">Gmail, We Need To Talk<\/a><\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/7-gmail-lumbergh.png\" alt=\"7-gmail-lumbergh\" width=\"444\" class=\"aligncenter size-full wp-image-3106\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/7-gmail-lumbergh.png 444w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/7-gmail-lumbergh-300x218.png 300w\" sizes=\"(max-width: 444px) 100vw, 444px\" \/><BR><BR><BR><\/p>\n<h4>5. Reddit<\/h4>\n<p>The Inbox by Gmail team had an AMA (Ask Me Anything) <a href=\"https:\/\/www.reddit.com\/r\/IAmA\/comments\/2o629q\/we_are_the_inbox_by_gmail_team_ask_us_anything\/\">session on Reddit<\/a>. The email community <a href=\"https:\/\/www.reddit.com\/r\/IAmA\/comments\/2o629q\/we_are_the_inbox_by_gmail_team_ask_us_anything\/cmk20ik\">showed up<\/a>!.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/reddit.png\" alt=\"reddit\" width=\"583\" height=\"163\" class=\"aligncenter size-full wp-image-3117\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/reddit.png 583w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/reddit-300x83.png 300w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><BR><BR><\/p>\n<h4>6. Humor<\/h4>\n<p>If you fail to win them over by sheer logic, try humor.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmailsupportmediaqueries.gif\" alt=\"gmailsupportmediaqueries\" width=\"550\" class=\"aligncenter size-full wp-image-3119\" \/><br \/>\n<a href=\"http:\/\/doesgmailsupportmediaqueriesyet.com\/\">doesgmailsupportmediaqueriesyet.com<\/a><BR><BR><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-grimace2.jpg\" alt=\"gmail-grimace2\" width=\"600\" class=\"aligncenter size-full wp-image-3120\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-grimace2.jpg 600w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/gmail-grimace2-300x158.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><br \/>\n<a href=\"https:\/\/www.flickr.com\/groups\/project-gmail-grimace\/\">Project Gmail Grimace<\/a> (2008)<BR><BR><\/p>\n<div class=\"video-container\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">Gmail has ripped off email developers for years. They have manipulated rendering for far too long while our government has done nothing.<\/p>\n<p>&mdash; Inbox J. Trump (@InboxTrump) <a href=\"https:\/\/twitter.com\/InboxTrump\/status\/771773947906027520\">September 2, 2016<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n<h4>7. ESP (No not Email Service Provider)<\/h4>\n<p>Lets not forget the <a href=\"https:\/\/www.campaignmonitor.com\/resources\/guides\/email-marketing-predictions-2016\/\">telepathic channel<\/a>.<\/p>\n<p><a href=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/alexwilliams.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/alexwilliams.jpg\" alt=\"alexwilliams\" width=\"311\" height=\"187\" class=\"aligncenter size-full wp-image-3121\" srcset=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/alexwilliams.jpg 311w, https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/alexwilliams-300x180.jpg 300w\" sizes=\"(max-width: 311px) 100vw, 311px\" \/><\/a><\/p>\n<blockquote style=\"margin:0px 20px;font-size:24px;line-height:1.2em;\"><p>My prediction is that Gmail will add style support to their webmail clients and media query support to their mobile apps.<\/p><\/blockquote>\n<p><BR><BR><BR><\/p>\n<h4>8. The Personal Touch<\/h4>\n<p>A large part of the credit in getting Gmail to fix their CSS support goes to those with connections within Google. Kudos to Eric Lepetit (<a href=\"https:\/\/twitter.com\/ericlepetitsf\">@ericlepetitsf<\/a>) and his team at Nest (a Google company) who helped make the case to the Gmail team that better CSS support would also benefit email marketers and designers within Google.<BR><BR><BR><\/p>\n<h3>Credit<\/h3>\n<p>The collective support of #emailgeeks in pushing Gmail to support better HTML\/CSS cannot be overstated. Although there is no way to  recognize everyone&#8217;s contributions here&#8217;s a list of a few active members of the community who <a href=\"http:\/\/www.emaildesignreview.com\/email-community\/52-people-id-want-at-my-email-dinner-party-2925\/\">have blogs or are active on twitter<\/a>.<\/p>\n<p>You can also find email geeks helping each other out at email design forums. You can spot them on the <a href=\"https:\/\/www.emailonacid.com\/forum\">Email on Acid<\/a>, <a href=\"https:\/\/litmus.com\/community\">Litmus<\/a> and <a href=\"https:\/\/www.campaignmonitor.com\/forums\/\">Campaign Monitor<\/a> forums.  Viktor Edvardsson (<a href=\"https:\/\/twitter.com\/viktoredv\">@viktoredv<\/a>) has also recently set up an #emailgeeks Slack channel. DM him for more details.<\/p>\n<p>Last but not least of course a <b>Huge Thank You!<\/b> goes out to the Gmail team for doing the right thing for their users as well as for email designers and developers everywhere.<\/p>\n<p>The spotlight is now squarely on Microsoft Outlook and its antiquated HTML support. This may be an opportune time as Microsoft has <a href=\"https:\/\/freshinbox.com\/blog\/the-outlook-team-reaches-out\/\">started to engage<\/a> with the email community.<BR><BR><BR><\/p>\n<p>Right now, lets take a moment to celebrate the email community&#8217;s achievement in helping to foster a pivotal change for email.<BR><BR><\/p>\n<p>Cheers!<BR><BR><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/freshinbox.com\/blog\/wp-content\/uploads\/2016\/09\/leonardo.gif\" alt=\"leonardo\" width=\"600\" class=\"aligncenter size-full wp-image-3132\" \/><br \/>\n<span style=\"font-size:11px;\">Source <a href=\"http:\/\/www.warnerbros.com\/\">Warnerbros<\/a><\/span><br \/>\n<BR><BR><br \/>\n<BR><BR><\/p>\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>\n","protected":false},"excerpt":{"rendered":"<p>The email community banded together and tried to convince the Gmail team that supporting embedded styles and media queries would lead to a better user experience for their own users. For a long time, nothing seemed to change.<BR><BR><\/p>\n<p>Finally, it looks like we were heard&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,46],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3069"}],"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=3069"}],"version-history":[{"count":113,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3069\/revisions"}],"predecessor-version":[{"id":3199,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/3069\/revisions\/3199"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/3132"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=3069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=3069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=3069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}