Tu web se ve mal en móvil: qué revisar y cuándo renovarla

Describe el fallo antes de pedir un rediseño

«En mi teléfono se ve raro» es una pista, pero no permite reproducir el problema. Anota la URL, el ancho aproximado o modelo del dispositivo y el navegador. Explica si ocurre al entrar, abrir un menú, aceptar cookies, girar la pantalla o escribir en un formulario.

Haz una captura y, si depende de una secuencia, registra los pasos. Una tarjeta que sale del borde puede estar causada por una tabla, una palabra larga o un ancho fijo. No tiene por qué resolverse cambiando toda la plantilla ni ocultando el desbordamiento para que deje de verse.

Prioriza lo que bloquea acciones. Un botón inaccesible o un formulario imposible de completar tiene más urgencia que ajustar el recorte de una foto secundaria. La revisión móvil tiene que valorar funcionamiento además de apariencia, para no dar por terminado un arreglo únicamente porque queda más bonito.

Comprueba que el contenido se reorganiza

Abre la página en una pantalla estrecha y observa si necesitas desplazarte lateralmente para leer párrafos normales. Las columnas pueden apilarse y las imágenes reducirse, pero el contenido no debería salir de la pantalla. Una tabla ancha puede necesitar una solución específica sin provocar desplazamiento en toda la página.

La guía de diseño adaptable de web.dev explica la relación entre ventana gráfica, imágenes flexibles y reorganización del diseño. Estos principios permiten revisar la implementación sin asociar cada solución a un modelo concreto de teléfono.

Pide que se comprueben tamaños intermedios, no solo escritorio grande y un móvil moderno. Una composición puede funcionar en ambos extremos y romperse en una tableta o en una ventana de portátil. El punto de cambio debe responder al contenido, especialmente cuando hay menús, tarjetas o columnas con textos extensos.

No aceptes como solución general encoger todo el sitio. Si el usuario tiene que ampliar cada párrafo para entenderlo, el diseño no se ha adaptado. Ocultar partes esenciales para que quepan tampoco resuelve la necesidad de quien entra desde el teléfono.

Ajusta la jerarquía de títulos y párrafos

Un encabezado puede tener fuerza visual sin ocupar varias pantallas. Comprueba las palabras partidas, la separación entre líneas y la proporción con el texto que sigue. Si un título deja una sílaba aislada o una palabra invade la fotografía, pide revisar su tamaño y el ancho disponible.

La tipografía también necesita consistencia. Asegúrate de que los encabezados cargan la fuente prevista y de que el texto sigue siendo legible cuando esa fuente tarda en llegar. El equipo debe revisar la alternativa de carga, no depender de un aspecto que solo aparece después de esperar.

En Clara utilizamos como criterio editorial un mínimo de 16 px en escritorio y 15 px en móvil. Es una decisión de diseño del servicio, no una cifra que por sí sola garantice accesibilidad. Contraste, espaciado, longitud de línea y posibilidad de ampliar siguen siendo importantes.

Prueba el aumento de texto y el zoom del navegador. No conviene bloquearlos para conservar una composición exacta. La información y los controles deberían seguir siendo utilizables cuando una persona necesita verlos más grandes.

Recorre el menú y los controles sin adivinar

Abre el menú móvil, entra en una página y vuelve a abrirlo. Comprueba que se puede cerrar, que no queda una capa invisible bloqueando el contenido y que los enlaces conducen al destino correcto. Un icono atractivo no sirve si la zona pulsable es demasiado difícil de alcanzar.

Revisa si los controles dependen de pasar el ratón por encima. Esa interacción no tiene la misma equivalencia en una pantalla táctil. Los submenús, las tarjetas con información oculta y los botones que solo aparecen al posar el cursor necesitan una alternativa usable.

