Only Show Text If On A Smartphone?

[Planet13]

Hi there, Everyone:

I am horrible at javascript, and I have tried finding the answer, but I apologize if this is real easy / already out there.

How do I detect if a visitor is using a smartphone and show a link to ONLY those people visiting on smartphones?

Basically, I am displaying a phone number to ALL visitors (both phone an ddesktop):

Call us at 1-555-555-1234

But I want to display an href tag if they are on a smartphone, such as:

<a href="tel://1-555-555-1234">Call us at 1-555-555-1234</a>

So that they can click on the phone number and it will open their phone app on their smart phone.

But I don't want to display it to desktop users because if they click on it, they will just get a 404 page.

Thanks in advance. Please kindly keep in mind that I hate javascrip (probably more right to say that javascript hates me), so if you could provide a CLEARLY written example, that would be GREATLY appreciated.

~~~~~

P.S. In case you are wondering, we tried just using the text without a link, such as using just:

1-555-555-1234

While that works on MY smart phone, a couple of people tried it out and it doesn't seem to work on their phones (one android, one iphone).

~~~~~

PPS: If this is better handled with server-side scripting instead of JS, please let me know.

[graeme_p]

As far as I can tell (is is that tel?) there is no way of doing this in JS perfectly:

1) you can detect touch capability in JS - but then you still show the links to tablets and to laptops with touch screens.

2) you can check the user agent on the server, but then you get it wrong for desktops that CAN handle tel: links (e.g. to start a soft phone), or people using fake user agents, etc.

3) You could assume that small screens are phones - but then you still get it wrong for phones with really large screens, or larger devices that can make calls.

[Planet13]

Thanks, Graeme.

So what would you do?

I think basically I am going to have to show the link to everyone (smartphones and desktops alike), and just live with having a broken link.

I don't think most desktop users would want to click on a phone number, but if they accidentally hover over the link and see that the cursor changes, they might want to click it. Who knows. People do lots of strange things!

[Fotiman]

These formats should work for automatically linking on both Android and iPhone smartphones:
[phone]
555 555 5555
555.555.5555

I wonder if using the hCard Microformat [microformats.org] might also indicate to some phones to treat it as a phone number?

In any case, you might be able to use CSS media queries to show the linked version on small resolutions and the non-linked version on high resolutions. It's not a guarantee but may work for most cases.

[Planet13]

@ Fotiman

Thanks for the note.

I will probably have to try the formats you suggested later - as well as the CSS suggestion.

I kind of need to get about 15 pages up and running today. Was hoping to have them "perfect" first, but I guess I will get them up first and finish off the phone number thingy later.

[not2easy]

Only a few mobile phones might be able to decipher the format you are using. There shouldn't be slashes after the colon or dashes in the number. Try

<a href="tel:[phone]">

which for a US 800 type number would be

<a href="tel:+1800nnnnnnn">

The W3C site does not use the + info from their site: [w3.org...]

Mobile devices have many hardware features that desktop computers don’t. The two most obvious are:

Camera: You’ll be hard-pressed to buy a phone that doesn’t have a built-in camera these days and we are beginning to see APIs to allow web applications to interface with such devices.
Phone: Let’s not forget that the primary purpose of a mobile phone is to call people! This can be smoothly integrated into your website by using the little known tel: protocol. Just like you use a mailto: to link to an email address, you use tel: to link to a phone number. When you click the tel: link it causes the phone to dial

 <code><a href="tel:[phone]">Phone [phone] to book a table</a></code> 

Note the inclusion of the phone number in the link text as well — while this may seem a little repetitious, bear in mind that some browsing devices won’t support the tel: protocol, such as our old friend the desktop computer.

[Fotiman]

Note, don't assume that desktop users will not be able to call the linked phone numbers either. Skype (and I'm sure others) have browser extensions that will recognize these and let you call them.

[graeme_p]

Yes, but there is no way to test for what a device supports. Either you assume that desktops's do not support tel: links or you just show them to everyone.

Personally, I think the best solution is just to show everyone the link: this is really a failure of the browser to sensibly handle the unknown.

What about adding a help message on hover?

[lucy24]

I think you need to leave some responsibility with the human user. When someone clicks on a phone number, what would they expect to happen? Sure there will be some people who expect their computer to magically dial the number even if they have never set up this functionality, even if the computer is not connected to a phone line. (Computer dialing has been around for a while. I remember my father telling me about his setup at least ten years ago.) No matter what you do, some human somewhere will expect it to work differently-- i.e. in a way that no rational being would ever think of trying. Can't be helped.

What about adding a help message on hover?

A "title" should do, shouldn't it? Wouldn't matter that mobiles don't have a hover, because they're the ones that can definitely place the call.

Corollary worry: If you've got your phone number in plain sight on the page, will this increase junk phone calls? Or do those just not happen any more anyway? (Don't know if it's because someone has started enforcing the Do Not Call registry or just because humans, even at call centers in India, cost more than e-mail.)

[Alex_TJ]

Hi Planet,
I have the same thing on my site and it works great - I didn't use js but just straightforward media queries:

@media only screen and (max-width: 765px) {etc etc }

then on page:

<li><a href="tel:+000000">Call us</a></li>

[Alex_TJ]

And to hide and show, wrapped that in a class:

<ul class="mobiledmenu">

That was hidden normally, then displayed with that media query above - simple and works well.

[graeme_p]

@Alex_TJ, that will probably show on some phones with large screens, it will show on some small tablets (in vertical mode anyway), and it will not show on desktops with soft-phones.

[Planet13]

Corollary worry: If you've got your phone number in plain sight on the page, will this increase junk phone calls? Or do those just not happen any more anyway? (Don't know if it's because someone has started enforcing the Do Not Call registry or just because humans, even at call centers in India, cost more than e-mail.)

I have phone numbers on my business site(s), and yeah, I get a lot of robo-calls, and callers with thick Russian / East European accents, but who refer to themselves as Bob or Joe.

But I also get customers who call by phone as well. They tend to be... ummm... older, and they don't seem to have a whole lot going on in their lives.

They often start off the conversation with something like, "Do you remember me? I bought a widget from you way back in 2001. My name is Bob."