www.litmus.com Open in urlscan Pro
2620:12a:8001::4  Public Scan

Form analysis
1 forms found in the DOM

GET https://www.litmus.com/

<form method="get" action="https://www.litmus.com/" class="search-form"> <input type="search" name="s" placeholder="Search..." class="search-input form-control form-control-lg" required=""> <button type="button"
    class="btn header-search-form-close-btn"> <span class="sr-only">Close search</span> <span aria-hidden="true">×</span> </button> </form>

Text Content

Skip to main content
 * Capabilities
   * Why Litmus
   * Email Design
   * Email Building
   * Email Personalization
   * Email Testing
   * Email Analytics
   * Email Collaboration and Review
   * Technology Integrations
 * Solutions
   * Email Service Provider
     * Acoustic Campaign
     * Adobe Campaign Standard
     * Adobe Marketo
     * Campaign Monitor
     * HubSpot
     * Klaviyo
     * Mailchimp
     * Oracle Eloqua
     * Oracle Responsys
     * Pardot
     * Salesforce Marketing Cloud
     * SAP Marketing Cloud
   * By Industry
     * Marketing & Ad Agencies
     * Financial Services
     * Retail & eCommerce
     * Software & Technology
     * Travel
     * Sportsbook & Casino
   * By Role
     * Designers & Developers
     * Marketers
     * Marketing Leadership
 * Pricing
   * All PlansSee solutions for companies of all sizes
   * Litmus BasicBuild error-free, effective emails quickly
   * Litmus PlusAutomate testing to ensure quality
   * Enterprise PlanBoost collaboration and drive results
 * Resources
   * Resource Center
     * What’s New
     * Blog
     * Ebooks & Reports
     * Events
     * Litmus Live 2023
     * Customer Success Stories
     * Convince Your Team
     * Community
   * Free Tools
     * Email Client Market Share
     * Gmail Tabs Check
     * Litmus Scope
     * Templates
     * Email Gallery
 * Company
   * Our Story
   * Careers
   * Leadership
   * News
   * Partner with Litmus
 * LoginTry for Free

Search
Close search ×
Login Try for Free
 * Share page through Facebook
 * Share page through Twitter
 * Share page through Linkedin
 * Share page through e-mail

Blog
Lauren Smith
on October 19, 2017
Read Time: 6 min


HOW TO BAN BLUE LINKS ON IOS DEVICES IN EMAIL


Categories
Tips & Resources

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.

iOS View
Original Email


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

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.

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.

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 →


YOU MIGHT ALSO LIKE

Blog

9 Expert Tips to Improve Email Marketing Performance

Blog

Animated GIFs in Email: Examples & How To’s [Guide]

Blog

The Ultimate Email Checklist: 29 Things to Check Before You Send

Email marketing made better


Contact
675 Massachusetts Ave., 10th Floor
Cambridge, MA 02139
+1 (866) 787-7030
hello@litmus.com

 * Capabilities
   * Why Litmus
   * Email Design
   * Email Building
   * Email Personalization
   * Email Testing
   * Email Analytics
   * Email Collaboration & Review
   * Technology Integrations
 * Resources
   * What’s New
   * Blog
   * Events
   * Ebooks & Reports
   * Litmus Live 2023
   * Customer Success Stories
   * Convince Your Team
   * Community
 * Company
   * Our Story
   * Careers
   * Leadership
   * News
 * Support
   * Contact Us
   * Help Center
   * System Status
   * Trust Center

© Litmus Software, Inc. 2005-2023. All rights reserved
 * Privacy Policy
 * Terms of Service

Litmus does not engage in the sale of customer data.

View Information about CCPA/CPRA Compliance
 * 
 * 
 * 
 * 






twitterfacebooklinkedinyoutube-playinstagramsearch envelope

By clicking “Accept All Cookies”, you agree to the storing of cookies on your
device to enhance site navigation, analyze site usage, and assist in our
marketing efforts. Clicking "Reject All" may prevent you from using the site
normally.

Cookies Settings Reject All Accept All Cookies



PRIVACY PREFERENCE CENTER

When you visit any website, it may store or retrieve information on your
browser, mostly in the form of cookies. This information might be about you,
your preferences or your device and is mostly used to make the site work as you
expect it to. The information does not usually directly identify you, but it can
give you a more personalized web experience. Because we respect your right to
privacy, you can choose not to allow some types of cookies. Click on the
different category headings to find out more and change our default settings.
However, blocking some types of cookies may impact your experience of the site
and the services we are able to offer.
Cookie Policy
Allow All


MANAGE CONSENT PREFERENCES

STRICTLY NECESSARY COOKIES

Always Active

These cookies are necessary for the website to function and cannot be switched
off in our systems. They are usually only set in response to actions made by you
which amount to a request for services, such as setting your privacy
preferences, logging in or filling in forms. You can set your browser to block
or alert you about these cookies, but some parts of the site will not then work.
These cookies do not store any personally identifiable information.

FUNCTIONAL COOKIES

Functional Cookies

These cookies enable the website to provide enhanced functionality and
personalisation. They may be set by us or by third party providers whose
services we have added to our pages. If you do not allow these cookies then some
or all of these services may not function properly.

PERFORMANCE COOKIES

Performance Cookies

These cookies allow us to count visits and traffic sources so we can measure and
improve the performance of our site. They help us to know which pages are the
most and least popular and see how visitors move around the site. All
information these cookies collect is aggregated and therefore anonymous. If you
do not allow these cookies we will not know when you have visited our site, and
will not be able to monitor its performance.

TARGETING COOKIES

Targeting Cookies

These cookies may be set through our site by our advertising partners. They may
be used by those companies to build a profile of your interests and show you
relevant adverts on other sites. They do not store directly personal
information, but are based on uniquely identifying your browser and internet
device. If you do not allow these cookies, you will experience less targeted
advertising.

Back Button


PERFORMANCE COOKIES



Search Icon
Filter Icon

Clear
checkbox label label
Apply Cancel
Consent Leg.Interest
checkbox label label
checkbox label label
checkbox label label

Reject All Confirm My Choices