Mobile Safari/ iPhone Mail.app HTML design issues: prevent autolinking and styling auto-links (dates, addresses, etc.)

Question

i am trying to design an HTML e-mail that should also look good when it is read on mobile devices. My biggest problems are with the iPhone (iOS 4): its mostly undocumented \

Answer 1

We ran into this issue as well. In order to disable the format detection of addresses in Safari on iOS, we wrapped our address in an <a> tag without a href attribute and with a style attribute defining the color that we wanted it to be:

<a style="color: #c0c0c0;">Square, Inc., 901 Mission Street, San Francisco, CA 94103</a>

The result is still clickable in iOS Safari, but is rendered in the color that we desired.

In other browsers the link is not clickable and because the inline style color was the same as the existing text, it didn't look any different that the surrounding text.

Answer 2

I don't think you can disable auto linking for addresses and dates like you do with phone numbers, at least it is not in the Apple's official documentation, the Safari HTML Reference.

A hack to try to prevent auto linking is to use some redundant tags in the content. For example, instead of writing out <div>+61 3 777 8888</div>, you could do something like <div><foo>+61 3 777</foo> 8888</div>. It's not very elegant, but it might achieve what you want.

Answer 3

If you can get away with it, enclosing in single quotes will disable auto-linking. This also works for the subject line, where you can't use HTML tricks.

Answer 4

I actually figured out a trick to do this. It's pretty horrible, but it works. You can read my post about it at http://commondream.net/post/8933806735/avoiding-data-detectors-in-ioss-mail-app, but the general gist is that data detectors won't link content that is already a link in HTML emails, so you can turn something like:

<span>Tuesday</span>

into:

<a href="#tuesday" id="tuesday" 
    style="color: #000; text-decoration: none;">Tuesday</a>

It's horrible code, but it keeps the data detectors from happening with only a couple of drawbacks, namely ugly markup and the mail client scrolling to that particular item if you click on it.

All of that said, I think it's pretty limited when you should disable data detectors. I had an email that listed weather forecasts by day of week, and felt like no user would ever want to mark that information down in their calendar, but I'd say you shouldn't disable data detectors if you ever think that they could actually be useful.

Answer 5

Creating <a> link tag that doesn't do anything seems to be the best option for date and address at least:

<a href="javascript: void(0)" style="cursor:text; text-decoration:none; color:#333333;">July 18, 2014</a>

You can use

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

for phone numbers ONLY and it will disable phone links for all; This may not what you want to do.

If you don't use this meta tag, you can style with CSS to change the link color as desired. and use above code (<a> tag) for phone numbers that you don't want to link.

Answer 6

This question was answered a long while back in this thread How to disable phone number linking in Mobile Safari? but to reiterate for all other SEO visitors like myself....

...according to the Safari Web Content Guide for iPhone:

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