Visit Linkwerk.com

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:+49406966480">040 / 69 66 48 0</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.


9 Responses to “Telefon-Links für Smartphones, desktopfreundlich”

  • Graccem Says:

    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.

  • Garavani Says:

    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

  • Marie Says:

    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.

  • Marc Haß Says:

    In modernen Browsern noch ein pointer-events:none; dazu und der Link wird auch versehentlich nicht mehr geklickt.

  • Sodah Says:

    Danke für den Tipp mit dem CSS3 Trick !!!!!!!

  • Werbeagentur Heilbronn Says:

    Wenn jemand Skype installiert hat funktioniert das ganze auch mit dem tel:0123456789

  • Sebastian Says:

    Es gibt auch genug Nutzer, die am Desktop den Link anklicken wollen, weil sie Skype oder Sipgate benutzen.

  • Pascal Says:

    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…

  • Franz Says:

    Danke für den Tipp. Vor allem für Android nützlich da die Erkennung nicht so gut funktioniert wie beim Iphone.