Ethan Marcotte acuñó el término Responsive Web Design hace ya casi cuatro años en un artículo publicado en A List Apart que giraba entorno a la correcta implementación en los CSS de los `media queries´con el objetivo de conseguir un diseño en rejilla fluido, en el que dependiendo del tamaño de la pantalla los elementos se redistribuyen o incluso desaparecen para mayor comodidad del usuario:
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking.
El problema es que no basta con que una web se vea bien en un móvil, por poner un ejemplo `Twenty Fourteen´ el último tema con el que se publicó la última versión de WordPress, se ve de maravilla en un dispositivo móvil:
Como se puede ver en la imagen, en un dispositivo de 320x480pixels las imágenes reducen sus dimensiones (`flexible images´ como decía Ethan Marcotte), pero el problema es que la imagen sigue siendo la misma 672×372 pixels y lo que es peor sigue pesando lo mismo que antes. Cuando hablamos de una imagen individual no pasa nada, pero mirar todas las imágenes que se cargan desde un dispositivo móvil por el mero hecho de aterrizar en un blog con este tema:
Utilizando PingDom podemos saber cuanto pesa en total la página: 3.7 Mb:
Dejarme que lo ponga en contexto para los que somos un poco antiguos como yo… hace no mucho, habrías necesitado tres floppys de 1,4Mb para poderle pasar a un amigo sólo la Home de tu blog:
En mi child theme estilo Boing Boing, he estado haciendo algunas adaptaciones en la imagen de cabecera de los posts para predicar con el ejemplo:
Además de servir las imágenes a través del CDN de CloudFront, la imagen va disminuyendo de tamaño y peso: 1600×550, 1024×550, 604×340, 302×170. Con WordPress es sencillo hacer todas estas cosas, si bien tiene su truco y yo todavía no lo tengo del todo dominado.
Para empezar en el momento en que referencias una imagen en el HTML de tu web esa imagen aunque luego la ocultes a través de CSS se va a cargar. Si queremos evitarlo las tenemos que referenciar en los propios CSS y ponerlas como backgroud de otros elementos… el problema es que los CSS se supone que son algo estático, mientras que las imágenes que utilizamos en la cabecera van cambiando: cada entrada tiene su imagen destacada y no podemos referenciarlas todas en los CSS, por lo que nos vemos obligados a intercalar estilos de la capa presentación donde no debería haberlos.
Por otra parte incrustar las imágenes como background provoca que los plugins más populares en WordPress del tipo `lazy-load´ ignoren este tipo imágenes. En esta parte es donde me he atrancado especialmente.
En definitiva, que seguiremos trasteando hasta alcanzar un punto de equilibrio razonable.
Comentarios
2 respuestas a «Si tus imágenes no son Responsive, tu web no es Responsive»
Muy bueno
Me parece un análisis excelente.