How To Ban Blue Links on iOS Devices In Email

I’m sure you’ve noticed it before: phone numbers, addresses, dates, and—sometimes seemingly random—words like ‘tonight’ automatically turn blue and underlined in emails viewed on an iOS device. These bits of information trigger app-driven events, such as making a call, launching a map, or creating a calendar event. This well-intentioned behavior from Apple can be super handy in plain-text or personal emails, but can be a nuisance in HTML emails.

In this blog post, we’ll show you some examples of blue linking in action and introduce some coding techniques that will ban those blue links from your emails.

Blue links in Gmail got you down, too? This post covers how to fix blue links in iOS. If you’re struggling with blue links in Gmail, we’ve got you covered.

Learn how to fix blue links in Gmail

Blue-on-blue leads to reduced legibility

In this example, iOS has activated a couple bits of date-based text to trigger a calendar event associated with the listed dates. Unfortunately, the bright blue links on a turquoise background makes the text very hard to read.

Loss of brand synergy

We commonly see brick-and-mortar retailers include nearby store locations in their promotional emails—a great dynamic content and geolocation strategy! However, those addresses and phone numbers also fall victim to auto-linking behaviors that might not sync up with the overall branding of the email.

iOS View

Blue links on iOS - original email — Original Email

The solution: How to remove blue links on iOS emails

Readers of our original post suggested utilizing meta tags, foo-ing links or including a funny thing called a zero-width non-joiner. Let’s take a look at each proposed solution.

First, the control

Our control is a simple email with an address, a phone number and a date—text that frequently ends up as blue links in iOS:

Test 1: utilizing meta tags

This theory is testing the idea that including a specialized meta tag can disable phone number linking in iOS. We placed the following declaration in the <head> of our email:

<meta content="telephone=no" name="format-detection">

While this solution did remove the blue styling from telephone links, it also removed the tap-to-call functionality the link also provides.

Example of blue links in iOS email with metatags

Verdict: Tread carefully. While this solves the branding/style issue, it also removes functionality that users may be accustomed to (and may prevent subscribers from being able to call you!).

Test 2: zero-width non-joiner

A zero-width non-joiner is a “non printing” character—in other words, a character that does not represent a written symbol. In this test, we placed a zero-width non-joiner (ZWNJ) after the first character in the string of blue linked text:

6&zwnj;75 Massachusetts Ave, Cambridge, MA 02139

The entity for ZWNJ is placed right after the first number of the address.

This solution worked, but it was a bit onerous to implement. Just as the meta tag approach, it removes the link entirely, stripping what could be useful functionality for the user.

Example of blue links in iOS email with zero-width non-joiner

Verdict: zero-width non-joiners remove blue links and but also remove useful functionality. Similar to the meta tags above, tread this approach with caution.

Test 3: styling the tel URL scheme

Since iOS supports embedded CSS styles in the <head> of emails, you can specify a link behavior of your choice for phone numbers by setting a style for ‘tel’ URL schemes in your HTML. Contrary to our meta tag test, which disabled all phone links, this solution allows you to customize the color and underline for phone numbers:

a[href^=tel]{ color:#F00; text-decoration:none;}

While this fix is limited to phone numbers, it’s a great option for those specifically targeting phone numbers. However, they would have to find a separate solution for address and dates. Also, if you need more than one phone number style (for example, black in body copy but grey in the footer), this solution is a no-go.

example of styling blue links in iOS emails

Verdict: A great solution if blue phone numbers are your only issue.

Note: Since Gmail does not support attribute selectors which this style declaration uses. Anything else in the same <style></style> block as this style declaration will be stripped from emails opened in Gmail. To prevent this from happening simply place the above style declaration in its own <style></style> block in the <head> of your email.

Test 4: Styling Mail’s Data Detector Selector

On iOS devices an attribute is injected into the link which is detected to be an address, phone number, or dates. If you took a look at the source code of an email in Apple Mail on an iPhone, you would see something like this:

<a rel="noopener" href="#" x-apple-data-detectors="true">

Using this attribute you can style all automatically linked text in a style declaration, inside your <style> block:

a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

These few lines of code tell the date, phone number, or address detected link to inherit the color, font size, text decoration, etc, from the styles it itself is enclosed in. For example, the following address will inherit the colour red from the <p> tag it is enclosed in and will be underlined:

<p style=”color:red; text-decoration:underline;”>675 Massachusetts Ave, Cambridge, MA 02139</p>

This simple solution not only covers addresses but all automatically detected links—phone numbers and dates, too! However, like the technique used in Test 3, this technique relies on the use of an attribute selector which is not supported in Gmail. As per the previous technique, ensure you place this style declaration in its own <style></style> block to prevent an entire <style></style> block being stripped.

Verdict: Our favorite solution when battling blue links on iOS devices. The functionality of the link is intact and the phone numbers, addresses, or dates can be styled to match your email’s design. See the Email Previews and code in action for this technique.

BE SURE TO TEST!

While you might not always be able to predict what type of information may end up as a link on an iOS device, a quick look at your Email Previews will make you aware of any offending text so you know where to add in the fix. You’ll probably want to use this fix on:

Dates (only dates in the future seem to trigger the calendar links)
Addresses (commonly found in the footer to comply with CAN-SPAM)
Phone numbers, confirmation codes, frequent flyer numbers

What do your links look like on iOS devices?

Test your emails on iOS devices, plus other popular email clients and devices with Litmus to see how your emails (and links!) are rendering. Always remember to check links off your pre-flight to-do with Litmus Checklist.

Try Litmus today →

Lauren Smith

Lauren Smith is the VP of Acquisition & Lifecycle Marketing at Litmus