Layout letters and email newsletters. Bit of gmail magic

Image author Mike, Creative Mints



Good day. I have written more than once that media_queries in mail clients work fine. Even outlook.com in the browser perceives them adequately. But gmail on the apple and android does not think so.



If in the case of other customers we can do, for example:

@media only screen and (max-width:480px) { .big_img { display:none !important; } .small_img { display:block !important; } } @media only screen and (max-width:600px) { .big_img { display:block !important; } .small_img { display:none !important; } } 

That gmail on smartphones and tablets, this trick is not a ride. I will explain. We have two different pictures for different letter resolutions. And depending on the screen resolution, we show what we need. The method does not pretend to the correctness of the decision, but only shows what cannot be done. Below, I’ll show a couple of examples of how gmail can do everything well without much effort.

')

Suppose we have a letter with the following code:

 <table class="wrapper" bgcolor="#eeeeee" width="600" cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><!-- content --></td> </tr> </table> 

And also media_queries for it:

 @media only screen and (max-width:480px) { .wrapper { width:100% !important; } } 

In this case, on desktops everywhere we get a letter 600px wide. In mobile clients 100%. The exception is gmail, which will behave a little differently. And in different ways depending on the content inside the wrapper.



In the case of a heap of text in a block of content or such a picture

 <img src="1450828071767932483708" width="100%"> 

The letter will be displayed normally, across the entire width of the mobile device. Although Gmail will ignore the media_queries we have specified, it will nevertheless adjust the rubber content to the screen width of the device.



And now let's give him this kind of content.

 <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#cccccc" align="center"> <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="fb"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="tw"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a> </td> </tr> </table> 

Here we have four icons of social networks. So mobile gmail in this case will not stretch this sign to the full width. It will make it the width of the space occupied by the icons inside the table.



How to do well? Very simple. Combine a block of social icons with a block of rubber content like this

 <table class="wrapper" bgcolor="#eeeeee" width="600" cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><img src="1450828071767932483708" width="100%"></td> </tr> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#cccccc" align="center"> <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="fb"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="tw"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a>  <a href="#" target="_blank" style="text-decoration:none;"><img border="0" src="" width="32" height="32" alt="vk"></a> </td> </tr> </table> </td> </tr> </table> 

I summarize

- You can set fixed values ​​for the wrapper, gmail will adjust the wrapper for the device screen

- For elements inside the wrapper, set the percentage values, or fixed, but not more than 320px in width.

- We cannot specify different display styles for different screen resolutions only in gmail clients.



I set out the most painful examples that occur regularly in my work. If you have private problems, describe them in the comments, send in a personal or dudeonthehorse dog gmail dot com. I will be happy to help solve the problem and, possibly, discover new nuances in the layout, which I will write in the future.