Link phone numbers correctly

When optimizing your website for mobile devices, you shouldn't just focus on different screen sizes, optimized loading times, and special features (like hover effects), but also consider the specific capabilities of the devices. This includes (some may have forgotten) making phone calls.


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