Layout letters, a set of snippets

Image by MVBen

It finally came to Russian customers that the mobile web gained sufficient momentum in order to spend money on its support, including in mailings. They are turning to me more and more often in order to impose a letter that would adequately look not only at the zoo of all kinds of email clients and webmord, but also on tablets and smartphones.
')
In the course of my work, I have accumulated some ready-made solutions, which I myself now have at my fingertips and use it very often, and I want to share with you.

Wrapper

html

<table id="wrapper" align="center" width="600" cellpadding="20" cellspacing="0" style="border-collapse: collapse;"> <tr> <td> text </td> </tr> </table> 

css

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

We get a 600px letter wrapper that will stretch to 100% width on screens <600px wide.

Picture, streamlined text

The bottom line is simple. We create a tablet with a picture cell and an indent cell that will beat the text away from the picture. On mobile platforms, we hide the beats, and stretch the tablet with the picture to the full width of the wrapper container.

One small note. The Gmail application on Android does not understand media_queries, and works on a little magic. It will independently pull out the letter wrapper across the width of the screen, and the table with the width specified in percent too. The only shoal will be that we can not hide the beat. But it is not so terrible.

html

 <table align="left" class="picture" width="40%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; float:left;"> <tr> <td valign="top"> <img style="width:100%;" src="picture.jpg" style="display:block;"> </td> <td class="float_fix" width="20"><img src="blank.gif" style="display:block;" width="20" height="20"></td> </tr> </table> 

css

 @media only screen and (max-width:320px) { .picture { width:100% !important; float:none !important; display:block !important; } .float_fix { display:none !important; } } 

If you have a more elegant solution, please contact us.

Full width image

It's simple. Set the image to 100% width and block it, and add line breaks before and after the image.

 <br> <img src="picture.jpg" style="display:block; width:100%;"> <br> 

Centered picture

We do not use blockiness, because in some mailers it breaks the alignment. Register media queries to stretch the image on smaller screens.

html

 <div align="center"> <img class="picture" src="picture.jpg" width="400"> </div> 

css

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

Tile

The task: to place six blocks with goods (for example), so that they fall under each other on small screens and stretch according to the screen size.

The original tile element, which we multiply into six elements:

 <table class="tile" align="left" width="33%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table width="100%" cellpadding="10" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <a href="#" border="0" target="_blank" style="text-decoration:none;"> <img style="width:100%;" src="picture.jpg" border="0"> </a> </td> </tr> <tr> <td style="line-height:20px;"> <span style="font-family:georgia; font-size:14px; color:#333333;"> <a href="#" target="_blank" style="color:#000000 !important;"></a>  </span> </td> </tr> </table> </td> </tr> </table> 

And CSS for it:

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

As a result, we get three elements by default, two elements per line at <480px along the width of the screen. And a column of elements at a resolution of <320px;

At last

Be sure to bring a sign from the wonderful topic of the badoo company's blog in order to understand which media queries need to be registered for specific devices. Well, I strongly recommend that you read the material on the link for a more detailed study.