Qué es una web adaptada a móviles y cómo probarla
Explica la lógica del diseño responsive y las formas prácticas de comprobar si una web está adaptada a móviles; enumera las causas más frecuentes de las webs que se ven mal en el teléfono y sus soluciones.
Aurora YazılımEquipo editorial
6 min de lectura
Una web adaptada a móviles es aquella que se organiza según el tamaño de pantalla en teléfono, tableta y ordenador, se lee sin necesidad de hacer zoom y se maneja cómodamente con el dedo. El método que lo hace posible es el diseño responsive: el mismo contenido se muestra con la disposición adecuada a cada pantalla mediante rejillas flexibles y media queries de CSS, de modo que el visitante navega con la misma facilidad desde cualquier dispositivo.
¿Qué es una web adaptada a móviles?
Si al abrir una web en el teléfono tiene que ampliar el texto con dos dedos para leerlo, desplazarse hacia los lados o intentar acertar en enlaces diminutos, esa web no está adaptada a móviles. Una web adaptada a móviles elimina estos problemas: el texto tiene un tamaño legible, el menú se abre con un toque y los botones tienen el tamaño de un dedo.
Adaptar una web a móviles no es hacer una copia reducida de la versión de escritorio. La prioridad del contenido, la estructura del menú y la longitud de los formularios se replantean según las condiciones de la pantalla pequeña. El usuario de móvil suele estar en movimiento, con una conexión variable, y quiere llegar rápido a la información que busca.
Los buscadores también tienen en cuenta esta realidad. Google utiliza de forma prioritaria la versión móvil para indexar y posicionar los sitios. Es decir, una página que se ve incompleta o rota en el teléfono puede perjudicar su rendimiento en las búsquedas, por muy bien que se vea en el ordenador.
¿Qué es el diseño responsive?
El diseño responsive (adaptable) consiste en mostrar una única estructura HTML con distintas disposiciones según el ancho de pantalla. En lugar de una web móvil independiente (del tipo m.dominio.com), se usan la misma dirección y el mismo contenido; lo único que cambia es la maquetación.
Este enfoque se apoya en tres pilares: la rejilla flexible (columnas definidas con porcentajes o unidades fraccionarias), las imágenes flexibles (que no se salen de su contenedor) y las media queries (reglas CSS que se activan en determinados anchos de pantalla).
<meta name="viewport" content="width=device-width, initial-scale=1">.kartlar {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
.kartlar { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
.kartlar { grid-template-columns: repeat(3, 1fr); }
}Enfoque mobile first
Mobile first significa empezar a diseñar por la pantalla más pequeña y ampliar después hacia las pantallas grandes. El ejemplo de CSS anterior está escrito con esa lógica: la disposición por defecto es de una sola columna y se añaden columnas a medida que la pantalla se ensancha.
El beneficio de este enfoque no es solo técnico. Como en una pantalla pequeña el espacio es limitado, el equipo se ve obligado a decidir qué información es realmente importante. El resultado son páginas más sencillas, enfocadas y rápidas, y la versión de escritorio también se beneficia de esa claridad.
Los detalles de pensar primero en el móvil desde el lado de la interfaz los explicamos en nuestro artículo sobre la diferencia entre UI y UX, y cómo se aplica en webs corporativas, en la página de nuestro servicio de diseño responsive.
Cómo probar la adaptación a móviles
Para comprobar la adaptación de una web a móviles no hacen falta herramientas caras. Si combina los métodos siguientes, detectará la mayor parte de los problemas.
El modo dispositivo del navegador
Abra la página en Chrome, Edge o Firefox y abra las herramientas para desarrolladores (F12 en Windows, Cmd+Option+I en macOS). Al activar la barra de herramientas de dispositivos podrá ver la página en distintos tamaños de teléfono y, estrechando y ensanchando la pantalla, observar en qué punto se rompe la maquetación.
Lighthouse y PageSpeed Insights
La pestaña Lighthouse de las herramientas para desarrolladores de Chrome y PageSpeed Insights analizan su página en condiciones de dispositivo móvil. Los informes de rendimiento, accesibilidad y buenas prácticas listan por separado las zonas táctiles pequeñas, los textos ilegibles y la ausencia de viewport.
Informes de Search Console
Google Search Console muestra por separado, para móvil y para escritorio, el informe de Core Web Vitals basado en datos reales de usuarios de su web. Como la antigua herramienta independiente de Google para probar la compatibilidad con móviles se retiró, hoy se utilizan este informe y Lighthouse conjuntamente.
Prueba en un dispositivo real
La simulación no lo muestra todo. Abra la web al menos en un Android y en un iPhone, y en distintos navegadores. Rellene el formulario, abra y cierre el menú, toque el número de teléfono y compruebe que se inicia la llamada. Una prueba en dispositivo real es la única forma de sacar a la luz problemas como que el teclado tape el formulario.
La web se ve mal en el móvil: causas habituales
En las webs cuya maquetación se rompe en el móvil suelen repetirse unas pocas causas. La tabla siguiente le ayuda a encontrar la solución a partir del síntoma.
| Síntoma | Causa posible | Solución |
|---|---|---|
| La página se ve muy pequeña | Falta la etiqueta meta viewport | Añada la línea del viewport en el head |
| Aparece desplazamiento lateral | Elemento de ancho fijo o imagen que se desborda | Haga los anchos flexibles y asigne max-width: 100% a las imágenes |
| Los textos no se leen | Tamaño de letra demasiado pequeño | Mantenga el texto principal en torno a un mínimo de 16 píxeles |
| No se acierta en los botones | Zonas táctiles pequeñas y muy juntas | Agrande los objetivos táctiles y deje espacio entre ellos |
| El contenido salta al cargar la página | Imágenes y espacios publicitarios sin tamaño definido | Asigne ancho y alto, o la relación de aspecto, a las imágenes |
| El menú no se abre | Error de JavaScript o capa oculta que queda por encima | Revise los errores de la consola y el orden de las capas |
Por qué la velocidad en móvil merece atención aparte
El usuario de móvil suele tener una conexión más lenta o variable que en el ordenador, y el procesador del dispositivo es más limitado. Una página que se abre rápido en el escritorio puede hacer esperar segundos en el móvil por culpa de imágenes pesadas y archivos JavaScript grandes.
Las métricas Core Web Vitals de Google miden esta experiencia: se consideran umbrales «buenos» 2,5 segundos para el tiempo de carga del contenido más grande (LCP), 200 milisegundos para el tiempo de respuesta a la interacción (INP) y 0,1 para el desplazamiento visual (CLS). Servir las imágenes en formatos modernos, cargar solo el código necesario y configurar bien la caché mejora estos valores.
Abordamos este trabajo técnico en la sección de velocidad y rendimiento. Como la velocidad en móvil también afecta a la visibilidad en las búsquedas, conviene planificarla junto con el diseño web SEO.
Lista de control para móviles
Antes de publicar su web, o al revisarla de nuevo, vaya marcando uno por uno estos puntos:
- La etiqueta meta viewport está en todas las páginas.
- No aparece desplazamiento horizontal en ningún ancho.
- El texto principal se lee sin hacer zoom y el interlineado es cómodo.
- Los botones y enlaces tienen un tamaño cómodo para tocarlos con el dedo.
- Los teléfonos funcionan como toque para llamar y las direcciones como enlace a un mapa.
- Los formularios son cortos y se abre el tipo de teclado correcto (correo, teléfono, número).
- Las ventanas emergentes no tapan el contenido y se cierran con facilidad.
- El contraste de color permite leer incluso bajo el sol; la relación de 4,5:1 que recomienda WCAG para el texto normal es una buena referencia.
- El informe de Lighthouse para móvil no muestra avisos críticos.
La adaptación a móviles no se hace una sola vez
Cada año aparecen nuevos dispositivos, otras proporciones de pantalla y actualizaciones de los navegadores. Cada sección nueva, banner de campaña o herramienta de chat que se añade a la web puede estropear la maquetación móvil. Por eso es un buen hábito repetir las pruebas en móvil después de cada actualización importante.
Lo que conviene tener en cuenta en materia de accesibilidad lo encontrará en nuestra guía de accesibilidad web, y cómo plantear la experiencia móvil en una web corporativa, en el artículo qué es una web corporativa. Si desea una valoración de cómo se ve su web en el móvil, escríbanos.
Preguntas frecuentes
01¿Web móvil independiente o diseño responsive?
Hoy, en la mayoría de los casos se prefiere el diseño responsive. Al haber una sola dirección y un único contenido, el mantenimiento es más sencillo y desaparecen los problemas de contenido duplicado o de redirecciones para los buscadores.
02¿Puedo adaptar a móviles mi web antigua?
Depende de la estructura de la web. En las webs antiguas construidas con tablas o maquetaciones de ancho fijo, remendar suele dar más trabajo que hacer un nuevo diseño mobile first. Lo correcto es empezar con una prueba exhaustiva para ver la magnitud de los problemas.
03¿Influye la adaptación a móviles en el posicionamiento?
Como Google usa primero la versión móvil para indexar, un contenido incompleto o roto en el móvil afecta indirectamente a la visibilidad. La experiencia de página por sí sola no determina el posicionamiento, pero es un elemento importante que respalda un buen contenido.
04¿Debo probar también la vista de tableta?
Sí. Con sus anchos intermedios entre el teléfono y el ordenador, las tabletas son el rango donde más a menudo se rompe la maquetación. Compruebe que el menú, la rejilla y las imágenes se comportan correctamente también en estos anchos intermedios, tanto en vertical como en horizontal.
Una web adaptada a móviles ya no es una opción, sino el requisito previo para llegar a la mayoría de los visitantes. Para dotar a su web de una estructura rápida y fácil de usar desde la pantalla pequeña, conozca nuestro servicio de diseño responsive y nuestro enfoque general de diseño web; en las decisiones de interfaz, nuestro equipo de diseño UI/UX también le acompaña.
