Coming Soon to Gmail: Better Email Rendering
By cameron in css,email development,email templates,gmail,MailChimp News,media queries
Last week, Gmail announced that they’re going to start supporting media queries. Email geeks everywhere collectively lost their minds.
What’s changing?
Previously, Gmail stripped the <head> and <style> elements from email HTML. Any CSS—the code responsible for styling HTML—had to be applied inline to render, which is a pain and also results in bloated emails. Even with those styles inlined, there were tons of limitations on what types of CSS styling were supported. Here at MailChimp, we couldn’t use certain styles at all because Gmail just deleted them. With Google’s announcement, those limitations will be a thing of the past.
In addition to supporting the inclusion of the <style> element, Gmail will allow the use of media queries, which means fewer wild workarounds to make MailChimp’s emails behave consistently on mobile devices. Now, it’ll be easier to better optimize email layouts for a variety of devices and screen sizes.
What does this mean for MailChimp users?
These changes are expected to roll out for Gmail and Inbox by the end of September, but MailChimp’s templates are ready now—and if you’re using them in your campaigns, you don’t have to lift a finger.
Although our templates were built to work around Gmail’s past limitations, they’ve always included the code for which Google is now rolling out support. Which is to say: campaigns will render more consistently across all clients.
One of the best illustrations of this can be seen in our 3-column layout templates. Before the change, these column sections wouldn’t span the full width of the display window in Gmail (fig. 1), which made the email look a little wonky. Going forward, that issue is resolved, and the columns work as we’d always intended (fig. 2):
[fig. 1—without media queries]
[fig. 2—with media queries]
If you’re a developer and you’re building your own templates, this means significantly less work to create a consistent experience for your subscribers. Historically, any documentation on Gmail-supported CSS properties was poor, and email developers have spent a fair amount of time guessing and testing their email markup. Now, Google has created a guide that thoroughly outlines their CSS support.
What’s next?
Changes like this are steadily helping to drag email development into this century. And the best part is, Google isn’t the only one stepping up to the plate. A recent partnership between Litmus and Microsoft promises to make support in Outlook—another historically difficult email client—better as well. For our part, we’ll keep creating templates that offer the best possible experience across email clients while also doing our best to anticipate change.