Since the end of 2015, email open statistics on mobiles in Canada have exceeded opens on computers[i]. Moreover, having a responsive version can boost your click rate by more than 11% for emails read on mobiles[ii]. This last benefit is important as Gmail has, for quite some time, caused companies some serious headaches by not supporting the use of media queries to make emails responsive. But you should be happy to learn that this era is now over! A new coding technique has recently been found and has proven its worth – it’s known as Spongy or Hybrid coding, and its main benefit, as you might have guessed, is to work with Gmail App!
Media Queries on Gmail App Spongy on Gmail App
The difference between media queries and Spongy
The main difference between the two methods is reflected in content alignment. Contrary to media queries that align content all at once by placing them one after the other on a fixed screen size, the Spongy method gradually aligns content as the display reduces.
Media Queries 400px Media Queries 200 px
Spongy 400px Spongy 200px
How to achieve the best results?
1 column example
As an example, let’s say we want to display 100% of the content on a small screen but a maximum of 600px on a larger screen. To do this, you can use a 100% width table and set the maximum width to 600px.
Since the max-width setting is not supported in Outlook (surprised?), we need to add a second conditional table to the main one. This will provide the possibility of displaying a fixed email using a 600px width in Outlook applications.
2 column example
To display an email in 2 columns, we can use the same technique as for the 1 column example, but add div tags.
You need to created 2 div sections of the desired width, here 300px, and use the style display:inline-block, which will let you place both div side by side. And for Outlook compatibility, you need to add a 100% conditional table with cells at 300px.
This method places both columns side by side horizontally on a computer screen, but one after the other on a mobile screen.
To display 3 columns, you use the same technique but change the width of cells.
Please note that you can use both media queries AND Spongy coding for email providers that support it.
We have tested it… and we love using it!
After some testing, Dialog Insight has decided to apply the Spongy coding approach to all the generic templates available in its application so that responsive emails are supported in Gmail applications.
If you need further information, please do not hesitate to contact us.
[i] Based on statistics on emails sent in Canada using Dialog Insight