6 Tips on Developing HTML emails for the iPhone

Make sure your emails look great on the iPhone with these 6 tips. Learn how to remove the blue underlined links, how to set a pre-header and more!

1. Remove the blue link for dates

IOS automatically creates a blue calendar link for any date in your email. To change the colour of the link follow these simple steps:

  1. Add a span with a class around the date
  2. Add this to your CSS section and set the colour to the font colour you want.

2. Stop IOS from resizing text

By defualt, some font sizes may be increased to 14px on IOS. This can cause some of your text to wrap incorrectly or your layout to break. Disable IPS from resizing the text in your email by inserting this CSS in the HEAD section of your email.

3. Stop phone numbers from being converted into a link

IOS will see any phone numbers and automatically convert them to a link. To disable this, add the following into your meta tag.

4. The standard iPhone media queries

iPhone 2G, 3G and 3GS Media Query

iPhone 4/4S/5/iPhone 6 (zoom view) Media Query

iPhone 6 Plus (standard view) Media Query

5. Don’t use background colours or images on individual table rows and cells

Using background colours or images on individual table row and cells will create 1px lines in your email. This can be fixed by removing the background colour or image from the individual table rows and cells. Instead, nest the table in a new table.

6. Set a pre-header

Questions?

Email me, or send me a tweet @jennamolby, or leave a comment