Responsive Email Design, or How to read a letter on the fridge

For us, as for most social networks, email-mailings are very important. One of the interesting and complex technical tasks is the correct display of letters on mobile devices. Now, about 23% of Badoo emails open to them, and this number is constantly increasing. Or maybe someone is reading our letter right now on their Internet fridge.
Today we will tell you what rules to follow in the development of e-mails, how to preserve their usability on mobile devices, and also share our tricks accumulated in the process.

Requirements

What problems have we encountered and what are the requirements for our letters:

• Emails must be correctly displayed in many different email clients and browsers;
• they should be optimized for various devices on iOS and Andriod platforms (smartphones with large, medium and small screen resolutions; tablet computers);
• need mandatory support for Outlook 2003/2007/2010, because it occupies a large segment of use;
• editing components that are used in another 50 letter templates;
• it is necessary to create universal blocks that will adapt to the situation, since in letters, data has a dynamic structure (for example, letters are translated into 44 languages, the sizes of blocks, images, text size change in them).

First you need to determine which platforms the project targets. Over the past year, the percentage of opening our letters on mobile devices has grown from 15% to almost 23%.
')

But do not forget about desktop email clients, such as Outlook, which opens approximately 18% of all emails sent by us.

How is this done?

Consider the basic layout rules that we follow when creating emails:

• the frame is built on tables;
• for web versions, all CSS properties are described using the style attribute;
• Mobile e-mail clients fully use CSS classes. The exception is Gmail;
• for background images, the background attribute is applied:
  
  

  <td background="" style="background-position: ;"> 

  
  
• to remove indents in table cells use:
  
  

   <table border="0" cellpadding="0" cellspacing="0"> 

  
  
