Diseño responsive
Una forma de diseñar webs para que una misma página se adapte a cualquier tamaño de pantalla, en lugar de hacer una versión para cada aparato.
Qué problema aborda
Hay demasiados tamaños de pantalla para diseñar una versión para cada uno.
Un ejemplo
Un mismo artículo, abierto en el teléfono.
Es el mismo contenido. Lo que cambia es que la página se reorganiza según el espacio que tiene.
Por qué pasa
La rejilla usa proporciones, no medidas fijas, y se estira o se encoge.
Las imágenes se ajustan al ancho disponible.
Las consultas de medios cambian la composición cuando la pantalla es más estrecha.
Aplicaciones en diseño
Úsalo así
Diseña primero la versión más estrecha y añade a medida que hay espacio.
Evita
Esconder contenido en el teléfono porque «no cabe»: quien lo usa desde el teléfono también lo necesita.
Para no caer
Prueba en teléfonos reales, no solo estrechando la ventana del navegador.
Lo que dice la investigación
3 ingredientes definen el diseño responsive: rejillas fluidas, imágenes flexibles y consultas de medios (media queries) en CSS (Marcotte, 2010).
Evidencia sólida. Wroblewski (2011) propuso además empezar por el teléfono: diseñar primero para la pantalla más pequeña obliga a decidir qué es lo esencial.
Autores y obras
Ethan Marcotte (2010)
Dio nombre al diseño responsive y describió sus tres ingredientes.
Luke Wroblewski (2011)
Propuso diseñar primero para el teléfono.
Conexiones
Se usa en
Fuentes
Fuentes originales
- Marcotte, E. (2010, 25 de mayo). Responsive web design. A List Apart. Ver fuente: Marcotte, E. (2010, 25 de mayo)
- Wroblewski, L. (2011). Mobile first. A Book Apart.
Última revisión: