Diseño responsive
Armar una sola página web que se reacomoda sola para entrar en cualquier pantalla.
El diseño responsive (o diseño web adaptable) es la práctica de hacer un único sitio que se adapta a la pantalla en la que se muestra. En un monitor ancho, un diario online puede mostrar tres columnas lado a lado; en una tablet, dos; en el celular, una sola columna larga que scrolleás con el pulgar, con letra más grande y el menú escondido detrás de un ícono. Misma dirección, mismo contenido, distinta disposición.
Funciona sobre todo con CSS. Los diseños se arman con anchos flexibles (porcentajes en vez de píxeles fijos), imágenes que se achican con su contenedor y media queries: reglas del tipo "si la pantalla mide menos de 600 píxeles de ancho, apilá estas cajas". Herramientas modernas como Flexbox y Grid lo hacen mucho más fácil que antes. Muchos equipos diseñan mobile-first: empiezan por la versión del celular y van sumando columnas a medida que aparece espacio.
El término lo acuñó Ethan Marcotte en 2010, justo cuando despegaban los smartphones. Antes, las empresas solían armar un sitio móvil aparte, con "m." adelante. Hoy más de la mitad del tráfico web viene de celulares y los buscadores ordenan las páginas en parte según qué tan bien andan en el teléfono, así que el diseño responsive es directamente lo normal.
Para quedarse
- Un sitio, una URL, un diseño que se adapta al ancho de cada pantalla.
- Se arma con grillas flexibles, imágenes que escalan y media queries de CSS.
- Mobile-first es diseñar primero la pantalla chica y crecer desde ahí.
- Reemplazó la vieja costumbre de tener un sitio móvil separado.
Para seguir leyendo
- Diseño responsivo (MDN)
- Responsive Web Design, de Ethan Marcotte (A List Apart, en inglés)
- Diseño web adaptable en Wikipedia
