Responsive Web Design: la web hecha poesía

Ignacio G.R. Gavilán    11 diciembre, 2013

Escribía el poeta asturiano Ramón de Campoamor allá por el siglo XIX su célebre verso:

En este mundo traidor

Nada es verdad ni mentira

Todo es según el color

Del cristal con que se mira

Se trata de la expresión bella, aunque pesimista, de un cierto relativismo moral, de la mutabilidad de valores y elecciones.

Han pasado muchos años desde entonces y la frase del poeta sigue plenamente vigente y goza de merecida popularidad.

Pero hagamos un quiebro, un salto mortal, y contemplemos esos versos en el mundo de la tecnología actual, en un mundo dominado por lo digital, por lo móvil y por la ubicuidad de la información en la web.

La Web nació pensando en el entorno de escritorio, workstation o desktop PC. No le costó adaptarse a los portátiles porque, al fin y al cabo, la propia naturaleza de HTML, un lenguaje declarativo e independiente de dispositivo, proporcionaba unas bases convenientes para ello; y los navegadores, aunque siempre con pequeñas particularidades, también permitían una experiencia adecuada y uniforme, independientemente de dispositivos, hardware y sistemas operativos.

Pero la cosa cambia con la irrupción de las tabletas y, sobre todo, los smartphones. Y cambia no tanto por el dispositivo en sí. Al fin y al cabo, el lenguaje HTML o su sucesor el HTML5 siguen siendo básicamente independientes de dispositivo y los navegadores también.

El problema es el propio diseño de la pantalla, el layout. Aunque HTML y navegadores ofrezcan capacidades de adaptación, cuando el cambio de tamaño o resolución es radical pierden su aplicabilidad recursos como los scroll bars o el cambio de tamaño de elementos. Es necesario rediseñar radicalmente la pantalla que ve el usuario, adaptarla a un tamaño mucho más pequeño, a un entorno menos cómodo.

Pero si hacer ese rediseño fuese una tarea dispositivo a dispositivo, tamaño a tamaño, todas las ventajas de independencia de dispositivo, toda la maravillosa ubicuidad de la web se verían seriamente comprometidas. Se perdería la escalabilidad, la adaptabilidad y la agilidad de despliegue.

Y ahí es donde entra en juego Responsive Web Design (Diseño web adaptativo). Se trata de un concepto acuñado por Ethan Marcotte en un artículo en ‘A list apart’ publicado en mayo de 2010, no es una nueva tecnología propiamente dicha, sino el uso de una serie de pequeñas técnicas en el entorno de HTML, CSS y Javascript para conseguir, con un esfuerzo de desarrollo muy moderado, que la misma web se adapte en tiempo real al dispositivo desde el que se accede, cambiando el layout de la pantalla, es decir, el número, disposición y tamaño de los elementos en ella presentados.

Existen varias tendencias y modelos como pueden ser el goldilocks o el fluid pero, sin entrar en muchos detalles ni en todas las opciones, una de las formas en que podría funcionar sería básicamente la siguiente: se utilizan las conocidas como CSS Media Queries, un módulo de CSS3 (estándar recomendado por W3C desde 2012) que permiten hacer consultas sobre resolución, tamaño o características del dispositivo, combinarlas en condiciones booleanas y, en función del resultado, elegir una CSS o un conjunto de reglas de estilo adecuados. A partir de ahí es diseño web estándar, eso sí, sabiendo ya para qué características de dispositivo se diseña.

Hay varias opciones y técnicas pero en conjunto todas son capaces de detectar de alguna forma el dispositivo (o más bien, su tamaño y resolución) y actuar en consecuencia.

Es cierto que hacer una web responsive implica más trabajo que construir una estándar, pero también es cierto que se trata de un esfuerzo comparativamente bajo ya que con las media queries no se busca conocer dispositivos específicos sino grandes rangos de dispositivo o, más bien, de pantallas. Y lo cierto es que la capacidad de adaptar el layout al dispositivo, de conseguir una magnífica experiencia en cualquier forma de acceso, compensa ese esfuerzo adicional.

Ramón de Campoamor tachaba al mundo de traidor, y contemplaba el relativismo desde un punto de vista más bien pesimista. Sin embargo, en el mundo digital, las opciones, la adaptabilidad, el relativismo en cierto sentido, no son defecto sino virtud, no constituyen un mundo de traiciones sino de oportunidades.

Y así, Responsive Web Design nos ayuda a reescribir la famosa poesía:

En este mundo móvil y digital

La web se encoge y se estira

Todo es según el tamaño del cristal

Del dispositivo con que se mira

Imagen: IntelFreePress

Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *