Pese a ser perfectamente conocido por los diseñadores web, el concepto “responsive (web) design” no ha trascendido al gran público. No obstante, muchos de nosotros hemos hecho referencia a este concepto. La gente suele hablar de él en estos términos: “que mi web se vea bien en el iPhone”.

En castellano podría traducirse como “diseño sensible”, pero este término no ha tenido mucho éxito. Así pues, continuaré utilizando el original en inglés.

Cuando aprendí a diseñar páginas web, por allá a finales del 2008, los principios que me enseñaron fueron los siguientes: una página web consiste en una tabla con un ancho fijo, centrada en el lienzo, y compuesta por filas y columnas por donde se va distribuyendo el texto, los hipervínculos y las imágenes que conforman el contenido.

Hasta entonces, los ordenadores de mesa habían sido la plataforma a través de la cual la gente mayoritariamente navegaba por Internet. No obstante, con la creciente popularización de los móviles con acceso a Internet, se observó que, a través de estos dispositivos de pequeño tamaño, las páginas web quedaban deformadas o cortadas, resultando muy poco agradable desplazarse por ellas.

La respuesta lógica por parte de los diseñadores fue la de crear diferentes versiones del mismo sitio web. Sin embargo, esta opción empezó a ser poco práctica cuando, además de los móviles, fue posible navegar por Internet a través de pequeños ordenadores portátiles, tabletas, etc., con resoluciones diferentes en función de la marca. No era viable crear un diseño para cada uno de los dispositivos.

Es en este punto cuando, en mayo de 2010, el diseñador de páginas web Ethan Marcotte publicó un artículo, titulado “Responsive Web Design”. En su artículo, Marcotte hacía referencia a la aparición de una nueva disciplina dentro de la arquitectura, llamada “responsive architecture”. El principio de esta disciplina era el diseño de espacios físicos adaptables a contextos cambiantes. Ejemplos de arquitectura sensible son paredes que se pueden desplazar, climatizadores que se adaptan a la temperatura ambiente, cristales que se vuelven opacos con la exposición directa de la luz solar, etc.

Lo que Marcotte hizo fue tomar este concepto y aplicarlo al diseño de páginas web.

*Ethan Marcotte, “Responsive Web Design”, A List Apart (25 de mayo de 2010)

¿En qué consiste el responsive web design?

El resposive web design supone la substitución de la tabla fija por una cuadrícula fluida (fluid grid), un diseño flexible y adaptable al contexto. El responsive web design no se basa en medidas concretas, sino en proporciones que permiten que el diseño se modifique en función de las dimensiones del dispositivo a través del cual estamos viendo la página web. De este modo, los elementos de una página “fluyen” de manera dinámica para adaptarse al observador.

Se trata, en definitiva, de un verdadero cambio de paradigma, como el paso de la física newtoniana a la física cuántica.

*Google Trends registra la primera búsqueda de las palabras “responsive design” a finales de abril de 2011. A partir de entonces, el número de búsquedas ha ido en aumento.

La adaptabilidad que proporciona el responsive design atañe a todos los elementos de la página web: imágenes, texto, columnas, menús, etc. Y la adaptación puede conllevar desde el cambio de tamaño o de posición hasta la completa desaparición de algunas secciones.

Aquí os muestro un ejemplo de sitio web con responsive design visto a través de diferentes resoluciones.

*Podéis ver más ejemplos en mediaqueri.es
*Si queréis comprobar cómo se ve vuestro sitio web en diferentes dispositivos, os recomiendo visitar quirktools.com. Sólo tenéis que escribir vuestra URL y seleccionar el dispositivo.

Más allá de las técnicas concretas sobre las que se fundamenta, el resposive design tiene una implicación fundamental que sería bueno no pasar por alto. Se trata del concepto de cambio.

El objetivo último del responsive design es mantener la unidad de concepto modificando el diseño en función del contexto. En otras palabras, modificar los detalles para así conservar la identidad.

Una de las batallas constantes que tienen los diseñadores de todo tipo con sus clientes es la necesidad de cambiar el diseño de logos, textos, imágenes, presentaciones, sitios web, etc., en función del contexto. El cliente mantendrá que su logo, su tipo de fuente, su lo-que-sea corporativo es uno en concreto y, por lo tanto, deberá conservarse igual en todos los lugares en los que aparezca.

Lo que el cliente no comprende es que al mantener el mismo diseño en contextos diferentes, éste adquiere un aspecto diferente y, en general, a peor. Es preferible, pues, modificarlo de manera que, pese a no tener la elegancia o sofisticación del modelo original, parezca igualmente bueno.

En pintura, este principio es bien conocido. Por poner un ejemplo, observemos el siguiente cuadro.

*Edouard Leon Cortes, “Place de la Madeleine” (Rehs Galleries)

Como puede apreciarse, con unos pocos trazos irregulares, el pintor representa las hojas de los árboles. No ha sido necesario dibujar con todo detalle cada una de las hojas para que el aspecto sea similar a la realidad. De igual forma se han pintado las luces, ventanas, o los reflejos en el suelo mojado.

En lo que referente a páginas web, un buen responsive design deberá saber mantener aquellos elementos que permitan identificar la personalidad de la entidad o empresa a la que pertenece el sitio web, destacar los elementos que permiten acceder a las diferentes secciones y eliminar todo aquello que sea superfluo.

Como dice Daniel H. Pink, “hoy en día, todos debemos ser diseñadores”. Evidentemente, el objetivo no es convertirnos todos en diseñadores web. A través de este artículo he querido mostrar cómo algo que parece tan extraño a los no iniciados como el diseño de páginas web, en el fondo se basa en principios básicos aplicables a todos los ámbitos.

Es importante comprender que lo que entonces era el cliente ahora es el usuario. Y el usuario busca experiencias además de servicios o productos. Es en este punto donde el diseño es esencial. El diseño puede marcar la diferencia. El diseño es, de hecho, la diferencia. Seamos, pues, diseñadores.