Building Responsive Design Emailers

Record high of 47% emails are now opened by users on a mobile device ^[1]. With increasing usage of smart phones and tablets, there are 80% more chances of your email getting ignored by the users ^[1] if they are not responsive and mobile friendly. Responsive email designs allow you to tailor your marketing email as per the size of the device in which they are opened.

With responsive emails, you can:

Implementing Responsive Email Design:

A special set of CSS styles acting as conditional statements or dynamic rules are used as media query in responsive email. They help make emails more presentable and clear on different screen sizes.

Devices Vs. Apps: What Determines Support?

It’s a common misconception that media query and responsive email support is based on the device or operating system. On the contrary, the application for the email viewing provides support. In practice, you can view the same email in two apps on the same phone, with each app having different support for responsive design.

Before we start, here are few guidelines for building Responsive HTML Emails:

• Do not use tables for structure, use div elements instead. Tables are for presenting data in tabular format and not deciding the layout
• Nested tables are more reliable than margins and padding
• Avoid CSS shorthand (Use full definitions)
• Do not use PNG images because Lotus Notes 6 and 7 do not show them
• For every paragraph, explicitly set a margin, default settings vary with each email client

Details:

1. Wrap the email in a 100% width Table
   Email clients only take the code within the body tags, not the body tags themselves. To use a background color, you must create a 100% width table to “fake” the background effect.

   <table width=”100%”>
   <tbody>
   <tr>
   <td>
   <table width=”600″ align=”center”>
   <tbody>
   <tr>
   <td>Lorem ipsum dolor sit amet.</td>
   </tr>
   </tbody>
   </table>
   </td>
   </tr>
   </tbody>
   </table>

2. No Wider than 600px
   Many people don’t actually open their email; they view these in the preview panel. Smallest preview panel on an average is about 600px. If you plan to keep your emails in the preview panels, then this guideline can be ignored, else design your emails accordingly.
3. Background Images
   Some canvas background images don’t display in email clients, avoid using those. Background images for individual table cells are generally acceptable but may not appear in some clients such as Lotus Notes. This code can be used for background images

   <td width=”100%” align=”center” height=”120″ bgcolor=”#fff” background=”image.jpg” style=”width:650px; min-width:100%; min-height:100%;background-image:url(image.jpg); background-color:#fff;” valign=”top”>
   <!–[if gte mso 9]>
   <v:image xmlns:v=”urn:schemas-microsoft-com:vml” id=”theImageA” style=’behavior: url(#default#VML); display: inline-block; position: absolute; width: 650px; height: 120px; top: 0; left: 0; border: 0; z-index: 1;’ src=”image.jpg” />
   <v:shape xmlns:v=”urn:schemas-microsoft-com:vml” id=”theTextA” style=’behavior: url(#default#VML); display: inline-block; position: absolute; width: 650px; height:120px; top: 0; left: 0; border: 0; z-index: 2;’>
   <![endif]–>
   </td>

4. Stop Yahoo! Mail from rendering your media queries
   Each version of Yahoo ignores your media query declaration along with all of its conditional statements. These styles are rendered outside of the media query. Also, effectively ignoring the first declaration it gets confused. For example:

   @media only screen and (max-device-width: 480px) {
   #smallScreen {width:100px; padding:2px;}
   .desktop {width:500px; padding:10px;}
   }

   The code above will get converted into this:
   As you can see, Yahoo! converts each of your style names into a name that is unique to your email. Yahoo does this to keep your style separate from one in their interface. Later, HTML will also be converted:

   _filtered #yiv1449593645 {padding:2px;}
   #yiv1449593645 .yiv1449593645desktop {width:500px;padding:10px;}
   #yiv1449593645

   <div class=”desktop”>Text</div>

   Is converted to:

   <div class=” yiv1449593645desktop “>Text</div>

   Yahoo’s parsing tool does not take into account media queries and the way they are formatted.

   A way out is to use attribute selectors since they are not support either. Using this method your styles and media query will not get picked up by Yahoo.

   To give an example, if the original query is converted, it would look like this:

   @media only screen and (max-device-width: 480px) {
   *[id=smallScreen] {width:100px; padding:2px;}
   *[class=desktop] {width:500px; padding:10px;}
   }

   Another solution is: attribute selectors. When you add a “*[class]” before all class declarations and “*[id]” before ID’s like this:

   @media only screen and (max-device-width: 480px) {
   *[id]#smallScreen {width:100px; padding:2px;}
   *[class].desktop {width:500px; padding:10px;}
   }

5. Remember to always “Test”
   It is important you test your email templates in many clients and services. The web based offerings such as Gmail, Yahoo, and Hotmail. Also, do not forget about email clients such as Outlook and Thunderbird and many more. There are many tools that enable testing in all platforms and one of the best PAID tools (offering 7 days free trial) to test in almost all platforms is Litmus.

Conclusion:

Responsive websites have been around for some time and everyone knows their importance. A responsive email design is the differentiating and user engagement strategy especially when your average user is looking at his mobile device screen 150 times a day ^[1].

References:

1. https://litmus.com/blog/the-how-to-guide-to-responsive-email-design-infographic