Link phone numbers correctly

If you optimize your own web presence for mobile devices, you should not only pay attention to different screen sizes, optimized loading times and special features in the operation (such as hover effects), but also to the special capabilities of the devices.


Incidentally, a prefixed “+49” in the href attribute is recommended because it enables customers from abroad to access the right telephone connection in Germany. The following markup can be used so that a phone number in the contact area of ​​a website opens the phone app when you tap it:

<a href="tel:+498921555122">089 21 555 122</a>

So that desktop users (who cannot do anything with the HTML tag without an installed Skype plug-in) are not confused, the following CSS markup is also recommended so that the link cannot be recognized as such:

a[href^="tel"] {
   cursor: default;
   text-decoration: none;
   color: #000;
}
@media only screen and (max-device-width: 480px) {
   a[href^="tel"] {
      text-decoration: underline;
      color: blue;
   }
}
Back