Mobile Design Guidelines

Owned by Former user (Deleted)
Last updated: Jan 25, 2017 by Former user (Deleted)
2 min read

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 44x44 pixels.  If you use a 32x32 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

Please read Known Issues with Mobile and Desktop Emails before making a live send.