≡En resumen
- Una web responsive usa un solo HTML y una sola URL; es el CSS el que decide cómo se colocan los elementos según el ancho disponible.
- Sus tres ingredientes, definidos por Ethan Marcotte en 2010, son la rejilla fluida, las imágenes flexibles y las media queries.
- Sin la etiqueta meta viewport, el móvil muestra la versión de escritorio en miniatura aunque el CSS sea responsive.
- El CSS moderno (flexbox, grid, clamp y container queries) permite diseños fluidos con muchos menos breakpoints que en 2010.
- Google recomienda el diseño responsive y, desde julio de 2024, indexa todas las webs con su rastreador para smartphone.
01 ¿Qué es el diseño responsive?
El término lo acuñó el diseñador Ethan Marcotte, primero en una charla en abril de 2010 y después en el artículo «Responsive Web Design», publicado en A List Apart el 25 de mayo de ese año. Tomó la idea de la arquitectura «responsiva», que reacciona a quien la ocupa, y la aplicó a la web: en vez de diseñar para anchos concretos, diseñar para que la página responda al espacio disponible.
Se confunde a menudo con el diseño adaptativo, que prepara varias maquetas cerradas y elige una. El responsive no elige entre versiones: recoloca siempre el mismo diseño.
02 Los tres pilares del diseño responsive
Rejilla fluida
Las columnas se miden en proporciones (porcentajes, fr de CSS Grid o flexbox) en lugar de píxeles fijos, así que se estiran y encogen con la ventana.
Imágenes flexibles
Con max-width: 100% una imagen nunca desborda su contenedor. Con srcset y sizes el navegador descarga el tamaño adecuado para cada pantalla.
Media queries
Reglas de CSS que se aplican solo a partir de cierto ancho, orientación o preferencia del usuario, para cambiar la disposición en los puntos de ruptura.
03 Cómo hacer una web responsive paso a paso
-
1
Añade la meta viewport
Es la primera línea que revisar en cualquier web que se ve diminuta en el móvil.
-
2
Empieza por el móvil
Escribe primero los estilos para pantallas pequeñas y añade media queries con min-width para ampliar. Así el móvil carga solo lo imprescindible.
-
3
Maqueta con flexbox y grid
Usa grid para la estructura general y flexbox para alinear elementos dentro de cada bloque. Con repeat(auto-fit, minmax(…)) las columnas se reparten solas.
-
4
Define breakpoints según el contenido
Pon un punto de ruptura donde el diseño se rompe, no donde está el ancho de un modelo de teléfono concreto.
-
5
Haz fluidos tipos y espacios
Con clamp() el tamaño de un titular crece entre un mínimo y un máximo sin saltos bruscos.
-
6
Optimiza las imágenes
Sirve varios tamaños con srcset, usa formatos modernos como WebP o AVIF y carga en diferido lo que queda fuera de pantalla.
-
7
Prueba en dispositivos reales
El modo dispositivo de las herramientas de desarrollo ayuda, pero toca, zoom y teclados virtuales solo se comprueban en un móvil de verdad.
.productos { display: grid; gap: 1rem; grid-template-columns: 1fr; }@media (min-width: 48rem) { .productos { grid-template-columns: repeat(3, 1fr); } }
En móvil los productos se muestran en una sola columna; a partir de 48rem (768 píxeles con la fuente por defecto) pasan a tres columnas. Es el mismo HTML, solo cambia la hoja de estilos CSS.
04 Responsive en 2026: container queries y diseño intrínseco
El responsive de 2010 dependía casi por completo de media queries sobre el ancho de la ventana. Hoy el CSS permite componentes que se adaptan por sí mismos, lo que reduce los breakpoints globales.
| Técnica | Para qué sirve | Estado |
|---|---|---|
| Media queries | Cambiar estilos según ancho, orientación, modo oscuro o movimiento reducido | Recomendación del W3C desde 2012 (nivel 3) |
| Flexbox y CSS Grid | Rejillas fluidas sin cálculos de porcentajes | Compatibles con todos los navegadores actuales |
| clamp() | Tipografías y márgenes fluidos con mínimo y máximo | Compatible con todos los navegadores actuales |
| Container queries (@container) | Que una tarjeta cambie según el ancho de su contenedor, no de la ventana | En todos los navegadores principales desde febrero de 2023 (Firefox 110) |
| srcset, sizes y picture | Servir la imagen adecuada a cada pantalla y densidad | Estándar HTML |
05 Por qué el diseño responsive importa para SEO y usuarios
El 21 de abril de 2015 Google empezó a premiar en sus resultados móviles las páginas adaptadas al móvil (la actualización que la prensa apodó «Mobilegeddon»). Después llegó la indexación centrada en dispositivos móviles, completada el 5 de julio de 2024: desde entonces Google rastrea todas las webs como un smartphone. Google recomienda el responsive porque usa una sola URL y un solo HTML, sin redirecciones ni riesgo de contenido distinto entre versiones.
54,35 %
de las visitas web en España se hicieron desde un móvil en agosto de 2026
Fuente: StatCounter Global Stats, agosto de 2026
320 px
ancho al que el contenido debe poder leerse sin desplazamiento horizontal (criterio de reflujo 1.4.10)
Fuente: W3C, WCAG 2.1 y 2.2
El responsive también es una cuestión de accesibilidad: las pautas WCAG exigen que el contenido se reorganice al hacer zoom sin obligar a desplazarse en horizontal. Si tu web vende a consumidores, repasa lo que exige la ley europea de accesibilidad web desde 2025. Y ten en cuenta que responsive no significa rápido: una web adaptada pero pesada sigue perdiendo visitas, así que conviene mejorar la velocidad web en paralelo.
06 Cómo saber si una web es responsive
- ✓Estrecha la ventana del navegador: el contenido debe recolocarse, no cortarse ni generar barra horizontal.
- ✓Abre las herramientas de desarrollo (F12) y activa el modo dispositivo para simular distintos móviles.
- ✓Revisa el código fuente: debe aparecer la meta viewport con width=device-width.
- ✓Comprueba en un móvil real que los botones tienen tamaño suficiente para el dedo y que los formularios no obligan a hacer zoom.
- ✓Lanza un informe de Lighthouse o PageSpeed Insights para detectar problemas de tamaño de fuente, viewport y rendimiento móvil.
07 Ejemplos y plantillas responsive
El primer gran medio en rediseñarse por completo con esta técnica fue The Boston Globe, en 2011, con Ethan Marcotte en el equipo. Hoy prácticamente cualquier CMS moderno parte de plantillas responsive: si usas WordPress, la mayoría de temas actuales ya lo son, y puedes compararlos en esta selección de plantillas de WordPress gratis y de pago.
Durante años muchas empresas, sobre todo en turismo, dudaron entre adaptar su web o crear una versión móvil aparte. Este reportaje sobre diseño responsive o web independiente para móvil recoge ese debate; hoy la balanza se ha inclinado claramente hacia el responsive por coste y por SEO.
Una plantilla responsive es un punto de partida, no el final: los textos largos, las tablas o los formularios de tu negocio pueden romperla. En un proyecto de diseño web profesional cada plantilla se prueba con el contenido real en móvil antes de publicarse.
Preguntas frecuentes sobre Diseño Responsive
Es una técnica de maquetación en la que una sola página, con el mismo HTML y la misma URL, reorganiza su contenido para cualquier ancho de pantalla mediante una rejilla fluida, imágenes flexibles y media queries.
Significa que la web «responde» al espacio disponible: se adapta de forma continua al tamaño de la pantalla, en lugar de tener versiones separadas para móvil y ordenador.
El responsive usa un único diseño fluido que se recoloca de forma continua; el adaptativo prepara varios diseños fijos y muestra uno según el dispositivo. El responsive es más barato de mantener y es el que recomienda Google.
Son reglas de CSS que solo se aplican cuando se cumple una condición, por ejemplo que la pantalla mida al menos 768 píxeles. Son una de las tres bases del diseño responsive.
Añade la meta viewport, maqueta con flexbox o grid empezando por el móvil, usa imágenes con max-width: 100% y srcset, y añade media queries donde el diseño se rompa.
Ayuda: Google lo recomienda, indexa todas las webs con su rastreador para móvil y una web que no se usa bien en el teléfono pierde visitas y conversiones. Por sí solo no garantiza posiciones.
Ethan Marcotte, que acuñó el término en 2010 en la revista A List Apart y lo desarrolló en su libro Responsive Web Design (2011).
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