• it is not recommended to use block elements in markup of letters, such as

   <h1-h5> 
        ,   border="0".           vertical-align: top;  img; 
      CSS- float    html- align=””.      : 
   
   <table align="left"></table><table></table> 

  
  
  need to set text-decoration: none; link, if it contains a picture, to remove the underscore;
  conditional comments, the contents of which only understands Outlook 2007/2010:
  
  

   <!--[if gte mso 10]><![end if]--> 

  
  
  To make the text size on the Android platform the way we intended it, add the body property -webkit-text-size-adjust: none;
  
  

  Media queries

  
  The main tool for optimizing emails for mobile devices is Media queries. Below is a table of correspondence with Media queries and the most common mobile devices:
  

  	iPhone 3g, 3gs	iPhone 4, 4s	iPhone 5	320 * 480	480 * 800	720 * 1280
  max-device-width: 480px
  -webkit-device-pixel-ratio: 1
  -webkit-device-pixel-ratio: 1.5
  -webkit-device-pixel-ratio: 2

  
  But what about email clients on mobile devices that do not support media queries? For example, the Gmail client for Android and iOS platforms removes the entire style tag from the letter. The following rule applies here, which is key throughout the development of letters: elements with a fixed width of more than 320 pixels cannot be used. In order for the letter to be "rubber", it is better to use relative units of measurement.
  
  

  Template

  
  So, consider the letter pattern:
  
  
  
  1. As the frame of the letter, we use two center tags: one for the central alignment, and the second to limit the width of its contents:
  
  

   <center><center style="text-align: {{align}}; max-width: 560px; width: 100%;"> ... </center></center> 

  
  2. For a picture with the full width of the letter, the table tag with the background image is used in order not to create spacers as the picture quality. For Outlook 2007/2010, use the image in the conditional comments:
  
  

   <table background="" style="padding: 0; border-collapse: collapse; width: 100%;"> <tr> <td style="padding: 0; font-size: 0;line-height:3 px;"> <!--[if gte mso 10]><img src="image" border="0" width="580" height="3"><![end if]--> </td> </tr> </table> 

  
  3. The number of photos varies in mobile and web versions. We don’t know on which device the letter will be opened, therefore for all pictures, starting with the fifth one, the class m__hidden, which will hide the photos of users on mobile devices.
  
  4. The button turned out to be a very problematic element. It has the shape of a rectangle with rounded corners and a gradient. And, of course, it must reach both in height and in width. It is of different colors and is created separately for each letter. To do this, we give the container a background image or a solid color. The frame of the button is divided into three parts: the upper one, in which the upper frame and two corners are set; medium - it has vertical frames and button content; and the bottom one, in which the bottom frame and two corners are set:
  
  
  
  

   <table cellpadding="0" cellspacing="0" style="direction: ltr; border-collapse: collapse; font-size: 0; line-height: 0;"> <tr> <td style="padding:1px 0 0 0;"> <table background="{{btn_bg}}" bgcolor="#{{bgcolor}}" cellpadding="0" cellspacing="0" style="border-collapse: collapse; background-repeat: repeat-x;"> <tr> <td width="5"><img src="{{btn_tl}}" border="0" height="5" width="5"></td> <td style="min-width:100%;"> <table style="border-collapse: collapse; width:100%;"><tr> <td style="border-top: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td> </tr></table> </td> <td width="5"><img src="{{btn_tr}}" border="0" height="5" width="5"></td> </tr> <tr> <td colspan="3" style="direction: {{direction}}; text-align: center;"> <table style="border-collapse: collapse; width: 100%;" cellpadding="0" cellspacing="0"><tr> <td style="border-left: 1px solid #{{border_color}}; border-right: 1px solid #{{border_color}};"> <a href="{{url}}" style="color: #ffffff; font-size: 16px; line-height: 20px; text-decoration: none; padding: 6px 20px; display: block; font-weight: bold; text-shodow: 1px -1px #{{shadow_color}};">{{text}}</a> </td> </tr></table> </td> </tr> <tr> <td width="5" style="vertical-align: bottom;"><img src="{{btn_bl}}" border="0" height="5" width="5"></td> <td style="vertical-align: bottom; min-width: 100%;"> <table style="border-collapse: collapse; width: 100%;"><tr> <td style="border-bottom: 1px solid #{{border_color}}; padding: 2px 0 2px 0;"></td> </tr></table> </td> <td width="5" style="vertical-align: bottom;"><img src="{{btn_br}}" border="0" height="5" width="5"></td> </tr> </table> </td> </tr> </table> 

  
  The button has its own template in which it sets the necessary background images, the color of the frame and the color of the text shadow.
  
  

  CSS

  
  We have a basic set of classes for identical elements. It is in a separate template and inserted into the necessary letters:
  
  

   <!--[if gte mso 10]> /*   Outlook 2007/2010 */ <style> .o__table { width: 560px !important; } .o__btn-a{ display: block !important; padding: 8px 20px !important; font-size: 18px !important; border: 1px solid #017ac2 !important; } </style> <![end if]--> <style> @media only screen and (max-device-width: 720px) { body { margin: 0 !important; padding: 0 !important; -webkit-text-size-adjust: none; } .m__hidden { display: none !important; } .m__btn { width: 300px !important; text-align: center !important; } .m__content { padding: 0 10px !important; } .m__footer { padding: 10px !important; } .m__content-border { border-bottom: 1px dotted #e5e5e5 !important; } .m__user-pic { width: 52px !important; height: 52px !important; border-radius: 0 !important; } .m__user-more { width: 49px !important; height: 29px !important; padding: 22px 0 0 0 !important; } .m__user-more img { width: 27px !important; height:7px !important; } .m__padding_b-0 { padding-bottom: 0 !important; } .m__padding_t-0 { padding-top: 0 !important; } .m__padding_b-10 { padding-bottom: 10px !important; } .m__padding_b-15 { padding-bottom: 15px !important; } .m__padding_t-10 { padding-top: 10px !important; } .m__padding_t-15 { padding-top: 15px !important; } .m__body-txt { font-size: 14px !important; } .m__body-title { font-size: 18px !important; } .m__footer-txt { font-weight: normal !important; color: #666 !important; font-size: 12px !important; } } </style> 

  
  
  All classes are named with a double underscore. So we solve a known problem in Yahoo, which supports CSS classes, but does not support Media queries. It uses classes for the mobile version of the web, which we do not need at all. Yahoo rewrites the original class names to their own. For example: m__btn to m_btn, that is, it mistakenly replaces the double underscore with one. Thus, the class names in the style tag do not match the names in the class attributes.
  
  

  Progressive disclosure for mobile devices

  
  The method of sequential disclosure is that complex and rarely used elements are hidden and shown by a special command (pressing the switch). This method is quite possible to use in emails for mobile devices. The ellipsis on the smartphone will disappear when clicked, and the hidden photos will appear.
  
  
  
  

   <style> .hidden, .more:hover { display: none; } .more:hover + .hidden { /* IOS */ display: block; } #show:target .hidden { /* ANDROID */ display: block; } #show:target .more { display: none; } </style> <td id="show"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> <a href="#show" class="more">...</a> <span class="hidden"> <imgsrc="photo"> <imgsrc="photo"> <imgsrc="photo"> </span> </td> 

  
  
  

  Rubber block with shadow

  
  
  
  Very often, designers use a block framed by a shadow. But to make such a block in the letter, and even rubber, becomes problematic. We have in this block is a photograph of the user, which has different width and height. For him, we use four pictures of the corners and four pictures of the sides. The horizontal sides have a width of 100%, and the vertical one substitutes the height of the photo:
  
  

   <style> .m__hidden { display: none !important; /*  ,      */ } .m__photo{ /*       */ width: 100%; height: auto !important; } /*      */ .m__photo-brd_l { background: url(center-left.png); } .m__photo-brd_r { background: url(center-right.png); } </style> <table cellpadding="0" cellspacing="0" border="0" style="direction: ltr; line-height: 0;"> <tr> <td><img src="top-left.png" width="10" height="10" border="0"></td> <td><img src="top-center.png" width="100%" height="10" border="0"></td> <td><img src="top-right.png" width="10" height="10" border="0"></td> </tr> <tr> <td class="m__photo-brd_l"><img src="center-left.png" class="m__hidden" width="10" height="{{height}}" border="0"></td> <td style="background: #ffffff;"><img src="photo.png" class="m__photo" height="{{height}}" border="0"></td> <td class="m__photo-brd_r"><img src="center-right.png" class="m__hidden" width="10" height="{{height}}" border="0"></td> </tr> <tr> <td><img src="bottom-left.png" width="10" height="10" border="0"></td> <td><img src="bottom-center.png" width="100%" height="10" border="0"></td> <td><img src="bottom-right.png" width="10" height="10" border="0"></td> </tr> </table> 

  
  
  

  Background Images in Outlook 2007/2010

  
  Interestingly, Outlook 2007/2010 is much inferior in HTML and CSS support to its predecessor Outlook 2003. For example, background images are not supported in them. The exception is the use of the background property on the body:
  
  

   <body background=""> ... </body> 

  
  But what about the other elements in the letter? The solution is, we can use VML:
  
  

   <!--[if gte mso 10]> <v:rect style="width: ; height: ;" strokecolor="none"> <v:fill type="tile" src=""></v:fill> </v:rect> <v:shape style="position: absolute; width: ; height: ;"> <![endif]--> ... <!--[if gte mso 10]> </v:shape> <![endif]--> 

  
  As a result, we get a block with a given width and height, which may contain text.
  
  You can see an example of the letter here: jsfiddle.net/ELhD9/5
  
  This is how Badoo develops emails for a huge market of devices, browsers and email clients. We do not consider our approach a benchmark of development that everyone should follow. After all, when creating such a product, it is necessary to experiment, and adapt to the current situation. If you have ideas for improving our methods or changing them - write in the comments and discuss them with interest!
  
  Artem Kunets
  Badoo frontend developer