Extravision

Extravision Blogsblog

Recent Posts

Categories

Posts

How to disable auto links on iOS and android devices?

April 1, 2014

Mobile open rates have increased over the last year and as a result you have to consider optimising your email for mobile devices. (For more information about mobile responsive emails, check out the post written by Andrew Chau)
 
You will notice one thing when testing your email design on iOS devices; unattractive blue auto links. These links usually appear over telephone numbers, addresses, and certain references to dates/times. Getting the design of your email is important and these links can cause a bit of a headache. On the bright side, the auto links within android devices doesn’t change the initial styling.
 
Not to worry, there are a couple ways to fix this.
 
 
Solution 1, telephone numbers:

You will notice that this particular blue link over the telephone number has a tap to call function. This provides an option for the mobile user to call the telephone number that was clicked on. This function is triggered by number patterns made up of 7 to 15 digits and also the telephone formats listed below:
 
555-5555
(555) 555-5555
+1 (555) 555-5555
555 5555
555 555 5555
+1 555 555 5555
555.5555
555.555.5555
+1 555.555.5555
 
For the quick fix in remove the tap to call function along with the blue styling, simply add the following code within the head tag:
<meta content="telephone=no" name="format-detection">
 
So the code will look similar to this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="telephone=no" name="format-detection">
<title>Blog - Disable Auto Links IOS</title>
</head>

Be cautious when disabling this function as it is best used against a string of numbers that isn’t a telephone number such as a tracking number or an order number. If you want to keep the functionality but edit the styling follow, solution 3.
 
Source:
Disabling Phone Number Links on iOS – Rob Stinogle
Mobile Web Quick Tip: Phone Number Links – Mark Hammonds
 
 
Solution 2, address, dates and times:

 
Addresses, dates and times are also altered into blue links on iOS devices.
 
The address has now become a link, carrying a function that allows the subscriber to view the address on a map. With one click the subscriber is redirected to a map app within the device pinpointing where that address is located.
 
The function that has been applied over dates and times allows the subscriber to ‘Create Event’, ‘Show in Calendar’ and ‘Copy’. When clicked on the subscriber is redirected to the calendar app where an event can be added. The blue links only appear when the days and times are written in this format:
Thursday – Sunday
5pm – 6pm
13:00 – 14:00
 
The fix for this would be to add a “zero-width non-joiner” right after the first character in the string of blue text. A zero-width non-joiner (&zwnj;) is a “non-printing” character that does not represent a written symbol.
 
Here is a couple example of how the code is applied:
3&zwnj;3 Worsley Street
T&zwnj;hursday – Sunday
 
If you want to keep the functionality but edit the styling, follow solution 3.
 
Source:
Learn how to ban blue links on iOS devices – Tweet by Trilogy Interactive
 
 
Solution 3, wrap the blue links with styled spans:

 
The best solution in overcoming this problem without losing the functionality would be to wrap the blue links with span tag. The span tag is styled by a class selector placed within the head section of your html source.
 
Within the head tag, you will need to create a class with the styles you wanted for the links. For example, the telephone number will look the same as the rest of the body text of my email. The font colour is #666666 and the text should not be underlined.
 
The code will look like this within the head tag:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.ovrdBlue a {color:#666666 !important; text-decoration: none;}
</style>
<title>Blog - Disable Auto Links IOS</title>
</head>

Now you simply add span tag around the telephone number, and apply the class to the span tag:
<span class=”ovrdBlue”>555-5555</span>
 
This solution allows you to keep the function without compromising the styling of your email.
 
Source:
Update banning blue links on iOS devices – Lauren Smith

Posted by Carissa Lo
Email Design


No comments

Comments are closed.

From the Blog

Data Protection, E-Privacy, GDPR. What does it all mean ?

Most people have heard of the Data Protection Act and if your in email marketing…

Simon Hill
December 5, 2016

5 things you should stop doing right now in your email marketing

It’s easy to get stuck in a rut with your email marketing campaigns. You can…

Jenni Malley
October 26, 2016

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog