Dialog Insider Blog

Be Responsive with Gmail App

  • Share   

Be Responsive with Gmail App

150 150 Dialog Insight

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

Gmail App Media Queries           Gmail App Spongy

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.

Courriel 600px

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.

Content here
 

 

 

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.

 

 

Content here

 

Content here

 

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

Leave a Comment