Telefonnummern richtig verlinken

Optimiert man den eigenen Webauftritt für mobile Endgeräte, sollte man nicht nur auf verschiedene Bildschirmgrößen, optimierte Ladezeiten und Besonderheiten in der Bedienung (wie Hover-Effekte) achten, sondern auch auf die besonderen Fähigkeiten der Devices eingehen. Dazu gehört (manch einer hat es vielleicht vergessen) auch das telefonieren.


Ein vorangestelltes „+49“ im href-Attribut ist übrigens empfehlenswert, weil damit Kunden aus dem Ausland an den richtigen Telefonanschluss nach Deutschland gelangen. Damit eine Telefonnummer im Kontaktbereich einer Webseite beim Antippen sofort die Telefon-App öffnet, kann folgendes Markup verwendet werden:

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

Damit Desktop-User (die mit dem HTML-Tag ohne installiertem Skype-Plugin nichts anfangen können) nicht verwirrt werden, empfiehlt sich zusätzlich folgendes CSS-Markup, damit der Link nicht als solcher zu erkennen ist:

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;
   }
}
Zurück