posted on 28 January 2014


Consequences of the Android 4.3 Update with responsive emails (Part 2)

TAGS: Bulk Email,Cergis,Mobile,Responsive

Okay guys! So, we have researched and tested many theories and found an alternative way of coding a responsive email so it functions and downloads properly on all devices, especially for the Samsung's new updated operating systems - Android 4.3 up.  You'll be happy to know that not much has changed. The bug issues we found on our email templates were to do with media queries and floating elements.

We found that most of the style tags that are at the top of the HTML in the media queries gets ignored, as the layout for media queries should be:

 - Max-width of 480px - iPhones and smaller smart phones

 - Width between 480px and 640px - Medium sized Androids

Keeping to these dimensions should fix any issues with the content of the email being pushed onto one side of the mobile with android phones.

Here is an example of what the style block looks like:

Picture of code

You can add more media queries if you want of course. However, 'colsplit' and 'floats' for example will not work.

Floating elements are rather tricky with responsive emails, because several email clients do not support the 'float' property. Instead, we used the 'align' attribute within table elements. For example:

<table align="left">

Here is a sample of table left and table right align:

Picture of code


Simple enough right? Well yes and no. When you use ’left’ or ‘right’ align on tables in Outlook 2007, 2010 and 2013, you end up with extra table padding and odd behaviours happening in Gmail.

In some instances adding '<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">' to only the first <td> tag in your table will solve those extra table paddings, as well as adding {border-collapse: collapse} to the table style itself.

This method is currently working well for us, we hope this helps and works for you!


Find out more about Lynette here.


add your comment

Email me when other users reply