Hace no demasiado hablaba en este blog del diseño responsivo como una de las tendencias relevantes de diseño web del 2012. El tema tiene mucha miga, así que hoy vamos a analizar más detenidamente qué es esto del diseño responsivo y cuáles son sus cualidades reales.
El diseño responsivo se basa en una serie de técnicas de diseño y programación que permiten a un interfaz adaptar su forma y tamaño a diversas resoluciones de pantalla automáticamente. Toda una bicoca en estos tiempos de proliferación de dispositivos móviles: Ipads, teléfonos varios, etc. Hay indicios de que el tráfico móvil de datos se multiplicará por 18 hasta 2016.
Un ejemplo de diseño responsivo como este puede dar la medida exacta de a qué me refiero:
Si al ver el enlace de ejemplo que propongo se modifica el tamaño de ventana del navegador se aprecia la magia del diseño responsivo en toda su grandeza: la estructura de la página se modifica, se re escalan las imágenes y se adapta el contenido. ¿Demasiado bonito para ser cierto? Veamos…
Hasta aquí todo han sido buenas noticias, maravillosas. Pero antes de lanzarnos sobre nuestros clientes voceando la panacea del siglo XXI analicemos un poco el lado oscuro de esta solución milagrosa:
Primer escollo. Las imágenes de tu website se re escalan, efectivamente, pero hacen esto desde el máximo tamaño reflejado en el interfaz. Por tanto estás penalizando al usuario de teléfono móvil con imágenes mayores de lo que se necesita y aumentando los tiempos de descarga. No olvidemos que Google penaliza las páginas lentas y pude hundir el ranking de tu website a las catacumbas de sus resultados de búsqueda.
El re escalado de imágenes no es gratuito. Si no lo hace el diseñador será el propio navegador del dispositivo el que tendrá que hacerlo, y al aparecer los dispositivos son más tontos que los diseñadores y el re escalado de imágenes les cuesta, resultado: CPUs estresadas y con problemas de fluidez.
Al parecer la propia Apple habla de esto es su documentación técnica para la versión móvil de Safari: “Dale el tamaño adecuado a las imágenes. No confíes en el escalado que hace el navegador”
Si ante lo visto en este post se te ha ocurrido la idea de llamar a diferentes tamaños de imágenes mediante el uso de CSS tan sólo decirte que por lo visto no funciona y da problemas. No profundizaré en este sentido para ahorrarnos 20 párrafos de tecnicismos en klingon. Dejemos que Google haga su trabajo a partir de aquí.
Más allá de que el diseño responsivo sea o no la solución a la hora de presentar un site sobre diversos dispositivos, pensemos: ¿Cuándo un usuario se acerca mi web desde un teléfono móvil tiene las mismas necesidades y actitud que cuando se acerca desde la comodidad de su ordenador (o televisor)? Puede que no, puede que un mismo website deba ser radicalmente diferente desde su concepción en base a los dispositivos o tipos de uso que los usuarios requieren en cada situación. En caso contrario podría ser que el diseño responsivo resulte ser una solución, tal vez de contingencia, mientras realizan versiones más específicas de un website.
