Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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 "auto linking" feature really bugs me.

Autolinking seems to appear on

  • phone numbers (this is the only documented feature, as explained here)
  • addresses
  • dates

Is there any documentation out there on how to

  1. disable auto linking for dates and addresses
  2. "correct" the autolinking via microformats or something similar (so the results are better than they actually are with iOS 4)

Any information, hints, or clues are really appreciated because there does not seem to be any information out there whatsoever.

like image 513
z3cko Avatar asked Mar 10 '11 20:03

z3cko


People also ask

How do I get my Safari Tabs back to normal?

You can choose the Safari app layout that works best for you. Depending on the layout, the search field appears at the top (Single Tab layout) or bottom (Tab Bar layout) of the screen. Go to Settings > Safari, then scroll down to Tabs. Select either Tab Bar or Single Tab.


2 Answers

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"> 
like image 80
Terri Ann Avatar answered Oct 07 '22 16:10

Terri Ann


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.

like image 27
commondream Avatar answered Oct 07 '22 17:10

commondream