Known Issues with Mobile and Desktop Emails

Warning: Use caution when creating mobile versions of an 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.

Mobile Image Alignment Issue

 <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.

Mobile Table Issue

<table bgcolor="#FF0000" border="0" cellpadding="0" cellspacing="0" style="color: #000000; ">
            <tbody>
                <tr>
                    <td width="14">&nbsp;</td>
                    <td width="408">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td colspan="3">&nbsp;</td>
                                </tr>
                                <tr><td>&nbsp;</td></tr>
                            </tbody>
                        </table>
                        With new: TODAY!
                        <p>&nbsp;</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.

To allow your subscribers to forward the email that they receive, please use the Forward to a Friend link. This merge field links to the Forward to a Friend form which allows your subscribers to send the original email to a friend.

Please be aware that email clients and standards are constantly changing, so emails should be thoroughly tested before being sent out.