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

  • 11/06/2019
    How to Turn Any Email Template into a Pardot Email Template

    Do you know you can turn any email template into a Pardot email template? With a couple of modifications to the HTML, you can have a fully functional Pardot email template which allows you to remove, edit and duplicate sections. In this tutorial, I will show you how to take any free, responsive email template and turn it into a Pardot email template.

  • 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.

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