El orden del teclado también importa. Prueba los enlaces con tabulación en escritorio y comprueba que el foco se ve. Si el menú se presenta como una ventana superpuesta, el equipo debe revisar cómo entra y sale el foco para no dejar al visitante recorriendo elementos tapados.

Revisa juntos los avisos y botones flotantes

Un chat, una burbuja de WhatsApp, un aviso de cookies y una barra de contacto pueden parecer pequeños por separado. Al aparecer a la vez, pueden tapar buena parte de la pantalla o el botón que la persona intenta pulsar. Prueba el primer acceso sin preferencias guardadas.

Comprueba también el estado después de cerrar un aviso. No debería quedar un margen vacío, un fondo inmóvil o un control fuera de sitio. Si un panel de cookies ocupa la pantalla, tiene que poder utilizarse y cerrarse según sus opciones sin impedir innecesariamente acceder al contenido.

No dupliques el mismo contacto en varios elementos fijos por costumbre. Define qué acción necesita estar disponible y dónde. En una página breve puede bastar un contacto bien situado; en otra habrá que estudiar un acceso persistente que no tape la lectura.

La guía de cookies de la AEPD sirve para revisar el consentimiento de las herramientas instaladas. La solución visual debe acompañar esa configuración, no sustituirla por un banner decorativo que no controla lo que se carga.

Completa el formulario con el teclado abierto

Muchas capturas de móvil no muestran el momento más difícil: escribir. Revisa que la etiqueta siga visible, que los campos no queden tapados y que el botón de envío pueda alcanzarse. Comprueba el tipo de teclado que aparece para correo o teléfono y la claridad de los campos opcionales.

Provoca un error controlado, como dejar un campo obligatorio vacío. La página debería señalar el problema y explicar cómo corregirlo. No dependas solo de un borde rojo ni de un texto genérico al final. Conserva la información válida cuando sea posible para evitar repetir toda la tarea.

Las recomendaciones de W3C para formularios desarrollan etiquetas, instrucciones y avisos. Además del uso visual, comprueba con el equipo que existe un resultado interno recuperable. Un formulario que se puede pulsar pero pierde la solicitud sigue fallando.

Si no puedes hacer un envío real en ese momento, registra que has validado la interfaz y deja pendiente la entrega. No mezcles ambas comprobaciones en un «todo funciona» que no esté respaldado por la prueba completa.

No confundas buena composición con buena carga

Una fotografía puede encajar en pantalla y seguir pesando demasiado. Pide versiones adecuadas al tamaño mostrado y revisa que las imágenes tengan dimensiones declaradas para reservar espacio. Los vídeos de fondo y recursos externos también pueden afectar a la primera visita.

Observa si el contenido salta mientras carga. Un botón que cambia de posición justo antes de pulsarlo perjudica el uso aunque la captura final sea perfecta. Prueba una conexión menos favorable y una visita nueva, no solo una página que el navegador ya tiene guardada.

Las herramientas de rendimiento ayudan a localizar problemas, pero una puntuación no demuestra que el recorrido comercial funcione. Combina el informe con lectura, navegación y contacto. Tampoco necesitas prometer tiempos universales: el resultado depende de recursos, dispositivo y conexión.

Cuándo corregir y cuándo renovar

Una corrección puntual puede bastar si el contenido está bien organizado y el problema se concentra en un componente. Conviene plantear una renovación cuando la estructura impide adaptar servicios, muchos elementos dependen de medidas rígidas o la web ya no representa el negocio.

Antes de decidir, pide una lista de fallos y soluciones con prioridades. Incluye las páginas que reciben visitas y conserva sus direcciones cuando sea adecuado. Un rediseño móvil no debería romper enlaces existentes sin un plan de transición.

Si quieres comparar una alternativa, puedes preparar un prediseño con Clara. Revisa después el alcance de los planes y modificaciones. La propuesta visual ayuda a decidir, pero las pruebas de funcionamiento y la revisión de tus datos siguen formando parte del trabajo.

Preguntas al revisar el responsive