¿Has abierto tu web en el teléfono y has visto algo que no se parece en nada a lo que construiste? Una web rota en el móvil es una de las quejas más comunes de quienes diseñaron su web en un ordenador y nunca comprobaron cómo se veía en una pantalla pequeña. Este artículo explica qué causa el problema, cómo diagnosticar cuál afecta a tu web y qué hacer para arreglarlo.
Más de la mitad del tráfico web llega ya desde dispositivos móviles. Esa proporción lleva años subiendo y sigue creciendo. Si un visitante llega a tu web desde un teléfono y se encuentra con un texto demasiado pequeño para leer, imágenes que se salen de la pantalla o un menú de navegación que no responde al tocarlo, hay pocas probabilidades de que se quede. Una tasa de rebote alta en móvil suele ser la primera señal medible de que algo falla, y muchos dueños de marcas no relacionan ambas cosas hasta que revisan su analítica.
Lo frustrante es que los problemas de visualización en móvil no siempre se notan desde la vista de ordenador que usas para gestionar tu web. Suelen aparecer solo cuando miras la pantalla real del teléfono, así que pueden pasar desapercibidos durante semanas o meses mientras los visitantes se van sin decir nada.
¿Por qué una web se ve rota en el móvil?
No hay una única causa para una web rota en el móvil. El problema suele ser uno de cinco problemas de fondo y, en algunos casos, una combinación de varios. Entender cuál afecta a tu web determina qué solución aplicar.
La web no se construyó con un diseño adaptable
Una web adaptable ajusta su diseño automáticamente según el ancho de la pantalla que la muestra. En un ordenador, el contenido puede aparecer en tres columnas. En una tableta, en dos. En un teléfono, en una sola columna por la que se desplaza. Este ajuste se hace con reglas CSS llamadas media queries, que indican al navegador cómo reorganizar el contenido en distintos tamaños de pantalla.
Si una web se construyó sin diseño adaptable, muestra el mismo diseño fijo sea cual sea el tamaño de pantalla. Una web diseñada para un monitor de ordenador de 1.440 píxeles de ancho intentará mostrarse con ese ancho en una pantalla de teléfono de unos 390 píxeles. El resultado es una página encogida y alejada donde el texto es ilegible y los botones son demasiado pequeños para tocarlos. El contenido está ahí, técnicamente, pero es inutilizable.
Las webs antiguas, sobre todo las creadas con editores de arrastrar y soltar que no daban prioridad a la versión móvil, suelen tener este problema. Las webs programadas a medida sin pensar primero en el móvil también pueden entrar en esta categoría.
Las imágenes no están dimensionadas para pantallas móviles
Una imagen subida con 3.000 píxeles de ancho y mostrada sin restricciones intentará mostrarse a su tamaño completo se vea donde se vea. En un ordenador, el navegador puede reducirla para que quepa. En un dispositivo móvil sin reglas de tamaño adaptable, la imagen puede sobrepasar el borde de la pantalla y causar desplazamiento horizontal o que el diseño se descomponga.
Incluso cuando las imágenes no se desbordan, las imágenes grandes sin optimizar afectan a por qué importa la velocidad de una web en el móvil. Una imagen que tarda en cargar y bloquea la aparición del resto de la página es una forma de comportamiento roto aunque el diseño aguante técnicamente. Los visitantes con conexiones móviles son especialmente sensibles a esto.
Elementos de ancho fijo se salen de la pantalla
Los elementos de ancho fijo son contenedores, divs, tablas u otros elementos HTML a los que se asigna un ancho concreto en píxeles en la hoja de estilos, en lugar de un porcentaje o una unidad flexible. Un contenedor de 900 píxeles de ancho se verá bien en un ordenador, pero se saldrá del borde de una pantalla de teléfono y obligará al usuario a desplazarse en horizontal para ver todo el contenido. El desplazamiento horizontal en una web es casi siempre señal de un problema de desbordamiento por ancho fijo.
Las tablas son un culpable frecuente. Una tabla de precios o un cuadro comparativo creado en HTML con columnas fijas puede descomponerse por completo en el móvil, haciendo que el texto se apile de formas imposibles de leer. Lo mismo vale para barras laterales, widgets incrustados y cualquier elemento programado con un ancho explícito en píxeles que supere el espacio disponible en la pantalla del teléfono.
Los tamaños de letra son demasiado pequeños para leer sin ampliar
Un texto que se lee bien a 14 píxeles en una pantalla de ordenador puede volverse ilegible en un teléfono, sobre todo en pantallas de alta densidad, donde el número físico de píxeles es mucho mayor que el tamaño lógico de la pantalla. Si un visitante necesita pellizcar y ampliar para leer tu contenido, la experiencia está rota aunque el diseño esté técnicamente intacto.
El tamaño mínimo recomendado para el texto del cuerpo en móvil es de 16 píxeles. Cualquier cosa por debajo corre el riesgo de no ser legible en una parte importante de los dispositivos. Un texto más pequeño también indica a los buscadores que la página no está optimizada para móvil, lo que puede afectar a cómo se posiciona y se indexa la web.
La navegación se descompone mal o no funciona al tacto
Los menús de navegación de ordenador suelen construirse como barras horizontales con elementos desplegables que aparecen al pasar el cursor por encima. En una pantalla táctil no existe el cursor encima. Un menú que depende de esa interacción simplemente no funciona en un teléfono. Los visitantes tocan el elemento del menú y no pasa nada, o los lleva a la página equivocada porque el estado que debía mostrar un submenú nunca se activa.
Incluso una navegación que técnicamente funciona al tacto puede estar rota en la práctica si las zonas de toque son demasiado pequeñas o están muy juntas. La pauta general para las zonas de toque en móvil es un mínimo de 44 por 44 píxeles. Las zonas más pequeñas provocan toques fallidos, navegación accidental y visitantes frustrados que ven más fácil irse que encontrar lo que venían a buscar.
Cómo comprobar si tu web está adaptada al móvil
La comprobación más rápida es abrir tu web en un teléfono real. Usa tu propio dispositivo y, si puedes, otro de distinta marca y modelo. Lo que se ve bien en un teléfono puede verse distinto en otro por diferencias de resolución de pantalla, de motor de renderizado del navegador y de versión del sistema operativo.
Las herramientas para desarrolladores del navegador ofrecen una simulación móvil integrada. En la mayoría de los navegadores de ordenador, pulsar F12 abre el panel de desarrollo. Un icono de barra de dispositivos permite simular distintos tamaños de pantalla y tipos de dispositivo. Es útil para comprobaciones rápidas, pero no sustituye del todo probar en dispositivos reales, porque los entornos simulados no reproducen el comportamiento táctil real, el renderizado de las fuentes ni las condiciones de red.
La prueba de compatibilidad con móviles de Google, disponible en Google Search Console, _blocked_úa tus páginas y señala problemas concretos de usabilidad móvil. Identifica problemas como texto demasiado pequeño para leer, elementos en los que se puede hacer clic demasiado juntos y contenido que no cabe en el área visible. El informe da detalle por página para que identifiques qué páginas concretas fallan y cuáles pasan la prueba.
Revisar tus datos de analítica añade una capa de comportamiento a la imagen técnica. Si tu tasa de rebote en móvil es bastante más alta que en ordenador, esa diferencia suele apuntar a un problema de visualización o de usabilidad en teléfonos. El artículo sobre la tasa de rebote alta en móvil explica cómo leer estas señales y qué hace que los visitantes se vayan al instante en pantallas pequeñas.
Cómo arreglar una web que se ve rota en el móvil
La solución correcta depende de qué causa produce el problema. Cada una de las cinco causas anteriores tiene su solución.
Cambia a un diseño adaptable
Si la web no es adaptable en absoluto, la solución es reconstruirla sobre una base adaptable o pasar a una plataforma que genere HTML adaptable por defecto. Añadir comportamiento adaptable a una web que no lo tiene es posible, pero suele costar más trabajo que reconstruirla desde una base adaptable. Si la web está en una plataforma moderna que admite temas o plantillas adaptables, cambiar a una plantilla adaptable suele ser la vía más rápida.
Redimensiona y limita las imágenes
Las imágenes deberían subirse al tamaño real de visualización que se necesita, no con la resolución original de exportación. Para la mayoría de las imágenes de una web, un ancho máximo de 1.200 píxeles basta para pantallas de alta densidad y mantiene los tamaños de archivo manejables. Las reglas CSS que fijan max-width: 100% en las imágenes garantizan que nunca se salgan de su contenedor, sea cual sea el ancho de pantalla. Esta única regla resuelve la mayoría de los problemas de desbordamiento de imágenes sin tener que redimensionar cada imagen.
Sustituye los anchos fijos por unidades flexibles
Los anchos fijos en píxeles de contenedores, tablas y otros elementos de diseño deberían sustituirse por anchos en porcentaje o por unidades CSS flexibles como em, rem o vw. Un contenedor con width: 90% en lugar de width: 900px se adaptará bien a cualquier tamaño de pantalla. En las tablas, añadir una regla CSS que las haga desplazables en horizontal dentro de su contenedor evita que descompongan el diseño general en pantallas estrechas.
Aumenta los tamaños de letra para móvil
El texto del cuerpo en móvil debería fijarse en al menos 16 píxeles. Si la hoja de estilos de ordenador define un tamaño menor, una media query dirigida a anchos de pantalla móvil puede sustituirlo. También conviene revisar los tamaños de los títulos, ya que muchos estilos de título que se ven proporcionados en un ordenador resultan excesivamente grandes en un teléfono y empujan el resto del contenido por debajo del pliegue antes de que el visitante haya leído nada.
Sustituye la navegación basada en pasar el cursor por un menú móvil
La solución habitual para la navegación móvil es un menú plegable, a menudo llamado menú hamburguesa, que se activa con un toque y no pasando el cursor. La mayoría de los marcos adaptables y de los creadores de webs incluyen este patrón por defecto. Si la navegación de la web actual no tiene un equivalente móvil, añadirlo exige modificar la hoja de estilos y el JavaScript o cambiar a un tema que incluya la navegación móvil como función integrada. También conviene revisar el tamaño de las zonas de toque para asegurar que todos los elementos del menú cumplen la pauta mínima de 44 píxeles.
Si tu web tiene páginas rotas además de problemas de visualización, arreglar primero el diseño visual suele facilitar navegar a cada página y probarla durante la auditoría.
Cómo gestiona WEMASY el móvil
El creador de webs de WEMASY genera HTML adaptable en cada página sin necesidad de configuración. Los diseños se reorganizan automáticamente en pantallas móviles, las imágenes quedan limitadas dentro de sus contenedores y la navegación pasa a un menú pensado para el tacto en teléfonos y tabletas. Los tamaños de letra, las zonas de toque y los espaciados se definen dentro del sistema de diseño de la plataforma para cumplir los estándares de usabilidad móvil, así que las marcas que lanzan su web en WEMASY parten de una web lista para móvil en lugar de tener que adaptarla después.
Mira qué incluye en el creador de webs de WEMASY o consulta los planes disponibles en la página de precios.
Preguntas frecuentes
¿Por qué mi web se ve bien en el ordenador pero rota en el móvil?
Suele pasar porque la web se construyó o diseñó sobre todo para verse en ordenador, sin reglas CSS adaptables que ajusten el diseño a pantallas más pequeñas. El navegador de ordenador tiene ancho suficiente para mostrar el diseño fijo como se pensó. Una pantalla de teléfono no, así que los elementos se desbordan, se solapan o se reducen hasta ser ilegibles. Comprobar la web en el modo de simulación móvil de un navegador o en un dispositivo real es la forma más rápida de ver lo que experimentan los visitantes móviles. Con el creador de webs de WEMASY puedes configurarlo directamente en tu web.
¿Un diseño móvil roto afecta a mi posicionamiento en Google?
Sí. Google usa la indexación móvil primero, lo que significa que la versión móvil de una página es la que Google _blocked_úa principalmente para el posicionamiento. Una web con problemas de visualización móvil, texto pequeño o contenido que se sale del área visible recibirá peores puntuaciones de usabilidad, lo que influye en el rendimiento general en buscadores. Arreglar los problemas móviles es a la vez una mejora de la experiencia de usuario y un beneficio para el SEO.
¿Qué causa el desplazamiento horizontal en una web móvil?
El desplazamiento horizontal en móvil casi siempre apunta a un elemento con un ancho fijo en píxeles que supera el ancho de la pantalla del teléfono. Los culpables habituales son tablas, barras laterales, contenido incrustado, imágenes sin restricción de ancho y contenedores con un ancho concreto en píxeles en lugar de un porcentaje. Identificar el elemento que se desborda con las herramientas para desarrolladores del navegador y después sustituir el ancho fijo por un porcentaje o añadir controles de desbordamiento a su contenedor padre suele resolver el problema.
¿Cómo pruebo si mi web está adaptada al móvil?
Abre la web en un teléfono real y recorre todas las páginas clave. Después ábrela en las herramientas para desarrolladores de un navegador de ordenador y usa el modo de simulación de dispositivos para verla con varios anchos de pantalla. Para una auditoría estructurada, pasa las páginas por el informe de usabilidad móvil de Google Search Console, que señala problemas concretos como texto demasiado pequeño, elementos en los que se puede hacer clic demasiado juntos y problemas de configuración del área visible. Los dos enfoques juntos dan la imagen más completa.
¿Puedo arreglar una web móvil rota sin reconstruirla entera?
Depende de cómo se construyó la web. Si funciona en una plataforma que admite temas adaptables, cambiar a un tema adaptable suele ser la solución más rápida y no exige reconstruir el contenido desde cero. Si la web está programada a medida con un diseño no adaptable, unos cambios CSS concretos con media queries pueden resolver problemas específicos sin una reconstrucción completa. Sin embargo, si el diseño se basa en tablas o depende mucho de anchos fijos en todas partes, una reconstrucción completa sobre una base adaptable suele ser más eficiente que parchear cada problema.
¿Por qué se van mis visitantes tras solo unos segundos en el móvil?
Cuando los visitantes llegan a una página con problemas de visualización, texto ilegible, navegación rota o imágenes lentas, se van rápido porque la página no cumple sus expectativas básicas de usabilidad. Los visitantes móviles toleran menos la fricción que los de ordenador. Si el diseño está roto o va lento, vuelven a los resultados de búsqueda y hacen clic en el resultado de otra web. El artículo sobre visitantes que se van de tu web recoge todos los motivos por los que la gente se va rápido y cómo diagnosticar cuál afecta a tu web.