Geeks With Blogs
expression{} 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

# re: Phone numbers on mobile and desktop page views
Requesting Gravatar...
Testing responsive sites on real devices is the ideal, if you have access to them. Using Electric Plum or BrowseEmAll can be useful too but these days browsers have built-in emulation modes of their own.Qmobile
Q mobile prices
Left by Muhammad Zaheer on May 23, 2016 7:30 PM

# re: Phone numbers on mobile and desktop page views
Requesting Gravatar...
2 Software mxf converter free download to convert HD camcorder files. convert avchd video files to avi,
mp4, wmv, mov mts to avi mp4 mov mkv iMovie mts converter g
Left by googl on Dec 10, 2016 3:16 PM

Your comment:
 (will show your gravatar)

Copyright © ihaynes | Powered by: | Join free