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.


September 28th, 2011 at 09:28
[...] habe ich so im blog von Linkwerk gefunden. Zum Artikel Da die normalen Browser mit dem Präfix “tel” nichts anfangen können, passiert [...]
January 17th, 2012 at 09:38
[...] [...]
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.