Creating Mobile Versions of an Email Message

How to Create a Mobile Version of an Email Message

As more people now regularly view their emails on smart phones and tablets, email rendering on mobile devices has become a crucial part of email marketing success.  Our email system delivers a reduced version of you main email to iPhones and PDA devices unless you create a separate “mobile” version.  The necessity of creating a specific mobile version varies by industry.  Our message editor gives you the option to create both a normal HTML message and a mobile version of your message that will be seen only on mobile devices.

Getting Started

To create a version of your message that will be seen only on mobile devices, open the second tab of the message editor, called Mobile Message. Insert your content into the message editor like you would for the desktop version.

If the Mobile Tab is left blank, the desktop HTML Message will show on desktop and mobile devices.  Only use the Mobile Message tab if you want to create a unique version to make the message easier to read on mobile devices.

If a message is created using a template, that template must have an editable content region set up in the Mobile tab.  Otherwise, the mobile tab will not be editable.

Best Practices

Copy Content from Desktop Version into the Mobile Version

If you leave the message blank in the Mobile Message tab, mobile devices will receive the email from the HTML Message tab, too. When creating a different version for mobile devices, you can use this option to replace the mobile version with a copy of the desktop version.  To copy the HTML message and paste it into the mobile message:

  1. Click the Options button
  2. Click Create Mobile from HTML
  3. Edit the content in the Mobile Tab so that the mobile version is different from the desktop version and click Save

Preview

After creating the mobile version, click the refresh icon and navigation arrows to preview approximately how the message will look on an iPhone.  Click the center circle button to center the iPhone preview.

 

Use Template Blocks

Template blocks are a great way to quickly create a mobile message. You’ll be able to insert predesigned templates, layouts, and content regions.

  1. Click the icon in the Mobile Message tab message editor toolbar
  2. Select a simple layout or a designed mobile template like shown below:
  3. Edit the content and you’ll be ready to go.  Please also review the Mobile Guidelines and Known Issues below.

Mobile Design Guidelines

Mobile Design Layouts

Most of the successful mobile layouts are reduced to a one column layout.  If the desktop version has multiple columns, consider positioning them vertically on top of one another.  The image below shows how you would want to move a left navigation column to the top of the one column mobile layout.

Making it “Touchable”

Since users will be using their fingers to click buttons and links, you should think about making buttons large enough to touch easily.  A good sized click-able area is 44×44 pixels.  If you use a 32×32 pixel image, try to surround it with 12px of padding.

Screen Size

The iPhone 5 has a width of 320px and a screen has to have a width less than 480px to display the mobile message.  Therefore it’s suggested that you use percentages, such as a width of 100%, in order to scale with various mobile devices.

Mobile Message Editor Tips

Image Size

If the estimated iPhone preview shows that the message runs way past the right side of the screen, even after you set the width to 100%, please look at the image sizes in the message.  If they have a width of 600px from your desktop version, resize the images to a smaller width such as 320px.

Background Colors

When a colored background is applied to the body tag of the desktop version, the body of the mobile version will also appear in this color.  To use a different background color for the desktop and mobile versions, don’t put a background color style in the body tag.  Instead, place tables with widths of 100% inside the two versions and add a background color to each table.

Text Handling

Font Size

Some mobile devices resize text automatically.  To prevent this on mobile devices, you can add this to your embedded style:

 

<style>
* {-webkit-text-size-adjust: none}
</style>

 

Or you can also control text on a case by case basis by adding the following inline CSS:

 

<font style="-webkit-text-size-adjust: none">
Example
</font>

 

Sometimes other devices such as Androids will display text as a slightly different size.  To be safe, make sure that your design is flexible enough to accommodate for a 3% increase or decrease in your font sizing throughout your entire email for optimal results on the Android.

 

Stop iPhones From Underlining Dates, Phone Numbers, and Addresses

The iPhone will automatically create a link around dates, phone numbers, and addresses in an email message.  To prevent this, add the following style to the header of your email.  Then surround the text with this class.

<!--Place this style in the header-->
<style type=""text/css"">.appleLinksWhite a {color:#ffffff; text-decoration:none;}</style>
<!--Insert this class around the text-->
<span class="appleLinksWhite">TEXT</span>

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.

Contact our Sales and Support Teams at (866) 271-5908 with questions or for more information on mobile email versions.