How to get a responsive HTML email to work on Android?

Most people are aware by now that there are some issue with Android and its ability to show responsive emails correctly and recently, the standard responsive email code we were all used to, stopped working.

This tutorial will cover how to work around this issue and some suggestions based on my personal experience.

There are different possibilities and they all have their pros and cons. You will have to make the choice depending on the design of your email and what is your final goal.

The first way of fixing this is by converting all the <td> and </td> into <th> and </th>.

This solution will fix the problem immediately and will allow you to keep your layout without needing to do any other change.

The <th> tag is the table header and for this reason it will make all the font contained inside it bold and centre. You will have to remember to add, in your <head> within the <style> the below code, if you want it to be treated as <td>:

table th { margin:0 !important; padding:0 !important; font-weight:normal; border-collapse: collapse;}

I have found in some cases, that some email client (only one from my personal experience) will treat <th> fields as not editable and so you or your client won't be able to modify the content within the email once it has been uploaded.

To work around this issue i have found very useful to use the second fix.

<table cellpadding="0" cellspacing="0" border="0">
 <tr class="wr" align="center">
<th align="left" class="fullw wr fl">
 <table cellpadding="0" cellspacing="0" border="0">
<tr>
 <th align="center">
Lorem ipsum dolor sit amet
 </th>
</tr>
 </table>
</th>
<th align="right" class="fullw wr fl">
 <table cellpadding="0" cellspacing="0" border="0">
<tr>
 <th align="center">
Consectetur adipisicing elit, sed do eiusmod
 </th>
</tr>
 </table>
</th>
 </tr>
</table>

The second way is to convert to <th> only the responsive areas with two or more columns stacking.

All the email code will stay the same and only the stacking columns will be changed to <th>. All the content withing these <th> will still use <td>.

You won't still be able to modify the content within the <th> but all the content outside will be editable. This is still not ideal but gives you a bit more flexibility.

<table cellpadding="0" cellspacing="0" border="0">
 <tr class="wr" align="center">
<th align="left" class="fullw wr fl">
 <table cellpadding="0" cellspacing="0" border="0">
<tr>
 <td align="center">
Lorem ipsum dolor sit amet
 </td>
</tr>
 </table>
</th>
<th align="right" class="fullw wr fl">
 <table cellpadding="0" cellspacing="0" border="0">
<tr>
 <td align="center">
Consectetur adipisicing elit, sed do eiusmod
 </td>
</tr>
 </table>
</th>
 </tr>
</table>

The third solution is to use tables: <table>.

This is the standard way of creating responsive content with tables even if it can become tricky with 3 or more columns layout as outlook will have some problem rendering the tables and maintaining the correct borders.

You can find a series of tutorial online on how to make a responsive email staking tables. Alternatively I will be creating a tutorial very soon so please check back in few days.

EmailMartina Sartor7 April 2017android, code, design, email, email dev, html, html email, responsive, tips, tutorialComment