Glosario Daimatics · Diseño web

Diseño adaptativo: cómo saber si tu web aguanta el móvil

El diseño adaptativo prepara varias maquetas de ancho fijo y muestra la que toca según la pantalla; el responsive hace una sola, fluida, que se ajusta a cualquier ancho. Para el negocio, la técnica cuenta menos que el resultado: Google indexa a partir de la versión móvil, y lo que no aparece ahí no cuenta para posicionarte.

Para quien tiene una web, o la tiene que encargar, y quiere saber si funcionará bien en el móvil.

Cuatro maneras de servir el móvilMóvil

ResponsiveMismo HTML y URL; el diseño se estiraRecomendado

AdaptativoMaquetas fijas, una por tamañoSalta

Publicación dinámicaEl servidor elige el HTML según el dispositivoServidor

URLs independientesUna web aparte para el móvilDos webs

Responsive, publicación dinámica y URLs independientes: las tres configuraciones de Google

La diferencia

Adaptativo o responsive: qué cambia de verdad

Los dos quieren lo mismo, que la web funcione en cualquier pantalla; cambia cómo se llega. Hoy el responsive es el enfoque estándar, según MDN, y métodos de maquetación como Flexbox y CSS Grid ya son fluidos de base.

Adaptativo

Varias maquetas fijas (móvil, tablet, ordenador): el navegador muestra la que encaja.

Entre tamaño y tamaño, salta: una pantalla no prevista puede quedar con márgenes vacíos o cosas recortadas.

O lo decide el servidor, que envía un HTML diferente por dispositivo: Google lo llama publicación dinámica.

Responsive

Una sola maqueta fluida, con columnas e imágenes que se estiran y puntos de ruptura.

El mismo HTML en la misma URL: contenido y metadatos iguales en todas las pantallas.

Es lo que recomienda Google, porque es lo más fácil de implementar y de mantener.

Nuestro criterio: no discutas el nombre de la técnica, que además se confunde: la documentación de Google en español llama «diseño adaptable» al responsive. Sea cual sea, antes de aceptar la entrega comprueba con tu móvil el contenido, el menú, los formularios y la velocidad.

Qué mira Google

Lo que Google mira cuando entra por el móvil

Desde el 5 de julio de 2024, Google rastrea con su robot de móvil, Googlebot Smartphone, y una web que no es accesible desde el móvil deja de ser indexable. Su guía destaca cuatro:

Contenido

Lo mismo que en el ordenador

Solo lo que aparece en el móvil se usa para indexar. Plegarlo en acordeones o pestañas es correcto; quitarlo, no.

Metadatos

Los mismos metadatos

Title, meta description, etiquetas robots y datos estructurados, equivalentes en las dos versiones.

Imágenes

Buena resolución y el mismo alt

Nada de imágenes demasiado pequeñas o de URL que cambien en cada carga, y el mismo texto alternativo.

Interacción

Nada escondido detrás de un toque

Google no carga el contenido que solo aparece si alguien desliza, hace clic o escribe.

También cuenta la velocidad: las Core Web Vitals forman parte de los sistemas de clasificación de Google. Los umbrales de «bueno», con datos de visitas reales:

LCP de 2,5 s o menos: el contenido principal ya se ve.

INP de 200 ms o menos: la web responde cuando tocas.

CLS de 0,1 o menos: nada salta mientras carga.

Cuidado: Google dice que siempre busca el contenido más relevante, aunque la experiencia sea floja. Una buena nota ayuda, pero no te pone primero.

Errores habituales

Cinco errores que se ven en un minuto

Contenido recortado. Por «simplificar» el móvil, se quitan apartados que Google ya no usará para indexar.

Menús que no se abren. Submenús que solo se abren pasando el ratón por encima, algo que una pantalla táctil no hace bien.

Botones pequeños o pegados. Las pautas WCAG 2.2 piden objetivos de 24 × 24 píxeles CSS como mínimo, o suficiente espacio alrededor.

Imágenes enormes. Una foto de ordenador descargada entera en el móvil gasta datos y retrasa el contenido; con srcset, el navegador elige el tamaño.

Ventanas que tapan la página. Google pide banners pequeños en lugar de capas a pantalla completa, salvo las obligatorias por ley.

Si encargas una web

Qué tienes que pedir antes de firmar

El mismo contenido en todas las pantallas

Por escrito: todo el texto, las imágenes y los enlaces del ordenador también en el móvil, aunque plegados.

Pruebas en móviles de verdad

El emulador ayuda, pero el tacto, el teclado y una conexión lenta se prueban con un teléfono. Pregunta con cuáles.

Cómo medirán la velocidad

Lighthouse antes de publicar y, con visitas reales, el informe de Core Web Vitals de Search Console.

Accesibilidad básica

Zoom permitido, texto ampliable hasta el 200 %, botones de 24 píxeles como mínimo y ningún bloqueo de la orientación.

Cuándo necesitas ayuda

Cuando el móvil ya no se resuelve retocando

La revisión te da tres errores o más y cada arreglo estropea otro.
Search Console te marca URL lentas en el móvil y no sabes qué las frena.
Dudas entre arreglar la web que tienes o hacer una nueva.
Encargas una web y quieres el móvil resuelto desde el principio.

En Daimatics hacemos webs en las que el diseño, el SEO, la velocidad y la medición se piensan a la vez, desde el primer boceto. Y la web queda a tu nombre.

Ver el servicio de diseño web Revisar el SEO técnico

Preguntas frecuentes

Dudas sobre el diseño adaptativo

La regla

Lo que en el móvil no está, para Google tampoco está. Revisa tu web primero con el teléfono.

¿Qué diferencia hay entre diseño adaptativo y responsive?

El diseño adaptativo prepara varias maquetas de ancho fijo, o versiones que elige el servidor según el dispositivo, y muestra la que encaja. El responsive usa una sola maqueta fluida, con rejillas e imágenes que se estiran. El término responsive lo acuñó Ethan Marcotte en 2010, y hoy es el enfoque estándar.

¿Es mejor una web adaptativa o responsive para el SEO?

Google describe tres configuraciones para el móvil, responsive, publicación dinámica y URLs independientes, y recomienda el responsive porque es la más fácil de implementar y de mantener: el mismo HTML en la misma URL. Con las otras dos, tienes que vigilar que el móvil no pierda contenido, datos estructurados ni etiquetas robots.

¿Qué significa mobile first?

En diseño, mobile first significa empezar por la maqueta del móvil, de una columna, y añadir columnas cuando la pantalla lo permite. En Google, la indexación mobile-first significa que rastrea con un robot de teléfono e indexa a partir de la versión móvil. Son cosas diferentes, y la segunda te afecta aunque no hagas la primera.

¿Cómo sé si mi web está adaptada al móvil?

Google retiró la prueba de optimización para móviles y el informe de usabilidad móvil de Search Console el 1 de diciembre de 2023, y cita Lighthouse como alternativa. Para la velocidad con visitas reales, está el informe de Core Web Vitals de Search Console, separado por móvil y ordenador. El resto, pruébalo tú con el teléfono.

¿Google penaliza una web que no está adaptada al móvil?

Google no lo plantea como una penalización, pero el efecto está ahí. Desde julio de 2024, una web que no es accesible desde el móvil deja de ser indexable, y si en el móvil hay menos contenido, Google avisa de que puedes perder tráfico. Las ventanas que tapan el contenido también pueden empeorar el rendimiento en la búsqueda.