6 Tips on Developing HTML emails for the iPhone

In:

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

Related Posts

  • 06/12/2018
    Creating Pardot Email Templates: Common Questions & Answers

    Can my Pardot email be responsive? Why doesn’t my background image appear in Outlook? Can Pardot emails be drag & drop? I get asked these questions a lot from Pardot users and see them posted frequently in the Trailblazer Community. Let’s dive into these questions as well as other common Pardot email template questions.

  • 24/10/2018
    How to Create a Net Promoter Score Survey in Pardot

    Learn how to build a net promoter score (NPS) survey directly in Pardot. I will show you how to create an NPS survey that asks the recipient to give you a score from 1 – 10 using an in-email rating that directs them to a Pardot landing page to collect more information.

  • 24/05/2017
    8 Tips for Creating Marketo 2.0 Email Templates From Scratch

    Over the past couple of months, I have been creating email templates using the new(ish) email template syntax in Marketo and I’ve learned a couple tricks along the way. To save you from some headaches, here are 8 tips that I’ve learned from creating Marketo 2.0 email templates from scratch.

Leave A Comment

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

About Me

Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a sales and marketing professional.

LEARN MORE

Categories
Most Commented
Popular Posts