≡En resumen
- El diseño adaptativo prepara varias maquetas cerradas y muestra la que corresponde al dispositivo o al ancho de pantalla detectado.
- Puede decidirse en el navegador (diseños fijos que cambian en cada breakpoint) o en el servidor (distinto HTML según el user-agent).
- Ofrece control píxel a píxel y páginas más ligeras por dispositivo, pero multiplica el trabajo de diseño, desarrollo y mantenimiento.
- Google recomienda el diseño responsive; si sirves HTML distinto por dispositivo, necesitas la cabecera Vary: User-Agent y el mismo contenido en móvil y ordenador.
- Hoy se usa sobre todo en proyectos grandes con necesidades muy distintas por dispositivo o en webs antiguas con versión m. separada.
01 ¿Qué es el diseño adaptativo?
El término tiene dos usos. En sentido estricto, Aaron Gustafson lo acuñó en 2011 en su libro Adaptive Web Design para hablar de mejora progresiva: una web que funciona en cualquier navegador y añade mejoras según las capacidades del dispositivo. En el uso habitual, y el de esta definición, «adaptativo» se refiere a diseños predefinidos por dispositivo, en contraste con el diseño responsive, que usa un único diseño fluido.
Una aclaración frecuente: Ethan Marcotte no «cambió» el nombre de adaptativo a responsive. Acuñó responsive web design en 2010 en A List Apart, un año antes del libro de Gustafson; son conceptos paralelos.
02 Cómo funciona el diseño adaptativo
Hay dos formas de decidir qué versión ve cada usuario. La diferencia está en quién detecta el dispositivo: el navegador o el servidor.
| Implementación | Cómo decide | URL | Ejemplo técnico |
|---|---|---|---|
| Diseños fijos en el navegador | Media queries de CSS cambian de una maqueta de ancho fijo a otra en cada breakpoint | La misma | Contenedor de 320 px, 760 px o 1200 px según el ancho de la ventana |
| Servicio dinámico (dynamic serving) | El servidor lee el user-agent y devuelve un HTML distinto para móvil o para ordenador | La misma | Plantillas separadas y cabecera Vary: User-Agent |
| URL separadas | El servidor redirige al móvil a otra versión del sitio | Distinta (m.dominio.com) | m.youtube.com o es.m.wikipedia.org |
03 Diseño adaptativo vs responsive: diferencias
Los dos persiguen lo mismo, que la web se vea y se use bien en cualquier pantalla, pero con estrategias opuestas: el adaptativo elige entre versiones cerradas y el responsive recoloca un único diseño de forma continua.
| Aspecto | Diseño adaptativo | Diseño responsive |
|---|---|---|
| Maquetación | Varios diseños de ancho fijo | Un diseño fluido con porcentajes, flexbox o grid |
| Entre dos breakpoints | El diseño no cambia hasta el siguiente corte | El diseño se reajusta píxel a píxel |
| Detección | Ancho de pantalla o user-agent en el servidor | Solo el navegador, con media queries |
| Control del diseño | Máximo: cada versión se diseña a medida | Menor: hay que prever cómo fluye todo |
| Coste y mantenimiento | Alto: cada cambio se replica en cada versión | Menor: un solo código y un solo HTML |
| Pantallas nuevas o raras | Pueden verse con márgenes o cortes | Se adaptan automáticamente |
| Posición de Google | Aceptado, con requisitos técnicos | Configuración recomendada |
04 Ventajas y desventajas del diseño adaptativo
| Ventajas | Desventajas |
|---|---|
| Control total de cómo se ve cada versión | Más horas de diseño y desarrollo: una maqueta por cada ancho |
| Puede enviar al móvil solo el código y las imágenes que necesita | Cada cambio de contenido o diseño hay que replicarlo en todas las versiones |
| Permite experiencias muy distintas por dispositivo (por ejemplo, un flujo de compra simplificado en móvil) | La detección por user-agent falla con dispositivos nuevos o poco comunes |
| Útil para modernizar por fases una web antigua de ancho fijo | Riesgo SEO si el contenido móvil y el de escritorio no coinciden |
La ventaja de rendimiento es real solo si cada versión se optimiza de verdad; un adaptativo que carga todo el código de escritorio en el móvil pierde su razón de ser. Si tu problema es la lentitud, conviene atacarlo con una estrategia de velocidad de carga web antes que con un rediseño completo.
05 Diseño adaptativo y SEO: lo que exige Google
Google reconoce tres configuraciones para webs móviles: diseño responsive, servicio dinámico y URL separadas. Recomienda la primera porque es la más fácil de implementar y mantener, pero acepta las otras dos, que son formas de diseño adaptativo, si cumples sus requisitos. Desde el 5 de julio de 2024 Google rastrea e indexa todas las webs con su rastreador para smartphone, así que lo que no está en tu versión móvil, para Google, no existe.
- ✓El contenido principal, los datos estructurados y las metaetiquetas deben ser los mismos en la versión móvil y en la de ordenador.
- ✓Con servicio dinámico, envía la cabecera HTTP Vary: User-Agent para indicar que el HTML cambia según el dispositivo.
- ✓Con URL separadas, la versión de escritorio lleva rel="alternate" hacia la móvil y la móvil rel="canonical" hacia la de escritorio.
- ✓No bloquees CSS, JavaScript ni imágenes de ninguna versión en robots.txt.
- ✓Redirige cada URL de escritorio a su equivalente móvil, nunca todas a la home móvil.
54,35 %
de las visitas web en España se hicieron desde móvil en agosto de 2026
Fuente: StatCounter Global Stats, agosto de 2026
44,35 %
desde ordenador, y solo el 1,3 % desde tableta, en el mismo mes
Fuente: StatCounter Global Stats, agosto de 2026
06 Ejemplos de diseño adaptativo
Wikipedia móvil
Sirve a los teléfonos una versión separada en el subdominio m. (es.m.wikipedia.org), con menús plegados y secciones colapsables.
YouTube
Mantiene m.youtube.com como versión móvil de la web, con una interfaz distinta a la de escritorio.
Portales con versión m.
Muchas webs de medios, bancos y aerolíneas crearon versiones m. en los primeros años del smartphone; buena parte ha migrado después a responsive.
Componentes adaptativos
Tablas de precios que en móvil se convierten en tarjetas o menús que cambian de estructura en un breakpoint.
Una empresa tiene una web de 2014 maquetada a 1000 píxeles fijos. Rehacerla entera no entra en el presupuesto del año, así que se crea una segunda maqueta de 360 píxeles para móviles y se activa con una media query. Es una solución adaptativa pragmática: resuelve la usabilidad móvil hoy y deja el paso a un diseño fluido para el siguiente rediseño de la web.
07 ¿Cuándo elegir diseño adaptativo?
- ✓Cuando la experiencia en móvil debe ser realmente distinta, no solo más estrecha (por ejemplo, un área de cliente o un flujo de reserva).
- ✓Cuando necesitas modernizar por fases una web de ancho fijo sin rehacerla entera.
- ✓Cuando tienes equipo técnico para mantener varias versiones sincronizadas.
- ✓Evítalo si tu web es un sitio corporativo, un blog o una tienda estándar: el responsive es más barato y seguro para el SEO.
Para la mayoría de negocios la mejor opción es partir de una mentalidad mobile first con un diseño fluido y reservar los cambios adaptativos para componentes concretos. Es el enfoque con el que trabajamos el diseño y desarrollo web en appyweb. Si quieres ver cómo ha cambiado el comportamiento de los usuarios, lee este análisis sobre cómo adaptarse al auge del smartphone.
Preguntas frecuentes sobre Diseño Adaptativo
Es una técnica que crea varios diseños fijos, uno por tipo de dispositivo o rango de pantalla, y muestra el adecuado tras detectar el dispositivo del usuario.
El adaptativo elige entre varias maquetas cerradas; el responsive usa un único diseño fluido que se recoloca de forma continua con media queries. El responsive es más barato de mantener y es el que recomienda Google.
Para la mayoría de webs, el responsive. El adaptativo compensa cuando necesitas experiencias muy distintas por dispositivo o modernizar por fases una web antigua.
No, si se implementa bien: mismo contenido en móvil y ordenador, cabecera Vary: User-Agent en servicio dinámico y etiquetas canonical y alternate si usas URL separadas.
El término lo acuñó Aaron Gustafson en su libro Adaptive Web Design (2011), centrado en la mejora progresiva. El uso como diseños fijos por dispositivo se generalizó después.
Los más citados son 320, 480, 760, 960, 1200 y 1600 píxeles, aunque lo recomendable es fijarlos según los dispositivos reales de tus visitas.
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 ↗