I collegamenti telefonici sono una cosa. Come un link di ancoraggio si tocca (probabilmente) andare a un’altra pagina, questi sono i link si tocca per chiamare un numero su un dispositivo telefono-capace. Sono in giro da un bel po ‘ di tempo. Eppure, mi causano molta confusione. Ad esempio, molti dispositivi riconosceranno automaticamente i numeri di telefono e faranno il collegamento per noi, ma non sempre.

C’è abbastanza traffico web sui dispositivi mobili e un sacco di applicazioni desktop che sono in grado di effettuare chiamate, che vale la pena conoscere di più sui collegamenti telefonici.,

Utilizzo Predefinito

Abbiamo un frammento di telefono link su questo sito che è stato appeso intorno dal 2011:

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

Questo funziona anche su link di testo:

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

tel: non è tanto una funzione è un protocollo, molto nello stesso modo in cui http: e mailto: sono protocolli per il <a> funzionalità di tag. La specifica stessa non ha nulla da dire al riguardo, sebbene HMTL5 abbia fornito supporto per gestori di protocolli personalizzati, che consentono di utilizzare tale protocollo.,

Probabilmente ti starai chiedendo perché tel: può essere considerato un utilizzo predefinito in assenza di una specifica ufficiale su di esso. Si può accreditare questo al fatto che si trattava di uno standard proposto nel lontano 2000 e successivamente adottato da iOS, rendendolo il modo de facto di andare da circa 2007. Ci sono altri protocolli basati sul telefono (che arriveremo in seguito), ma ci concentreremo su tel: data la sua prominenza relativa.,

Supporto del browser

Vediamotel: apparire come gestore di protocollo per i collegamenti senza documentazione ufficiale; e dove non c’è documentazione, spesso vediamo differenze nel supporto e nel comportamento del browser. Questo non vuol dire che i browser non riescono a riconoscere il tag<a> stesso. Invece, i browser potrebbero prendere decisioni diverse su cosa fare quando si fa clic su quel link. Ad esempio, un browser può presumere che un’altra app debba essere aperta e attiverà una finestra di dialogo che chiede quale app utilizzare. In altri casi, il collegamento potrebbe essere ignorato del tutto.,

Browser Collega?,td>Sì Avvia la chiamata di telefono
iOS Sì Trigger opzioni di chiamata, un messaggio, copiare o aggiungere il numero alla Rubrica app
Opera (OSX) Sì Trigger finestra di dialogo che conferma l’uso di un’altra app
Opera (Windows) Sì attiva una finestra di errore che non riconosce il protocollo
Safari Sì Lancia FaceTime

Styling di Telefono Link

Styling numeri di telefono è come tutti gli altri link., In effetti, erediterà lo stile predefinito per le ancore: 

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

Diciamo che solo gli stili da applicare ai collegamenti telefonici., Si può fare con una pseudo selettore che cerca il tel: testo in un determinato URL:

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

Tuts+ ha un bel trucco con il ::before pseudo-selettore per aggiungere unicode telefono personaggio prima che il numero viene visualizzato:

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

Telefono Alternativo-Link Correlati

che ci crediate o no, tel: non è l’unico modo per avviare una telefonata con un link. Qui ci sono alcuni altri gestori di protocollo basati su telefono personalizzato a nostra disposizione.,

  • callto:Esattamente come tel: ma utilizzato per avviare chiamate tramite l’app Skype.
  • rilevamento automatico: molti browser rileveranno automaticamente un numero di telefono nell’HTML e lo collegheranno per te—non è necessario modificare il markup. iOS, per esempio, sarà totalmente fare questo, anche se non sembra essere il caso per Chrome su Android.
  • sms: Salta la chiamata e vai direttamente al messaggio di testo. Questo sembra essere molto meno supportato ditel: è tra i browser, incluso il mobile.,
  • fax: Torna al futuro con i fax. Ancora una volta, affidabilità spotty.

Best practice

È un po ‘ divertente parlare di best practice quando si tratta di qualcosa senza specifiche. Le specifiche danno una breve opinione sull’idea” clicca per chiamare”, ma qui ci sono alcune cose da tenere a mente quando si lavora con numeri di telefono e link.

Considerare il contesto

Un collegamento telefonico può fare per un eccellente call-to-action, soprattutto sui telefoni cellulari dove riduce l’attrito tra il contenuto e la chiamata., Allo stesso tempo, i collegamenti telefonici potrebbero essere considerati un ostacolo su un’esperienza desktop in cui una telefonata non sarebbe possibile se il dispositivo manca di un’app che lo supporti.

Un’idea sarebbe quella di creare una classe specifica per i collegamenti telefonici e tentare di mostrarli o nasconderli in base a ciò che sappiamo sul browser. Modernizr e media query sono a portata di mano qui, anche se del tutto impreciso.

Usa codici paese

Un codice paese non è richiesto, ma potrebbe essere un bel tocco per i siti con traffico internazionale., I codici paese possono essere preceduti da un + ma anche questo non è richiesto.

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

Search Engine Optimization

Gli esperti SEO potrebbero avere più da aggiungere su questo di me, ma Google offre un formato di dati strutturato per le imprese locali e il suo utilizzo renderà i collegamenti telefonici più riconoscibili ai crawler, formattandoli sulle pagine dei risultati di ricerca in un modo che rende il numero molto più, Dudley Piani, offre una panoramica eccellente con il seguente esempio:

il rovescio della medaglia di volere che i motori di ricerca di seguire di telefono di collegamenti, è possibile aggiungere rel="nofollow" per scoraggiare i link da seguire e indicizzati. Questa potrebbe essere una buona idea per qualsiasi collegamento che non venga designato come invito all’azione poiché i web crawler sarebbero inclini a cercare di seguirlo da nessuna parte.,

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

Disattivazione del rilevamento dei numeri in iOS

Se si prevede di aggiungere collegamenti telefonici al markup, si potrebbe anche prendere in considerazione la possibilità di disabilitare iOS dal rilevamento automatico dei numeri di telefono e sovrascrivere i propri stili. Aggiungere quanto segue al documento <head> per disattivarlo:

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

Ulteriori letture