El diseño web adaptativo o responsive web design no es más ni menos que la recuperación de una vieja técnica del diseño web de la época en que había múltiples resoluciones de pantalla y se buscaba que las páginas encajaran perfectamente en cada una de ellas. Esto eso, hacer un diseño elástico o fluido donde el contenido se adapte al contienente.
Hoy, con la presencia de computadoras de escritorio, tablets y teléfonos inteligente este tipo de diseño ha resurgido. Pero, ¿cómo saber exactamente qué es un sitio web adaptativo? ¿Qué características tiene? Esta infografía nos muestra algunos datos muy interesantes para tener en cuenta.
En primer lugar, lo que he repetido varias veces en el blog: mientras sigan creciendo los accesos desde tablets y teléfonos no tiene sentido seguir haciendo una web que solo se puede ver bien en una computadora de escritorio.
En segundo término, se identifican los componente de un sitio web adaptativo o responsivo: grillas fluidas que se acomodan de acuerdo a la pantalla, imágenes flexibles para ajustarle múltiples tamaños y media query para detectar en qué pantalla se muestra el sitio web.
A continuación, se describen las diferente secciones de un sitio web como el encabezado, la galería de imágenes, la descripción del producto, la información adicional y el pie de página para analizar qué características tiene cada uno de estos elementos de acuerdo al dispositivo donde se reproduzca el sitio web. Todo explicado de manera visual y atractiva en el siguiente gráfico.
Vía Mashable