7 Tips on Designing and Developing Emails for the iPhone


The iPhone is more popular today than ever. Make sure your customers get flawless emails on their iOS devices.

Here’s a list of tips to help you with iOS devices:

  1. You can use media queries with iOS devices.
  2. The iPhone may resize your email based on the largest element.
  3. Fonts on the iPhone are enlarged by default.
  4. Words sometimes wrap awkwardly in iOS.
  5. Avoid 1px lines in table layouts.
  6. Prevent iOS from “clipping” messages that are over 102k.
  7. Stop iOS from converting your phone numbers to hyperlinks.

1. You can use media queries with iOS devices.

You can use media queries in your embedded CSS:

@media only screen and (max-device-width480px{
/* Here you can include rules for the Android and 
iPhone native email clients. ALWAYS USE IDs!!!  The 
Android does not support “class” declarations.  
Here’s more info on that.
                           
Device viewport dimensions are as follows:
                           
iPhone: 320px X 480px - portrait, 480px X 320px - landscape
Android:350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}        
                        
@media only screen and (min-device-width768px{
/* Here you can include rules for the iPad native 
email client. 
                           
Device viewport dimensions in pixels:
768 x 1024 - portrait, 1024 x 768 - landscape
*/

Check out our responsive template, with and without media queries.

With media queries.

With NO media queries.

Media queries will not work for mobile versions of Gmail. Want to know more? Check out these responsive design resources here:

2. The iPhone may resize your email based on the largest element.

Check out an example of this problem, where a table structure forces all of the elements to become proportionally smaller. The image at the top is 600px wide, with a smaller table cell below it. In the image on the right, the iPhone reduces the size of everything in the email by about 50% to make it fit the screen, thus making the text tiny. The image on the left is an example where a media query was used to size the image appropriately, allowing the text to take the proper width.

There are a two options:

A.) Re-size and re-use the same image (better for overall file size)

<style type=“text/css”>
  @
media only screen and (max-device-width:480px; ) {
    body
[yahoo] .header { width:300px}
  }
</style>

<body yahoo=“fix”>
  <
img src=“http://www.url.com/image.jpg” class=“header” width=“600” height=“100” />
</
body

B.) Completely replace the image. To see how to do this in more detail, check out our responsive image swap.

3. Fonts on the iPhone are enlarged by default.

The effects of this are often slight, but even that can throw off a layout. In the example below, you can see that our responsive template’s navigation items take up 2 lines instead of 1 because of the font size increase.

To control the font adjustment in the iPhone universally, try adding this to your embedded CSS:

<style>
{-webkit-text-size-adjustnone}
</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

4. Words sometimes wrap awkwardly in iOS.

If your text is in a container with a width set to less than that of your text, it might wrap poorly on this device.

To fix this add word-wrap:normal to your containing element:

<td style=“word-wrap:normal”>text</td

5. Avoid 1px lines in table layouts.

If you run into an issue with hairline borders appearing in HTML email designs with table layouts, check out Campaign Monitor’s article and fix:

iPhone fail: The trouble with table borders and HTML email.

6. Prevent iOS from “clipping” messages that are over 102k.

Sometimes the iOS reader only displays a small segment of the original email. When this happens, it renders the loaded portion with a button at the bottom which reads: “Download remaining XX bytes.” It looks something like this…

                   (scroll down to see button at bottom)

To fix this, make sure that you have a minimum of 1,019 characters before your closing head tag including spaces and carriage returns.

If you don’t have any need for more styles, nor a style block, try inserting several lines of empty spaces.

Another option is to remove your <head> tags entirely.  Be careful with this solution, some email service providers might place head tags within your email dynamically.

Here is a complete article with samples: Two ways to ensure that your entire email is rendered by default in the iPhone & iPad.

7. Stop iOS from converting your phone numbers to hyperlinks.

By default, Safari on iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.

To remove this type of auto formatting simply add the following meta-tag:

<meta name=“format-detection” content=“telephone=no”

Preview your email in the iPhone 4S (iOS 5), iPhone 4S (iOS 6), and iPhone 5 (iOS 6.1)

Mobile devices are all about the freedom to take your data with you, where ever you go. We want your email preview experience to be just as free, which is why we implemented drag & throw functionality, along with horizontal and vertical view ports.

Got another tip?

Got any more tips and tricks for iOS? Feel free to share below!

6 thoughts on “7 Tips on Designing and Developing Emails for the iPhone”

  1. Nice post,your blog provide a great list of tips about development and designing email for iphone.Thans for sharing such great list.

  2. Great information!!! I was also wondering if you have had the problem of the emails on iPhones/iPads showing the table lines of the rows and columns? I am having this problem and can’t figure out a way to get around it. Any suggestions are greatly appreciated! – VW

  3. I make responsive newsletter and I have one big problem on iPhone. My photos with vertically orientation have wrong horizontally orientation on iPhone. What I need to do for right orientation of pictures? Can you help me please?

    Cheers,

    Jan

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies