Gmail gets responsive design support

Life is about to get a whole lot better for email marketers and designers.

That’s because Google recently announced that by the end of this month, Gmail will support CSS media queries, making true responsive design a reality for the popular email service.

In a blog post, Google’s Pierce Vollucci and Steve Bazyl explained that based on feedback from email designers, Gmail will first support media queries based on width, orientation and resolution, but noted “this is just one part of an overall effort to expand CSS support in Gmail and to give email designers more control over how their messages are rendered,” hinting that additional niceties could be on the way as well.

Well overdue

Media query support couldn’t come soon enough. By most estimates, the majority of emails are now opened on mobile devices, making it imperative for email marketers to deliver emails that look good when read on these devices. Frequently, doing that has involved less-than-ideal workarounds. For example, some have taken mobile-first and even Gmail-first approaches to email design.

With Gmail adding media query support, email testing platform Litmus says two-thirds of email clients will now support responsive design. According to Litmus’ Kevin Mandeville, the implications of this are significant.

Most notably, he says that Google’s move will reduce the need for “hacky layout structures.” It could also encourage holdouts to make changes that bring us closer to a standard for email. “We hope this becomes the norm with other email clients like Windows Phone following suit,” Mandeville wrote.

He also noted that Google is adding support for a number of CSS font and background properties, so email designers will have more typography options and be able to take advantage of “scalable and responsive background images.”

Another biggie

Another major development that will have email marketers and designers jumping for joy is that Google is also now supporting <style> blocks. Amazingly, Gmail was the only remaining major email client that didn’t support these, forcing the use of CSS inlining. With <style> blocks now supported, CSS inlining will soon be a thing of the past.