La trampa del diseño “responsive”

Como siempre, esto empieza porque alguien cercano a la par que incauto me enseña un proyecto. En este caso una landing page montada rápidamente con un template para un trabajo de fin de carrera. Un template con todos los extras “requeridos”. Incluyendo la adaptación del diseño al ancho del dispositivo. Lo que se llama “responsive design”. Es decir, que el diseño responde al contexto en que se muestra y se adapta al mismo.

Con lo cotillo que soy me he puesto a ver las interioridades y el comportamiento general y, dado que en la landing page “venden” el acceso desde el móvil le pido amáblemente al generalmente servicial Canary que emule distintos modelos para ver cómo se ve en un Nexus, en un Galaxy…

En pocos casos el diseño se adapta, en otros lo intenta y en otros ni se molesta. Pero hay una constante, independientemente del modelo: la página hace 79 peticiones al servidor (scripts, imágenes, etc) para un total de 1.8MB.

Repito que es un trabajo de fin de carrera y no se pondrá en producción. Pero hay muchas páginas que utilizan la excusa del diseño “responsive” para no hacer una versión específica para dispositivos móviles.

Esa versión no implica sólo adaptar el diseño, sino eliminar mucha de la “morralla” que hace falta para un navegador standard: shims para emular funcionalidades presentes en los navegadores modernos, slideshows o animaciones que ni siquiera se muestran en el escritorio cuando el ancho es menor de un determinado valor…

Es importante reducir al máximo lo que se envía al dispositivo, hacer el menor número de peticiones posibles… Lo que antes se llamaba optimizar y que se perdió, en el mundo web, con las líneas de alta velocidad.

Otro punto importante, que siempre se olvida, es que en un móvil no es obligatorio por decreto ley utilizar una web de la misma manera. Es que, incluso, no es preciso replicar el 100% de la funcionalidad. Sobre este tema intentaré rescatar un algo que escribí cuando hice la versión para iPhone de un proyecto personal.