Warning: Use caution when creating mobile versions of an HTML email.
Since web browsers, email clients, and mobile platforms are constantly changing, the HTML and Mobile versions may appear in unexpected ways. The media queries used to automatically show or hide the Mobile version will break under certain circumstances. Do not send a message with a mobile version unless you avoid the known issues listed below and thoroughly test before making a live send.
Here are some known issues with the HTML and Mobile versions, as well as ways to work around them. We also suggest creating a version of your email in the Mobile Message tab that is very simple to avoid other issues.
Images
When an image in the Mobile tab has an assigned alignment property, it will show below the desktop version when viewed in some email clients like Outlook 2013.
<img align="right" ...>
To fix this issue, please take out the align="right" or align="left." You could also consider making the image appear across the whole width of the mobile device.
Tables
If there is a table in the Mobile tab with multiple rows, but a varying number of cells per row, the table may show. The height of the table will show as a short block colored with the background color of the table.
In this example, the inner table has two rows. The first has one cell that spans over 3 columns, and the second row has one cell that spans over 1 column. Since this is technically an invalid layout for a table, this will cause a block to show with the color red (#FF0000) at the bottom of the desktop version in some email clients.
<table bgcolor="#FF0000" border="0" cellpadding="0" cellspacing="0" style="color: #000000; ">
<tbody>
<tr>
<td width="14"> </td>
<td width="408">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="3"> </td>
</tr>
<tr><td> </td></tr>
</tbody>
</table>
With new: TODAY!
<p> </p>
</td>
</tr>
</tbody>
</table>
Hint: To fix the example above, you'd want to take out the colspan="3" to make the table have one column in the first row and one column in the second row. Alternatively, you could add two more table cells to the second row to make it 3 columns on top of 3 columns.
Forwarding and Replying Breaks Media Queries
If an email with a mobile and desktop version is forwarded, both versions will show. Many email clients/applications will forward your HTML email and keep the formatting completely in tact. However, some programs will break the code used to generate the original email, causing it to appear in the new recipient's inbox with both desktop and mobile versions. In some cases it's not even the email client that's breaking the forwarded email, it's the email server.
Please be aware that email clients and standards are constantly changing, so emails should be thoroughly tested before being sent out.
Comments
0 comments
Please sign in to leave a comment.