Geeks With Blogs

expression{web.blog} Thoughts on Expression Web and web tools in general

There are issues with displaying phone numbers on web pages. You may want them to display as clickable links on a mobile phone but not on the tablet or desktop view of the page.

HTML5 gives us the href="tel:+44 xxx yyyyyyyy" ability to have a clickable link which works on a phone but if clicked on a desktop normally does nothing except give a warning dialog unless you have the browser's Skype add-in.

Two options commonly used are:

1) Remove the underlining and link colour on the desktop view. It remains a link but isn't obvious.

This is really avoiding the issue and may still confuse the user if a link is accidently hovered over.

2) Don't convert it to a link at all and let the phone's OS automatically recognise it as a phone number.

Unfortunately this isn't fully supported or reliable. Windows Phone 7/7.5 doesn't support it at all. iOS and Android vary in the number formats they support and vary between OS version too.

Note that you can disable automatic phone number detection by using the following meta tag:

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

Coming across this recently where I had a table containing contact phone numbers, the 'responsive table' method mentioned in the last post enabled me to use a better solution. I used two table columns, one with a clickable link for the phone number and the other with the number as text. The text column is hidden on the mobile view and the link column is hidden on the tablet view upwards, using the responsive breakpoints. Unless it's a huge table the impact on page size isn't significant.

 

Posted on Saturday, December 29, 2012 7:07 AM | Back to top


Comments on this post: Phone numbers on mobile and desktop page views

No comments posted yet.
Your comment:
 (will show your gravatar)
 


Copyright © ihaynes | Powered by: GeeksWithBlogs.net | Join free