Telefon-Links für Smartphones, desktopfreundlich
Aktuelle Smartphones versuchen, auf Webseiten angezeigte Telefonnummern zu erkennen und anrufbar zu machen. Das gelingt nicht immer. Mit einem geeigneten HTML-Link kann man den Geräten helfen. Allerdings sind die Links für den gemeinen Desktop-Browser nicht zu gebrauchen. Es gibt verschiedene Ansätze damit umzugehen. Eine geeignete Darstellung mit CSS ist einer davon.
Links in HTML bestehen – abgesehen vom Markup – aus einem URI. URIs für Webseiten beginnen mit “http:”. Für Telefonnummern gibt es schon lange einen RFC, der als Präfix “tel:” vorschreibt. Der aktuelle RFC zu diesem Thema hat die Nummer 3966, wurde im Dezember 2004 veröffentlicht, und löste einen älteren Text aus dem Jahr 2000 ab. Standardkonform sieht ein Link auf eine Telefonnummer also beispielsweise so aus:
<a href="tel:+491631737743">0163 / 173 77 43</a>
Aktuelle mobile Browser erlauben dem Benutzer per Klick auf den Link einen Anruf auszulösen. So weit so gut.
Leider zeigen auch Desktop-Browser den Link an, können aber im Normalfall mit dem URI nichts anfangen. Der Benutzer bekommt eine Fehlermeldung.
Eine Möglichkeit mit diesem Problem umzugehen, besteht darin, den Linktext im Desktop-Browser wie normalen Text darzustellen. In CSS3 sieht das zum Beispiel wie folgt aus:
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: none;
color: #000;
}
Für Smartphones muss man nun noch die gewünschte Formatierung einrichten:
@media only screen and (max-device-width: 480px) {
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
text-decoration: underline;
color: blue;
}
}
Diese Vorgehensweise hat den Vorteil, dass HTML-seitig keine besonderen Maßnahmen erforderlich sind. Die Steuerung liegt ausschließlich auf der CSS-Seite. Nachteilig ist, dass der Link auch im Desktop-Browser existiert und der Benutzer versehentlich darauf klicken könnte. Als weiterer Nachteil ist derzeit anzuführen, dass erst die modernsten Browser die CSS-Regel verstehen.
Letzteres ist für uns bei Linkwerk aber vernachlässigbar. Erstens sind unsere Kunden durchaus technikaffin und wenn jemandem der Link negativ auffällt und er uns darauf anspricht, sind wir gleich mit ihm im Gespräch; besser könnte es nicht laufen ;-). Aus diesem Grund setzen wir die beschriebene Methode auf unserer Adressseite ein.
January 17th, 2012 at 15:59
Ein zusätzlich eingefügtes cursor: text; lässt den Link auch beim Cursor wie normalen Text erschenen. So lässt er sich besser kaschieren.
April 13th, 2013 at 10:17
Hallo,
das ist sehr schön und praktisch. Kompliment.
Gibt es eigentlich eine Möglichkeit den Telefonlink so zu gestalten/programmieren, dass er nicht direkt zu einem Anruf wird, sondern dem User auf dem handy anbietet (idealerweise auch desktop) diese inklusive dem Namen beispielsweise in den „Kontakten“ abzulegen?
Mich stört etwas, dass der User sich so gezwungen sieht, sofort anzurufen, statt etwa zu einem späteren Zeitpunkt (ohne dann die website noch mal aufrufen zu müssen)
Oder ist das weltfremd, was ich da einwende?
Danke für Eure Antwort im Voraus!
Garavani
August 22nd, 2013 at 18:29
Hi, Danke für diese Infos – genau diesen Hinweis habe ich gebraucht, werde es direkt mal umsetzen. Hoffentlich klappt es. Es nervt mich nämlich das aus meiner Signatur in Webmail Clients die Rufnummer als Hyperlink angezeigt wird.
November 24th, 2013 at 00:40
In modernen Browsern noch ein pointer-events:none; dazu und der Link wird auch versehentlich nicht mehr geklickt.
December 12th, 2013 at 07:53
Danke für den Tipp mit dem CSS3 Trick !!!!!!!
March 17th, 2014 at 13:05
Wenn jemand Skype installiert hat funktioniert das ganze auch mit dem tel:0123456789
May 12th, 2014 at 14:24
Es gibt auch genug Nutzer, die am Desktop den Link anklicken wollen, weil sie Skype oder Sipgate benutzen.
January 2nd, 2015 at 14:08
Mittlerweile ist der Link auch am Desktop nutzbar!
Mac-User haben die möglichkeit via FaceTime mit ihrem iPhone zu telefonieren und Alle anderen Nutzer können damit Skype öffnen zum telefonieren…
November 13th, 2015 at 13:27
Danke für den Tipp. Vor allem für Android nützlich da die Erkennung nicht so gut funktioniert wie beim Iphone.