Responsive email and display:block

It was with the help of Jean-Charles Fauchet, integrator at Badsender, that we recently identified a major problem in the responsive email design During our email preview tests on the EmailonAcid platform, it appears that Android 4.4 (KitKat) simply does not take certain properties into account anymore. In particular the style="display:block"which we will focus on in this article.

One way of designing a responsive emailing is to switch the cells in our tables to display:block according to the resolution of the viewing media. This allows blocks or elements to be tilted one below the other for vertical viewing. (and therefore more suitable) on mobiles. However, this method, until now considered to be one of the most stable by Mailchimpnow no longer supported on Android 4.4 (and this since Android 4.3). This problem was mentioned more than a year ago on the Google, Litmusor Alsacreations.

So how do you design a responsive email for Android 4.4?

The method (more common today) from <table> side by sidealign="left" or right? This solution is less reliable and has many limitations: for correct display on Outlook 2007, 2010 and 2013, remove unwanted gaps, for example through numerous CSS additions.

A bit laborious... It was through Jean-Charles' advice and by browsing the Litmus and CampaignMonitor forums that a less complex method emerged:

Let's take the problem at source: display:block no longer works on Android 4.4, so you have to use the method of arrays one after the other. But this solution doesn't work properly on Outlook. On Outlook, you need to be able to keep the solution of cells one after the other. And for that, there's... Conditional comments!

So let's specify after each table closure that in Outlook (and only Outlook), we'll add a td closure, then a new td opening! In this way, three tables one after the other will become three tables in three cells one after the other in Outlook! The idea is simple and works well according to our tests !

A bit of code to better understandisir this and test it for yourself?

<table class="largeur_100" border="0" width="200" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;" align="left" bgcolor="#f5a316">Cell 01</td>
  </tr>
</table>
<!-- [if (gte mso 9)|(IE)]></td><td><![endif]-->
<table class="largeur_100" border="0" width="200" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000000;" align="left" bgcolor="#FFFFFF">Cell 02</td>
  </tr>
</table>
<!-- [if (gte mso 9)|(IE)]></td><td><![endif]-->
<table class="largeur_100" border="0" width="200" cellspacing="0" cellpadding="0" align="left">
  <tr>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #ffffff;" align="left" bgcolor="#f5a316">Cell 03</td>
  </tr>
</table>

"Great, but it doesn't solve our display:block problem on Android 4.4!" Well, from now on, display:block won't be necessary! The tables will simply line up one below the other, as the width of the container will increase to 100%. To achieve this, simply add the following code to your media queries:

@media only screen and (max-width:600px) {
*[class="width_100"] {width:100% !important; height:auto !important;}
}

Note: Since Android 5.0 (Lollipop), users of the E-mail application have been invited to use Gmail. This is obviously causing quite a stir in the e-mailing world, since media queries are currently poorly supported by Gmail. (even though he says they are interested in supporting media queries)

Note, bis: The method of displaying tables one after the other does not display correctly on Lotus Notes 6 and Lotus Notes 7.