Clickable phone links on mobile site

[declan]

We've received feedback from users that the telephone numbers should be clickable on mobile phones. Is this a change that you're interested in?

This article seems to cover the basics of how to do it:
http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers

[anselmbradford]

Yes, do you have a change in the works? It would be a good change to make together with #518

Also, it needs to take into consideration vanity numbers, I'm not sure whether making them clickable on Mobile or not causes problems #172

[declan]

Yes, change in the works. I'll post some code later today or early tomorrow.

As far as vanity numbers go, my Android phone is able to convert vanity numbers without any problem. I'll check on a couple of other devices, but it looks like it won't be an issue.

[declan]

Ok, since you guys are actively changing the way phone numbers are formatted in #415 I'm not going to submit a pull request until that's finalized.

First-draft code (with tests) visible here:
https://github.com/purplebinder/ohana-web-search/commit/c6131aced41dcd5514285fe4b5ee896712a2b6c8

Or check it out live:
http://ohana-clickable-phone.herokuapp.com/

The basic approach I'm thinking of is to define a phone_link helper, which will output an <a href="tel:+whatever" > tag.

Once you finalize how you're formatting the numbers, I'll pass the formatted number into that. That helper could go in the DetailFormatHelper, next to format_phone, or in a new ContactLinksHelper. Do you have a preference?

There's one tricky thing to deal with , which is that desktop browsers typically do not support the tel: protocol. If you click on the phone number link, you'll get an error. Possible ways to deal with this are:

• Check the User-Agent string on the server, only render phone links if we think the user is on a mobile device.
• Do a check in the browser, remove links with an href="tel:..." if they're not supported, similar to how Modernizr does feature detection. This could be tricky because it looks like there is not currently a clean, cross-browser way to check what protocols are supported.
• Just style the phone links so they don't look like links. This won't have much of an impact on mobile users, since they don't have hover states anyway, and will (hopefully) discourage desktop users from clicking on them.

Personally, I'm leaning towards the third approach since it's the simplest to implement and I don't forsee it being a big problem if the numbers don't look clickable. What do you think?

[declan]

After testing in a few more desktop browsers, it looks like the way that the links get handled depends partly on your OS (and maybe browser settings too?). All the browsers I've tried on my Mac prompt me to open Skype.

On Linux, Chrome prompts me to open some weird open-source calling app, and Firefox crashes.

I'll check on Windows and IE tomorrow when I'm at the office.

[monfresh]

The formatting of the phone number text and the link should be independent. If the tel: link must be in a specific format, then a separate helper should be defined for it. If the link format does not matter, then you can just set it to the raw phone number returned by the API.

[declan]

Ok, that sounds fine. I'll write a separate format helper for the link destination if I need to.

[Mocindia1]

Mumbai Oncocare Centre