The Big Lebowski
Google recently announced that they will be supporting media queries within their Gmail platform which is great news for the email community. I was ecstatic when I heard the news and I can only imagine the cheers (and tears) of joy when other email developers around the world were notified as well. Although this update has not been released just yet, Google has hinted that it will be in place by the end of 2016.
For those who aren’t familiar with media queries, it’s CSS code that allows web developers to create different layouts for different screen (view port) sizes. For example, the same webpage can have two or three columns on a desktop browser, and on a mobile device it can be transformed into a single column. This is a standard practice for websites as every browser supports media queries. For more technical details about media queries check out the following article regarding their use in email.
Unfortunately, we are dealing with email clients and nothing is that easy. There are no HTML standards when it comes to email rendering. Every email client displays email differently. Prior to Gmail’s forthcoming update, email developers were forced to inline the CSS "style" block as they were completely removed. Making the email HTML bloated, harder to maintain and non-responsive on mobile devices. The impact being the more than 1 billion active Gmail users would see the desktop version of the email within the mobile Gmail applications.
To compensate for the lack of embedded CSS, email developers started using what’s called Fluid-Hybrid design. This is a way to create responsiveness on a mobile device while not be reliant on CSS media queries. The only minor issue with this methodology is that developers cannot hide display elements like they can if using responsive design. What you see is what you get.
To be fair, Gmail is not the only big player in the industry that is making things difficult for email developers. Microsoft is also contributing to the difficulties by using their Word processor to render email in Outlook. Word has very limited support for standard CSS and container elements, forcing developers to use tables instead of div’s. There are many rumors as to why Microsoft uses Word in Outlook but my hunch is that it has to do with text formatting when creating and replying to emails.
Future of Email Design
As significant of an update as this is to Gmail, does it have a major impact on the way email developers create emails? The answer is yes and no. It will certainly make developing emails a lot easier and this gets us one step closer to creating some type of standard in email rendering. Not only is Gmail making strides to support more up-to-date coding methodologies but Microsoft is also now starting to listen to what they can do better as well.
However, this doesn’t mean that marketers and developers should completely rewrite all of their templates to only use media queries for mobile responsiveness. There is still a much needed use for Fluid-Hybrid design due to the following circumstances:
- Subscribers use mobile Gmail applications with non-Gmail accounts. In this case media queries are still not supported until Google updates those mobile apps.
- Gmail isn’t the only email client to not support media queries, i.e. Microsoft Outlook.
- Mobile screen size variations make it very difficult to create different media query breakpoints for every size combination.
- New mobile email applications are being released and some of them make an effort to support media queries while others focus more on usability.
My suggestion is to incorporate both responsive and fluid-hybrid methodologies within your email templates. It’s not that difficult to do and will help ensure subscribers are receiving the best possible viewing experience, regardless of email client.
As a marketer, why should I care?
Even though I have been directing most of this conversation toward how this update helps email developers, email marketers will be impacted by this change as well.
This will free up the time of your email developers, giving them more opportunities to provide the best possible experience for your subscribers. Some of the ways they can do this is by focusing on adding progressive enhancements, incorporating interactivity and creating more templates.
There has also been a lot of debate lately on whether email marketers should send more email. With this update from Gmail, marketers and designers will now have the opportunity to spend more time streamlining their campaign processes. Thus, increasing their campaign bandwidth and giving them the ability to test that theory out for themselves.
This is a great step toward having some type of email standards and I applaud Google for adding support for media queries. However, we are still a ways off, and a lot still needs to change. In the past there have been movements, fixoutlook.org by Campaign Monitor, to petition Microsoft to improve Outlook. However, that didn’t seem to have any affect. We were all hoping when Microsoft released Outlook 2016 it would use webkit, like it did for the Mac version of Outlook, but that didn’t happen.
Unfortunately, we are stuck dealing with desktop email clients that don’t support common HTML standards for quite some time. Simply due to the fact that companies are not going to release an update to unsupported applications (i.e. Outlook 2007 and 2013). Until email clients like those become obsolete, we are stuck with using tables as layout containers.
A New Hope
It’s an exciting time to be involved in the email industry. We are leaps and bounds from where we were seven years ago when I had the opportunity to join the email community. The innovations that have been made with email are astonishing.
With all the innovation in email, there really haven’t been many improvements in the way emails are being rendered within email clients. We are still having to code email like we did in the 1990’s.
That’s what gets me so psyched about this announcement from Gmail! Providers are starting to listen to the feedback from the community and creating an open dialog with them as well. Let’s hope this trend continues so we see more positive changes with email rendering.
In the Know
Interested in knowing when Google releases media query support within Gmail? If so, we have created a site, www.gmailupdates.com, that leverages our testing platform and checks every five minutes. Just enter your email address and we will notify you as soon as it's released.