El sitio web Grid es una breve guía de diseño adaptable. Y como no podía ser de otra forma, el propio sitio web posee un diseño adaptable.
Tag: adaptable
resimagecrop, solución para imágenes en diseño adaptativo
resimagecrop es una solución para proyectos RESS (Responsive Design with Server Side components). ¿Y qué es RESS? En Getting started with RESS nos lo explican.
Imágenes flexibles
El libro Responsive Web Design, aunque sea del año 2011, ya es un clásico del diseño web adaptable. Escrito por Ethan Marcotte, el diseñador que acuñó el término responsive web design en su artículo Responsive Web Design, recoge en sus 140 páginas (sí, es un libro pequeño), lo más importante de esta técnica.
El capítulo 3, Fluid Images, lo podemos consultar de forma gratuita en Internet.
La optimización de las imágenes
Este es un tema que se había olvidado por el considerable aumento de las velocidades de conexión a Internet durante la última década, pero es un tema que ha vuelto debido a los dispositivos móviles.
Hace muchos, muchos años, cuando nació la Web, la gente se conectaba a Internet con un módem telefónico. La velocidad normal era 33 kbps (kilobits por segundo) (a finales de los años 90 esta velocidad se logró aumentar a 56 kbps, lo cual se consideró un gran avance). Debido a ello, el empleo de imágenes en las páginas web suponía un verdadero problema (ralentizaban la carga de la página) y se desarrollaron diferentes técnicas para aumentar la velocidad de carga (aumentarla de verdad o por lo menos la sensación). Por ejemplo, se usaban las imágenes entrelazadas o progresivas, o la precarga de imágenes.
Todo eso parece que ha regresado, ya que hay que hacer sitios web optimizados para dispositivos móviles, donde el ancho de banda es limitado y, además, te pueden cobrar por cada bit descargado.
Curioso, ¿verdad?
Un par de artículos recientes sobre el tema:
Cómo utilizar JavaScript en sitios web con diseño adaptable
En el artículo Managing JavaScript on Responsive Websites explican cómo trabajar con JavaScript cuando se emplea un diseño web adaptable o adaptativo.
Por ejemplo, ¿qué pasa si tenemos un diseño web adaptable de una página web y en una resolución tenemos un carrusel de imágenes que van cambiando, mientras que en otra resolución las imágenes se muestran en forma de rejilla? Al pasar de una resolución a otra, es decir, de un diseño al otro, habrá que activar o detener el código JavaScript que gestiona el carrusel de imágenes.
¿La solución? La librería jRespond.
Vista de diseño adaptable en Mozilla Firefox
En Mozilla Firefox 16 (quizás ya estaba en la 15) podemos encontrar la herramienta “Vista de diseño adaptable”:
Y aquí una prueba con la web de la Universidad de Alicante, que no es adaptable:
Uno de los primeros artículos sobre diseño adaptable
El artículo Responsive Web Design, del 25 de mayo de 2010 y publicado en A List Apart es quizás uno de los primeros artículos que utilizó el termino responsive web design. Recordemos que en español se puede decir diseño adaptable o adaptativo, pero “diseño responsivo” queda fatal.
En este artículo podemos leer:
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. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.
La rejilla infinita, lo que viene después del diseño adaptativo
Muchos seguramente no saben qué es el diseño adaptable. Algunos ya lo están aprendiendo y otros ya lo están aplicando. Parece que es la solución definitiva, y sin embargo, no es así.
En el artículo The Infinite Grid nos presentan el siguiente paso, la rejilla infinita, un diseño basado en una rejilla que puede crecer, crecer y crecer, hasta el infinito.
Bufff, todavía lo estoy intentando asimilar… voy por la mitad del camino hacia el infinito.
Todo lo que querías saber sobre responsive design
O mejor dicho, sobre diseño adaptable. Eso es lo que podemos encontrar en el fantástico sitio web This Is Responsive. A destacar el apartado con patrones de diseño Responsive Patterns, en el que podemos encontrar diseños con diferente número de columnas, y cómo hacer que tablas, listas, formularios, imágenes, etc. sean adaptables.
El problema de las imágenes en los diseños adaptables
En el artículo El problema de las imágenes responsive en la web y la primera propuesta del W3C para arreglarlo nos explican el problema que tienen las imágenes en los diseños adaptables:
- mediante CSS, puedo decir que las imágenes no tengan un tamaño fijo sino que tengan un 100% del espacio en el que están contenidas y con un máximo de anchura para que no se pixele en pantallas grandes. Así, se adaptan al espacio disponible, pero en realidad estoy cargando siempre la misma imagen (con todo su peso) y adaptándola visualmente mediante hojas de estilos. No mola. En realidad, el mayor problema de esta solución es que se carga la misma imagen en todos los dispositivos.
- existen otras opciones, plugins y librerías creadas para intentar solucionar este problema. Por ejemplo, el proyecto Adaptive Images es un script combinado con unas líneas en el fichero
.htaccessque redimensiona realmente las imágenes, las cachea en el servidor y las muestra de acuerdo al tamaño de la pantalla del usuario. Mola, pero tampoco mucho: hay que tocar el sistema de ficheros del servidor, utilizar las cookies del navegador, las imágenes dejan de ser un contenido puramente estático…
En el artículo se ofrecen varias soluciones, basadas en el empleo de JavaScript, pero lo más interesante es que nos anuncia que el W3C está trabajando en el desarrollo de una solución: HTML Responsive Images Extension. Parece que es la primera versión de este documento, y está fechado 3 de septiembre de 2012.