Telefonverbindungen sind eine Sache. Wie ein Ankerlink, auf den Sie tippen, um (wahrscheinlich) zu einer anderen Seite zu gelangen, sind dies Links, auf die Sie tippen, um eine Nummer auf einem telefonfähigen Gerät anzurufen. Sie gibt es schon seit geraumer Zeit. Dennoch verursachen sie mir viel Verwirrung. Zum Beispiel werden viele Geräte automatisch Telefonnummern erkennen und die Verknüpfung für uns tun, aber nicht immer.

Es gibt genug Web-Traffic auf mobilen Geräten und viele Desktop-Apps, die Anrufe tätigen können, dass es sich lohnt, mehr über Telefonverbindungen zu wissen.,

Default Usage

Wir haben einen Ausschnitt für Telefon links auf dieser Website, die hängt schon seit 2011:

<a href="tel:1-562-867-5309">1-562-867-5309</a>

Dies funktioniert auch bei text-links:

<a href="tel:1-562-867-5309">Click to Call!</a>

tel: ist nicht so sehr ein feature, wie es ist ein Protokoll, viel in der gleichen Weise, dass http: und mailto: handelt es sich um Protokolle für die <a> – tag feature. Die Spezifikation selbst hat nichts darüber zu sagen, obwohl HMTL5 benutzerdefinierte Protokollhandler unterstützt, mit denen ein solches Protokoll verwendet werden kann.,

Sie fragen sich wahrscheinlich, warum tel: in Ermangelung einer offiziellen Spezifikation als Standardnutzung angesehen werden kann. Sie können dies auf die Tatsache zurückführen, dass es sich um einen vorgeschlagenen Standard bereits im Jahr 2000 handelte und später von iOS übernommen wurde, was ihn de facto zu ungefähr 2007 macht. Es gibt andere telefonbasierte Protokolle (auf die wir später eingehen werden), aber wir werden uns auf tel: angesichts seiner relativen Bedeutung konzentrieren.,

Browserunterstützung

tel: wird als Protokollhandler für Links ohne offizielle Dokumentation angezeigt.und wo es keine Dokumentation gibt, sehen wir oft Unterschiede in der Browserunterstützung und im Verhalten. Das heißt nicht, dass Browser das <a> – Tag selbst nicht erkennen. Stattdessen treffen Browser möglicherweise unterschiedliche Entscheidungen darüber, was zu tun ist, wenn auf diesen Link geklickt wird. Beispielsweise kann ein Browser davon ausgehen, dass eine andere App geöffnet werden muss, und löst einen Dialog aus, in dem gefragt wird, welche App verwendet werden soll. In anderen Fällen wird der Link möglicherweise vollständig ignoriert.,

Browser Nicht verlinkt?,td>Ja Initiiert anruf
iOS Ja Löst optionen zu rufen, nachricht, kopieren oder fügen sie die nummer zu die Kontakte app
Opera (OSX) Ja Löst dialog bestätigung der verwendung von eine andere app
Opera (Windows) Yes Löst einen Fehlerdialog aus, der das Protokoll nicht erkennt
Safari Yes Startet FaceTime

Styling Phone Links

Styling telephone numbers is like any other link., Tatsächlich erbt es das Standardstyling für Anker:

a { color: orange; text-decoration: none;}

Angenommen, wir müssen nur Stile auf Telefonlinks anwenden., Wir können dies mit einem Pseudo-Selektor tun, der den tel: – Text in einer bestimmten URL durchsucht:

a { color: orange; text-decoration: none;}

Tuts+ hat einen netten Trick mit dem ::before Pseudo-Selektor, um das Unicode-Telefonzeichen hinzuzufügen, bevor die Nummer angezeigt wird:

a:before { content: "\260e"; margin-right: 0.5em;}

Alternative telefonbezogene Links

Glauben oder nicht, tel: ist nicht die einzige Möglichkeit, einen Anruf mit einem Link zu initiieren. Hier sind ein paar andere benutzerdefinierte Telefon-basierte Protokoll-Handler zur Verfügung.,

  • callto: Genau wie tel:, wird jedoch zum Initiieren von Anrufen über die Skype-App verwendet.
  • automatisch erkannt: Viele Browser erkennen automatisch eine Telefonnummer im HTML-Code und verknüpfen sie für Sie-Sie müssen das Markup nicht ändern. iOS zum Beispiel wird dies vollständig tun, obwohl dies für Chrome unter Android nicht der Fall zu sein schien.
  • sms: Überspringen Sie den Anruf und gehen Sie direkt zur Textnachricht. Dies scheint viel weniger unterstützt zu werden als tel: unter Browsern, einschließlich Mobilgeräten.,
  • fax: Mit Faxgeräten zurück in die Zukunft. Wieder fleckige Zuverlässigkeit.

Best Practices

Es ist irgendwie lustig, über Best Practices zu sprechen, wenn es um etwas ohne Spezifikationen geht. Die Spezifikation gibt zwar eine kurze Meinung zur Idee „Click to Call“ ab, aber hier sind einige Dinge zu beachten, wenn Sie mit Telefonnummern und Links arbeiten.

Betrachten Sie den Kontext

Eine Telefonverbindung kann zu einem hervorragenden Call-to-Action führen, insbesondere auf Mobiltelefonen, bei denen die Reibung zwischen Inhalt und Anruf verringert wird., Gleichzeitig könnten Telefonverbindungen als Hindernis für ein Desktop-Erlebnis angesehen werden, bei dem ein Anruf nicht möglich wäre, wenn dem Gerät eine App fehlt, die es unterstützt.

Eine Idee wäre, eine Klasse speziell für Telefonverbindungen zu erstellen und zu versuchen, sie basierend auf dem, was wir über den Browser wissen, anzuzeigen oder auszublenden. Modernizr-und Medienabfragen sind hier praktisch, wenn auch völlig ungenau.

Verwenden Sie Ländercodes

Ein Ländercode ist nicht erforderlich, könnte aber eine nette Geste für Websites mit internationalem Verkehr sein., Den Ländercodes kann eine + vorangestellt werden, aber auch das ist nicht erforderlich.

<a href="tel:+01-562-867-5309">1-562-867-5309</a>

Suchmaschinenoptimierung

SEO-Experten haben möglicherweise mehr hinzuzufügen als ich, aber Google bietet ein strukturiertes Datenformat für lokale Unternehmen und die Verwendung macht Telefonlinks für Crawler besser erkennbar und formatiert sie auf Suchergebnisseiten auf eine Weise, die die Anzahl viel umsetzbarer macht., Dudley Storey bietet einen hervorragenden Überblick mit dem folgenden Beispiel:

Auf der Kehrseite der Suchmaschinen Telefon Links folgen zu wollen, können Sie rel="nofollow" hinzufügen Links von gefolgt und indiziert zu entmutigen. Dies könnte eine gute Idee für jeden Link sein, der nicht als Aufruf zum Handeln bezeichnet wird, da Webcrawler dazu neigen würden, zu versuchen, ihm zu folgen.,

<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>

Deaktivieren der Nummernerkennung in iOS

Wenn Sie Ihrem Markup Telefonlinks hinzufügen möchten, sollten Sie auch erwägen, iOS von der automatischen Erkennung von Telefonnummern zu deaktivieren und Ihre Stile zu überschreiben. Fügen Sie dem Dokument <head> Folgendes hinzu, um dies auszuschalten:

<meta name="format-detection" content="telephone=no">

Weiterlesen