Responsive Design for Gmail is Here — But What the Hell Took So Long?

Two weeks ago, Google made an announcement that will impact just about anyone who develops, designs, or sends email marketing campaigns. After years of pleading, Google revealed that Gmail would finally support embedded style tags and CSS media queries.

That’s right, folks. You can now use a <style> element and Gmail won’t strip out everything in the <head> of the document. Let’s pause now for live footage of every ecommerce email designer and developer upon hearing this news:

giphyIn a blog post announcing the update, Google’s Associate Product Manager, Pierce Vollucci, said the change came in response to “discussions with email designers” who identified it as the most important feature to add to give them “more control over how their messages are rendered.” As Vollucci wrote:

When you send emails, your recipients might read them on a computer, tablet, or phone—or more likely, all three. However your message might look different on all these devices.

While I’m sure Pierce is an incredibly intelligent guy, I read that and thought: No kidding?Why the Delay on Such an Important Feature?So, what took so long?

Truthfully, the announcement and the blog post felt like something that an innovative company like Google should have written a few years ago. Mobile devices aren’t new and the need for responsive design isn’t new (and hasn’t been ignored by other email platforms). So, why did it take until September 2016 for Google to support responsive emails that support media queries?

Good question.

The interesting thing about Gmail’s laggard approach to responsive email design and CSS media queries is that Google has been incredibly progressive in other areas of email innovation. As Email Design Review pointed out last year, Google’s arguably done more to progress email in the last few years than anyone else. For instance, Gmail was among the first to provide:

  • Large amounts of free storage
  • Search functionality
  • A mobile app
  • Multiple mailbox toggling
  • An integration with Calendar and other third-party apps

The challenge with responsive support, media queries, and custom CSS styling, however, was this:  Gmail has traditionally not handled classes or IDs, which has made internal stylesheets a non-starter… and forced designers to inline CSS instead to get emails to render correctly in Gmail. For every style tag. Which basically defeats the purpose of CSS in the first place, but hey — sometimes it’s fun to code like it’s 1999, right?

Not really.

But by announcing their support for responsive design and tags embedded in the head of an email, Google is taking a major step in bringing email into this century. The last few weeks have seen the changes quietly rolling out across the Google email ecosystem. What Does This Mean for Ecommerce Marketers?Of course, the past is the past. Now that Gmail’s responsive shortcomings and lack of stylesheet support appear to be behind us, it’s time to focus on what this change means for ecommerce marketers.

The good news is that this part is pretty simple.

When you send emails to Gmail recipients going forward, you can rest assured that your message will be formatted the way you intended — regardless of whether it’s viewed on a MacBook Pro, or a phone or tablet in landscape or portrait mode. This means your emails will automatically and responsively adapt to width, rotation, device, and resolution — all without the need for inline CSS.

What does that mean for email marketers?

That’s also pretty simple: Fewer headaches, less reliance on developers to hack together a solution, and more time to focus on the things that really matter.Keep LearningInterested in getting more tips and advice like this? Subscribe to our newsletter and get our freshest content on ecommerce marketing and more.

Sign Up for the Klaviyo Newsletter

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})

Back to Blog Home