El diseño web responsive (o diseño adaptable) es una forma de construir sitios web en la que una misma página adapta su maquetación a la pantalla en la que se ve, desde un móvil pequeño hasta un monitor ancho. En lugar de tener una web móvil y otra de escritorio, una web responsive usa maquetaciones flexibles, imágenes flexibles y media queries de CSS para reorganizar el mismo contenido según el tamaño de pantalla. Hoy es la forma estándar de hacer webs y el enfoque que recomienda Google.
De dónde viene el diseño web responsive
El término lo acuñó el diseñador Ethan Marcotte en un artículo titulado «Responsive Web Design», publicado en A List Apart en mayo de 2010. El iPhone tenía entonces tres años y muchas empresas mantenían una web móvil aparte, a menudo en un subdominio «m.», junto a su web principal. Marcotte propuso una sola web que responde al dispositivo, basada en tres ingredientes:
- Una rejilla fluida: anchos en unidades relativas (porcentajes) en vez de píxeles fijos.
- Imágenes flexibles: imágenes que se escalan dentro de su contenedor.
- Media queries: reglas CSS que solo se aplican cuando la pantalla cumple una condición, como un ancho mínimo.
Esas tres ideas siguen describiendo cómo funciona una web responsive, aunque las herramientas de CSS han mejorado mucho desde entonces.
Los principios básicos
El contenido se reorganiza, no desaparece
Una página responsive muestra el mismo contenido en todos los dispositivos, colocado de otra forma. Tres columnas en escritorio pasan a ser una sola en el móvil, el menú horizontal se convierte en un botón y una tabla grande se desplaza dentro de su propio bloque. Ocultar contenido importante en móvil es un error habitual, sobre todo porque Google indexa la versión móvil de las páginas.
La maquetación es fluida entre breakpoints
La maquetación se estira y se encoge con la pantalla, y solo cambia de estructura en unos pocos anchos llamados breakpoints o puntos de corte. Elegirlos bien es un tema aparte: consulta los breakpoints responsive.
Mobile first
La mayoría de webs responsive se hacen hoy con el enfoque mobile first: el CSS base es la versión móvil y las media queries añaden complejidad para pantallas más grandes. Suele dar un CSS más sencillo y páginas móviles más rápidas. Más detalles en diseño mobile first.
El tacto y la densidad de pantalla también son responsive
El diseño responsive no va solo de ancho. El móvil se usa con los dedos, tiene pantallas de alta densidad y pasa de vertical a horizontal. Una web responsive tiene zonas táctiles lo bastante grandes para el pulgar, imágenes nítidas en pantallas de alta densidad y maquetaciones que aguantan la rotación.
Diseño responsive vs diseño adaptativo
| Diseño responsive | Diseño adaptativo | |
|---|---|---|
| Maquetación | Una maquetación fluida que cambia en los breakpoints | Varias maquetaciones fijas, una por tipo de dispositivo |
| Entre tamaños | Se estira de forma continua | Salta a la maquetación fija más cercana |
| Detección del dispositivo | No hace falta; el CSS reacciona al viewport | A menudo por el user agent en el servidor |
| Mantenimiento | Un solo código | Varias plantillas que mantener sincronizadas |
| Uso actual | Casi todas las webs | Algunas webs y apps grandes con necesidades móviles muy distintas |
En español, «diseño adaptable» o «adaptativo» se usa a menudo como sinónimo de responsive. La diferencia útil es de fondo: maquetación fluida o fija, adaptación con CSS o en el servidor.
Cómo se hace el diseño responsive hoy
El CSS moderno hace el responsive mucho más fácil que en 2010:
- La etiqueta meta viewport indica al navegador móvil que use el ancho del dispositivo. Sin ella no funciona nada más. Consulta la etiqueta meta viewport.
- Flexbox y CSS Grid crean maquetaciones que se reparten solas.
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))genera una rejilla de tarjetas que pasa de una a cuatro columnas sin una sola media query. - Las media queries cambian la maquetación en los anchos elegidos y además responden a la orientación, el modo oscuro, la reducción de movimiento y el tipo de entrada. Sintaxis y ejemplos: guía de media queries CSS.
- Las container queries permiten que un componente responda al ancho de su contenedor en vez de al de la pantalla, así una tarjeta se ve bien en una barra lateral y en la columna principal.
- La tipografía fluida con
clamp()escala los títulos de forma continua con la pantalla. - Las imágenes responsive con
srcsetysizesdejan que el navegador descargue un archivo del tamaño adecuado para la pantalla.
Frameworks como Tailwind CSS y Bootstrap empaquetan estas técnicas con breakpoints predefinidos.
Ejemplos de patrones responsive
- Column drop: las columnas se apilan una a una a medida que la pantalla se estrecha.
- Menú off-canvas: en pantallas pequeñas, el menú entra desde un lateral al pulsar un botón.
- Contenido prioritario: en móvil, la acción principal (buscar, «Reservar») sube arriba.
- Tablas responsive: la tabla se desplaza en horizontal dentro de su contenedor o cada fila se convierte en una tarjeta.
- Dirección de arte: un recorte distinto de la imagen en móvil con el elemento
<picture>.
Cómo probar una web responsive
Prueba varios anchos, no solo «móvil» y «escritorio». Arrastra el viewport responsive de Chrome DevTools para ver dónde se rompe la maquetación y después revisa dispositivos concretos con su user agent real y su densidad de píxeles. Aquí viene bien una vista móvil con un clic como Mobile View Extension, que muestra la misma página en modelos de dispositivos sin abrir DevTools. Termina en teléfonos reales. El método completo está en cómo hacer un test responsive.
Preguntas frecuentes
¿Cuál es el objetivo principal del diseño responsive?
Que cada visitante tenga una página legible y usable, con el mismo contenido, sea cual sea el tamaño de su pantalla, a partir de un solo código.
¿Responsive es lo mismo que mobile friendly?
El diseño responsive es una forma de que una web sea apta para móviles, y la más habitual. Pero una web puede ser responsive y aun así resultar incómoda en el móvil, por ejemplo si los botones son demasiado pequeños o si carga despacio. Consulta cómo hacer una página web responsive.
¿Quién inventó el diseño web responsive?
Ethan Marcotte presentó el término y el enfoque en 2010, en un artículo de A List Apart.