Removing blue links on iOS devices

Links have been blue since the internet was born (rumor has it that Tim Berners-Lee styled the first web links blue). While they do provide a nice contrast from black text on a white background, not all designers favor that lovely shade of #0000FF.

While it’s fairly simple to switch up regular link colors in your <a> tags, iOS has a mind of its own. It’s not uncommon to find phone numbers, addresses, and dates styled blue, complete with an underline indicating a link when viewing email on an iPhone or iPad. These links trigger different types of events based on the pattern detected in the text (making a call, launching a map, or creating a calendar event).

Here’s an example comparing the same email viewed on an iPhone versus in Gmail:

kimpton-mobile1
iOS View
kimpton-mobile1
Original Email

These blue links can not only be annoying, but they can also create readability challenges. In the example above, 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.

We will share with you our favorite solution for removing blue-links here, but if you’d like to learn about other strategies we have explored—check out our blog on Banning Blue Links on iOS Devices.

Below is our control email, a simple email with some example text that frequently ends up as blue links in iOS:

control-iphone

The solution involves adding a simple bit of embedded CSS in the <head> of your HTML. While in-line CSS is the rule of thumb for HTML email (Gmail strips out CSS in the <head> of emails), the native mail client in iOS supports embedded style sheets. Since our email requires two different link colors, we added one class for regular black text and a second for the high-contrast text at the bottom:

<style type=”text/css”>

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}
</style>

After specifying these classes in the <head> of our email, we wrapped the offending blue text in <span> tags with the appropriate class throughout the email:

<span class=”appleLinks”>863985624</span>

The blue links are now the appropriate colors, but they still have underlines.

In order to alter the automated design, we must add a style to remove the underline on the links. We will add this style to the CSS we previously created in the <head>:

<style type=”text/css”>

.appleLinks a {color:#000000; text-decoration: none;}
.appleLinksWhite a {color:#ffffff; text-decoration: none;}
</style>

The formerly blue and underlined text now blends with the rest of the design, and the high-contrast text has regained readability. It’s important to note, however, that each of the formerly blue links is still active. They simply blend into the surrounding text better than before. Tapping these links will still trigger their associated app based events.

control-iphone

While you might not always be able to predict what types of information may end up as a link on an iOS device, taking a quick look at your Email Previews in Litmus will tip you off to the offending text so you know where to add in the fix. In my experience, you’ll probably want to wrap the following types of text:

  • 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

We also did a little digging in the iOS Developer Documentation. While there is a solution for disabling phone number detection in Safari on iOS, it sadly does not seem to extend to the native Mail client on the phone. Even when accessing mail via the Safari browser on the iPhone, phone numbers continued to turn blue and trigger a call action when touched on the screen. If you’re developing web sites that will be viewed in Safari on an iOS device, it may be worth a look.

Need more help?

Ask the world's largest community of email designers.

Post a discussion in the Litmus Community