El estado actual de los enlaces a teléfonos

Creo que a estas alturas, explicar lo que es un enlace a un teléfono es demasiado obvio, pero aún así lo voy a hacer porque considero que esta web es accesible por programadores y diseñadores de todos los niveles. Al igual que contamos, en el diseño web, con los anchor links, también existen otros tipos de links, que habitualmente usamos menos, como los links telefónicos. Al hacer clic o al pulsar sobre un anchor link, este te redirige hacia una nueva página. En el caso de los links telefónicos, te brindan la posibilidad de llamar a un número de teléfono, en el caso de que estés usando un dispositivo móvil. Estos links no son ninguna novedad, llevan existiendo desde hace bastante tiempo. Sin embargo, suelen causar confusión. Es decir, no todos los dispositivos móviles reconocen este tipo de links y no son capaces de marcar el número de teléfono designado.

Hemos llegado a un momento en el que la navegación óptima con dispositivos móviles se ha hecho indispensable. Los smartphones se han convertido en una herramienta fundamental para navegar por la red, al igual que los ordenadores y las tablets. Puesto que existe una gran fuente de tráfico en los dispositivos móviles y hay una gran cantidad de aplicaciones para llamar por teléfono (los enlaces teléfonicos no solo funcionan en el móvil, aunque es lo habitual, sino que también operan con esas aplicaciones que permiten realizar llamadas) merece la pena saber más sobre ellos.

Uso por defecto

Este es el uso por defecto de los links telefónicos, que la mayoría de los programadores hemos ido implementando desde 2011:

<a href="tel:968541001">968541001</a>

Esto también funciona con enlaces de texto:

<a href="tel:968541001">Haz clic para llamar</a>

tel: no es una característica, sino más bien un protocolo, como lo son por ejemplo http: o mailto:, que son protocolos también del tag a. La especificación en sí misma no tiene nada que aportar al respecto, aunque HTML5 proporcionó el soporte necesario para los controladores de protocolo personalizado, que permiten que dicho protocolo pueda utilizarse.

Probablemente te estés preguntando por qué tel: puede utilizarse por defecto en ausencia de una especificación oficial sobre el mismo. Esto puede ser debido a que fue un estándar propuesto ya en el año 2000 y posteriormente adoptado por iOS, que no hizo nada más que allanar el camino en la vida de este protocolo para que miles de desarrolladores lo pudiésemos usar. Hay otros protocolos para el uso del teléfono (que vamos a ver más adelante), pero nos centraremos en tel: dada su relativa importancia.

Soporte para navegadores

Como el protocolo tel: no cuenta con documentación oficial, es posible ver grandes diferencias en el soporte y comportamiento de los navegadores. Eso no quiere decir que los navegadores no reconozcan la etiqueta a con el protocolo tel:, ni mucho menos. Debido a esto, los navegadores toman decisiones diferente sobre qué hacer cuando se hace clic en un enlace de ese tipo. Por ejemplo, un navegador puede llamar a otra aplicación externa y pedirte permiso para abrirla en el mismo navegador. En el peor de los casos, el enlace puede ser incluso hasta ignorado.

Personalizando los enlaces telefónicos

Dar estilo a los enlaces teléfonicos es como dar estilo a cualquier enlace. De hecho, heredará el estilo por defecto de los anchor

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

Digamos que solo queremos dar estilo a los enlaces telefónicos. Podemos llevarlo a cabo con un pseudo-selector que busque el texto tel: en una determinada URL.

a[href^="tel:"] {
  color: orange;
  text-decoration: none;
}

Enlaces telefónicos alternativos

Lo creas o no, tel: no es la única manera de iniciar una conversación telefónica mediante un link. Aquí tienes otros cuantos protocolos basados en el teléfono que puedes utilizar a tu antojo si así lo deseas.

• callto: Es lo mismo que tel: pero se utiliza para iniciar llamadas vía Skype
• auto-detected: Muchos navegadores detectan automáticamente un número de teléfono en el HTML y son capaces de transformarlos en links por ti. iOS, por ejemplo, es uno de ellos, a diferencia de Chrome en Android.
• sms: Como podréis imaginar, este protocolo es para enviar mensajes de texto. Este protocolo cuenta con menos soporte en navegadores que el propio tel:
• fax: Igual que tel: pero para fax. Imaginaos el soporte que tiene esto...

Buenas prácticas

Es divertido hablar sobre buenas prácticas cuando se trata de algo sin especificaciones. Las especificaciones te pueden dar una pequeña idea sobre las llamadas a la acción del enlace, pero a falta de pan, como dice el refrán, buenas son tortas. Aquí puedes encontrar algunas cosas a tener en cuenta cuando trabajas con enlaces telefónicos.

Considera el contexto

Un enlace telefónico puede ser una llamada a la acción excelente, especialmente en teléfonos móviles donde se reduce la fricción entre el contenido y la llamada. Al mismo tiempo, los enlaces telefónicos podrían ser considerados como un obstáculo en la experiencia en ordenadores de escritorio, donde una llamada telefónica no sería posible si el dispositivo carece de una aplicación que lo soporte.

Lo mejor sería crear una clase específicamente para las comunicaciones telefónicas e intentar mostrarlos u ocultarlos en base a lo que sabemos sobre el navegador.

Utiliza el código del país

El código del país no es necesario, pero es un buen detalle en los sitios con tráfico internacional. Los códigos de país pueden ir precedidos por un +, pero tampoco es necesario.

<a href="tel:+34968541001">968541001</a>

Optimización para los motores de búsqueda

Los expertos de SEO te pueden aportar más información sobre esto que yo, pero Google ofrece un formato de datos estructurado para empresas locales y su uso hará que los enlaces telefónicos sean más reconocibles para los rastreadores, formateando las páginas de resultados de una manera que hace que el número mucho más procesable.

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1 itemprop="name">Empresa ficticia</h1>
  Tlfno: 
    <span itemprop="telephone">
      <a href="tel:+34968541001">
         968541001
      </a>
    </span>
</div>