A través de los media queries de CSS3, podemos lograr que los elementos de nuestro sitio web tengan un aspecto visual particular en función del dispositivo del usuario. La estructura de la página seguirá siendo la misma, pero se mostrará diferente dependiendo de si el usuario nos visita desde una computadora, desde un televisor o desde un dispositivo para no videntes, entre muchas otras posibilidades. Pero ¿qué podemos hacer si lo que necesitamos adaptar no es el aspecto visual de la página sino su markup, es decir, su estructura interna definida en HTML?

Para lograrlo podemos utilizar Intention.js, una herramienta que permite manipular los atributos y la ubicación de los elementos del DOM para adaptar el código fuente de nuestra página a diferentes dispositivos. En lugar de utilizar una plantilla diferente para cada dispositivo, utilizamos una sola, cuya estructura se transforma según el caso. Así, se ahorra tiempo y se evita la repetición de código.

En total, son tres las características de los elementos HTML que podemos manipular gracias a Intention.js. Conozcámoslas a través de ejemplos:

• Atributos. Podemos manipular un elemento <img> para que muestre una imagen u otra dependiendo del dispositivo, alterando su atributo src.
• Clases. Un menú puede tener, alternativamente, la clase escritorio, la clase tablet o la clase smartphone, y mostrarse de formas completamente diferentes en esos tres entornos. Este método es menos trabajoso que asignarle al menú una clase única y sobrescribir sus estilos para cada caso a través de media queries.
• Ubicación. Podemos querer que un banner de publicidad ubicado al tope de nuestra página pase a estar debajo de todo cuando entramos desde un smartphone. Este desplazamiento es imposible de lograr con CSS, pero resulta sencillo a través de Intention.js.

Pero ¿cómo detectar las características del dispositivo del usuario y modificar la página en consecuencia? Variables como el ancho de la pantalla, su resolución y su orientación (vertical u horizontal) constituyen los llamados contextos. Intention.js viene con una serie de contextos preestablecidos que podemos importar desde un archivo adicional, pero también nos permite definir nuestros propios contextos, pudiendo utilizar, por ejemplo, los breakpoints más adecuados a nuestro caso particular. Por eso, es una solución altamente personalizable.

Enlaces externos

• Intention.js (sitio oficial)