Advertisement
  1. Web Design
  2. CSS

Consejo Rápido: Consigue que los Números de Teléfono Hagan Algo

by
Read Time:2 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

No voy a comenzar este consejo rápido con el viejo discurso de "hoy en día la gente ve tu sitio web en múltiples dispositivos", pero lo cierto es que es así. Muchos dispositivos móviles consiguen reconocer los números de teléfono en tu HTML, haciéndolos clicables de forma que puedas directamente pulsarlos para llamar al número - pero no siempre es así.

¿Qué ocurre si el móvil de un usuario no reconoce el número de teléfono como clicable? Quizá, por ejemplo, la forma en la que has introducido el número no es reconocible por la plataforma. ¡Una oportunidad perdida!

(Écha un vistazo a la lista de Mark Hammond sobre los patrones que son reconocidos por iOS y Android.)

Haz Esos Números Clicables

Esto es sencillo: encierra el número de teléfono en anclas, pero en lugar de usar el protocolo http* (o lo que sea que normalmente coloques en un ancla) usa tel: o tel://. De esta forma, incluso aunque hayas usado un patrón no reconocido, el dispositivo sabrá que hacer con él:

Los navegadores que no soportan esta característica (en tu ordenador de sobremesa por ejemplo) no saben que hacer con el protocolo tel: todavía - a menos que el usuario tenga algún tipo de extensión habilitada que permita a Skype reconocer los números de teléfono. Google Chrome ignorará tranquilamente el clic, pero de momento otros importantes navegadores empezarán a llorar. Otros dispositivos que no sean teléfonos (como el iPad) reconocerán el número, animando al usuario a añadir el contacto a su libreta de direcciones - este sería un enfoque acertado para los navegadores de sobremesa.

Aplicar Estilo a los Enlaces de Teléfono

Como extra opcional, hagamos que el usuario reconozca con mayor facilidad que lo que está viendo es un enlace de teléfono aplicándole estilo a cada uno. Usaremos un selector de valor de atributo para esto, dirigiéndonos solo al pseudo elemento :before de los enlaces que contengan la cadena tel: dentro de su atributo href:

El pequeño caracter ^ de aquí denota que está buscando cualquier elemento cuyo atributo href comience con la cadena especificada. tel: y tel:// estarán pues incluidos. Hemos introducido un pequeño teléfono mediante unicode \260E;, así que ni siquiera necesitamos usar un icono de fuente web. Genial.

Bonito color, ¿eh? color: tomato lo creas o no.

Ya hemos acabado con esto, en nombre de la accesibilidad, ¡concédele una oportunidad!

Recursos para Seguir Leyendo

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.