Removing blue underlines in iOS email signatures

If you use iOS devices for email signatures, it can be quite difficult to predict what information may end up being turned into a link. The most common offenders are:

Dates in the future i.e. that will occur after you send your email.
Addresses, which are commonly found in the footer to comply with CAN-SPAM.
Phone numbers.

These pieces of information trigger app-driven events, such as making a call or creating a calendar event. When you have created a high-quality HTML email signature, this can be quite a nuisance.

Hyperlinks such as email addresses and weblinks will often appear in blue as Apple's settings do not allow for styling in email signatures, as highlighted in this Knowledge base article.

So, how do you remove the blue links in iOS email signatures?

Utilizing meta tags

Try including this specialized meta tag in the head of the email signature to disable phone linking in iOS:

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

Be aware that this will remove the blue styling from telephone links but it will also remove the tap-to-call functionality that the link provides. This removes functionality that some users may use and may prevent them from being calling you.

Using a zero-width non-joiner

A zero-width non-joiner is a “non printing” character, which means that it does not represent a written symbol.

For example, place a zero-width non-joiner (ZWNJ) after the first character in a string of blue linked text:

A&zwnj;lpha Farnborough, Hampshire, GU14 6BU, United Kingdom

The ZWNJ is placed right after the first letter in the address. This will work on iOS devices, but for any recipient that displays your email in Android 2.3 or above, the address will look slightly odd.

Styling the 'tel' URL schemes

iOS embeds CSS styles in the <head> of any HTML email content. Since this is the case, you can specify the link behavior of phone numbers by setting a style for 'tel' URL schemes in the HTML of your email signature.

This solution allows you to customize the color and underline for phone numbers:

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

This is a good option if you want to specifically target phone numbers. However, this doesn't work for addresses or dates.

Also, it won't let you do more than one phone number style.

Wrapping links in styled spans

This is the most effective solution. It involves setting your desired link styles in classes in the <head> of your email signature and adding your new class to span tags surrounding the target text.

The native mail client for iOS supports embedded style sheets, whereas inline CSS is usually what is required for HTML email:

.appleLinksWhite </span><span>a </span>{color: #ffffff !important; text-decoration: underline;}
.appleLinksBlack a {color: #000000 !important; text-decoration: none;}

Once you have specified the classes in the <head> of your email signature, wrap the blue text in <span> tags with the appropriate class throughout the signature.

<span class=”appleLinksBlack”>01252 531422</span>

All of the blue and underlined text will no longer blend with the rest of the signature design and the text will regain readability. Each of the blue links will still be active, so if a recipient taps one, it will still trigger an associated app-based event.

Customer support service by UserEcho