telefoonverbindingen zijn een ding. Net als een ankerlink tikt u om (waarschijnlijk) naar een andere pagina te gaan, dit zijn links die u tikt om een nummer te bellen op een apparaat dat geschikt is voor de telefoon. Ze zijn er al een tijdje. Toch zorgen ze voor veel verwarring. Bijvoorbeeld, veel apparaten zullen automatisch herkennen telefoonnummers en doen de koppeling voor ons, maar niet altijd.
Er is genoeg webverkeer op mobiele apparaten en veel desktops apps die in staat zijn om te bellen, dat het de moeite waard is om meer te weten over telefoonlinks.,
Standaard Gebruik
We hebben een fragment voor telefoon koppelingen op deze site die zijn opknoping rond sinds 2011:
<a href="tel:1-562-867-5309">1-562-867-5309</a>Dit werkt ook op tekst links:
<a href="tel:1-562-867-5309">Click to Call!</a>tel: is niet zozeer een functie als een protocol, veel op dezelfde manier dat http: en mailto: zijn de protocollen voor de <a> – tag zijn voorzien. De specificatie zelf heeft er niets over te zeggen, hoewel HMTL5 wel ondersteuning bood voor aangepaste protocol handlers, die zo ‘ n protocol kunnen gebruiken.,
u vraagt zich waarschijnlijk af waarom tel: als standaardgebruik kan worden beschouwd als er geen officiële specificaties op staan. Je kunt dit toeschrijven aan het feit dat het een voorgestelde standaard was zo ver terug als 2000 en later door iOS aangenomen, waardoor het de de facto manier om te gaan door ruwweg 2007. Er zijn andere telefoon-gebaseerde protocollen (waar we later op zullen ingaan), maar we zullen ons richten op tel: gezien de relatieve prominentie.,
Browser Ondersteuning
we zien tel: pop-up als een protocol handler voor links zonder officiële documentatie; en waar er geen documentatie is, zien we vaak verschillen in browser ondersteuning en gedrag. Dat wil niet zeggen dat browsers de <a> tag zelf niet herkennen. In plaats daarvan kunnen browsers verschillende beslissingen nemen over wat te doen wanneer op die link wordt geklikt. Een browser kan bijvoorbeeld aannemen dat een andere app moet worden geopend en zal een dialoogvenster activeren waarin wordt gevraagd welke app te gebruiken. In andere gevallen kan de link helemaal worden genegeerd.,
| Browser | linkt het?,td>Ja | Initieert telefoontje |
|---|---|---|
| iOS | Ja | Triggers opties om te bellen, bericht, kopie of het nummer toevoegen aan de Contacten app |
| Opera (OSX) | Ja | hiermee wordt het dialoogvenster bevestiging van het gebruik van een andere app |
| Opera (Windows) | Ja | hiermee wordt een dialoogvenster dat wordt niet herkend door het protocol |
| Safari | Ja | Lanceert FaceTime |
Styling Telefoon Links
Styling telefoonnummers is net als elke andere link., In feite zal het de standaard styling voor ankers erven:
a { color: orange; text-decoration: none;}laten we zeggen dat we alleen stijlen toepassen op telefoonkoppelingen., We kunnen dat doen met een pseudo selector, die zoekt de tel: tekst in een bepaalde URL:
a { color: orange; text-decoration: none;}Tuts+ heeft een mooie truc met behulp van de ::before pseudo selector toe te voegen, de unicode-telefoon teken vóór het nummer verschijnt:
a:before { content: "\260e"; margin-right: 0.5em;}Alternatief Telefoon-Verwante Koppelingen
Geloof het of niet, tel: is niet de enige manier om een telefoon gesprek met een link. Hier zijn een paar andere aangepaste telefoon-gebaseerde protocol handlers tot onze beschikking.,
-
callto:precies zoalstel:maar wordt gebruikt om gesprekken via de Skype-app te starten. - automatisch gedetecteerd: veel browsers detecteren automatisch een telefoonnummer in de HTML en koppelen het voor u—u hoeft de opmaak niet te wijzigen. iOS, bijvoorbeeld, zal dit helemaal doen, hoewel het niet het geval leek te zijn voor Chrome op Android.
-
sms:sla de oproep over en ga direct naar SMS. Dit lijkt een stuk minder ondersteund dantel:is onder browsers, inclusief mobiel., -
fax:ga terug naar de toekomst met faxmachines. Nogmaals, zwakke betrouwbaarheid.
Best Practices
Het is best grappig om over best practices te praten als het gaat om iets zonder SPECIFICATIES. De spec geeft wel een korte mening over de “click to call” idee, maar hier zijn een paar dingen om in gedachten te houden bij het werken met telefoonnummers en links.
beschouw de Context
een telefoonverbinding kan een uitstekende call-to-action zijn, vooral op mobiele telefoons waar het de wrijving tussen de inhoud en de oproep vermindert., Tegelijkertijd, telefoonverbindingen kunnen worden beschouwd als een belemmering op een desktop-ervaring waar een telefoontje niet mogelijk zou zijn als het apparaat ontbreekt een app die het ondersteunt.
een idee zou zijn om een class te maken speciaal voor telefoonverbindingen en proberen om ze te tonen of te verbergen op basis van wat we weten over de browser. Modernizr en media queries zijn handig hier, maar totaal onnauwkeurig.
gebruik landcodes
een landcode is niet vereist, maar kan een leuke touch zijn voor sites met internationaal verkeer., Landencodes kunnen worden voorafgegaan door een +, maar ook dat is niet vereist.
<a href="tel:+01-562-867-5309">1-562-867-5309</a>zoekmachine optimalisatie
SEO experts hebben hier misschien meer aan toe te voegen dan ik, maar Google biedt een gestructureerd dataformaat voor lokale bedrijven en het gebruik ervan zal telefoonlinks herkenbaarder maken voor crawlers, door ze op zoekresultaten pagina ‘ s te formatteren op een manier die het nummer veel actiever maakt., Dudley Storey biedt een uitstekend overzicht met het volgende voorbeeld:
aan de andere kant van de wens om zoekmachines telefoonkoppelingen te laten volgen, kunt u rel="nofollow" toevoegen om koppelingen te ontmoedigen om te worden gevolgd en geïndexeerd. Dit zou een goed idee voor een link niet wordt aangewezen als een oproep tot actie, omdat web crawlers geneigd zou zijn om te proberen om het te volgen tot nergens.,
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>Nummerdetectie uitschakelen in iOS
Als u van plan bent telefoonkoppelingen aan uw opmaak toe te voegen, dan kunt u ook overwegen om iOS uit te schakelen van automatisch detecteren van telefoonnummers en uw stijlen te overschrijven. Voeg het volgende document toe <head> om dat uit te schakelen:
<meta name="format-detection" content="telephone=no">