Article

Roland Pokornyik
Roland Pokornyik 10 October 2016

Coding Responsive HTML Emails After the Gmail Update

Gmail will soon extend their CSS support, which should mean that responsive emails will work like a charm. We are super excited about the news, but cautious as well. We decided to test all different responsive email coding approaches thoroughly, to see how they will work in the new Gmail and Inbox. This article is continuously being updated!

On August 31, 2016, a huge thing happened. Gmail started to support display:none; in email. The email community blew up. Everybody was tweeting about it and a lot of email developers started to play around with it.

Although it was very exciting news from Google, even bigger news happened on September 14, 2016. Google has announced that they will expand their CSS support, which means that they will support the style tag in the head of the email HTML. They are going to support many CSS properties but most importantly they will also support media queries.

is the biggest news in email marketing and email design in the last decade.

Litmus, Email on Acid, Eliot Ross and many others have written great articles about it. They are focusing on the possibilities, the long and short term effects of this major update, and questioning the unknown things.

Gmail-update-(1).png

One of my favorite tweets on this topic is from Nicole Merlin, a well known email design and development expert from Australia:

Here are other  EmailGeeks reactions as well:

As you can see email developers have huge expectations for the update, in the hopes that it will rewrite the rules of email coding.

Just like anyone else on this field, our team at – EDMdesigner – wanted to see it in real life already. We wanted to play around with it and we wanted to test every single detail to find the caveats and to rewire our brains to embrace the possibilities of HTML email of the 21st century.

We were so EXCITED! We wanted to know the most crucial details as soon as possible.
This is why we took the example HTML from the official documentation and we crafted some basic test cases to see what’s really possible in the new (web and mobile) email clients of Google.
We also included the Litmus tests of other email clients upfront to gain a more complete picture of the HTML email of the future. 

Our test based on the test HTML from the official developer documentation by Google. 
During the test, our focus was on the most important CSS properties - the ones which can be used to create layouts.These properties are the following:

  • width, min-width, max-width

  • height, min-height, max-height

  • float

  • display

Together with media queries, we can adopt our design to different screen sizes.

We tested them in two ways: mobile first and desktop first.

You can see all the Basic Litmus Test  results of CSS properties here..
 

As you can see, the results of the mobile first tests were much worse than the desktop first. (Again, we exclude Gmail from the investigation here because we assume that it will work nicely soon.) It’s because desktop email clients have been existing for a long, long time – much before media queries arose.

Hopefully, Litmus and Microsoft will make email better very, very soon. Until that, it might be an option to use a hybrid solution, where we use IE conditionals so only Outlooks will have to use the greatest invention of the 90’s. 

Besides the basic examples, we created a more complex template in which we can show how much easier our lives and how much smaller our email HTMLs will be. We generated this email codes with our generator. (The notable thing is that templates generated with our generator are responsive already so you don’t have to worry about the Gmail update - they will adapt automatically.)

Conclusion

In the end, Gmail is a huge player on the market, so if we assume that Gmail (and all the other email clients from Google) will support media queries, that’s truly a game changer in this field. 

We will be able to change a lot of things. We won’t have to necessarily inline every CSS property – which has a very good effect on the size of the email – although if you want to support legacy clients, that’s still a must. That’s the same for tables. Outlooks are the biggest friends of tables, and since those clients have huge share on the market, we will still need to use them in some way.

If your table based design is prepared for responsive techniques, then this change probably won’t cause you a lot of headaches, but of course it’s better to check. We are quite confident, that our generated HTMLs will render beautifully after Gmail starts to support the style tag, but of course we are testing continuously if the updates are out yet.

We are curiously waiting for the updates to happen to check out everything as soon as possible. There are some questions which are still poking at the back of our brains from time to time.

Will Gmail and Inbox work in the same way? What about Google Apps?
Will the updates come out at the same time? Will there be any time differences between the updates in different countries?
What about mobile clients? How fast will users update them? When will we be able to say that most users (90%+) use the new version already?


UPDATE 05/10/2016


Although the progress of the update is slow, we can be very happy because the features that we saw in the announcement are becoming true.

Gmail and Inbox are supporting the style already in the browser and there are promising results on modern Androdid devices as well.

Original Article

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
The New '4Ps of Marketing'

The New '4Ps of Marketing'

Neil H. Borden, in 1964, gifted the world with the 4Ps of the Marketing Mix: Product, Price, Place and Promotion. This concept has been a cornerstone of business marketing. However, there are new 4Ps of Marketing – just as powerful and just as game changing as Neil Borden’s.

Daisy Kent
Daisy Kent 18 May 2017
Read more
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
How To Calculate Marketing ROI

How To Calculate Marketing ROI

Calculating marketing ROI is an exercise in patience and accuracy. The formula to calculate basic, short-term marketing ROI is simple: ROI = (Incremental Profit – Campaign Cost) / Campaign Cost. But marketers know that the formula—while accurate—is far too often misapplied to their efforts.

James Loomstein
James Loomstein 16 May 2017
Read more
Forget SWOT, The Pareto Rule Holds The Secret To Your Online Success

Forget SWOT, The Pareto Rule Holds The Secret To Your Online Success

One of the most important principles I've learned is the so-called Pareto Rule. This principle holds particular importance for aspiring online entrepreneurs. If you are a Blogger, Digital Marketer, Amazon Seller, AdSense expert, then Pareto’s Rule applies to your business. Understanding it is vital to your success.

Alex Papaconstantinou
Alex Papaconstantinou 17 May 2017
Read more