¿Tu sitio web se ve mal en el móvil? Te ayudamos a dejarlo limpio y claro

Empieza por una medición de partida corta. Nada de teoría complicada: simplemente mira cómo se comporta tu web en varios móviles y tamaños de pantalla. Repasa esta lista:

• Abre tu web en dos móviles distintos como mínimo.
• Fíjate en el tamaño de letra y el interlineado. ¿Puedes leer tranquilo sin ampliar?
• Comprueba si los botones y los enlaces son lo bastante grandes para tocarlos con un dedo.
• Mira si aparece desplazamiento horizontal en cuanto mueves algo hacia el lado.
• Comprueba que el menú se ve con claridad y que se abre y se cierra de forma lógica.

Usa además las herramientas de desarrollo de tu navegador. Ahí ves tu web en distintas pantallas de móvil, desde un teléfono medio hasta uno grande. En una pantalla pequeña fíjate sobre todo en la legibilidad y el espacio entre líneas; en una media, en los títulos y los botones de cada sección; y en una grande, en si la parte de arriba no se queda demasiado vacía. Nada puede quedarse fuera de pantalla ni cortado.

En swap.coupons la primera versión estaba pensada sobre todo para ordenador. En el móvil los bloques y los campos de texto se descolocaban y los visitantes tenían que ampliar para leer los botones. Al hacer primero una lista de todas las páginas que se veían desordenadas, con capturas al lado, pudimos mejorar con puntería en vez de ir a tientas.

El motivo principal suele ser bastante sencillo: un diseño pensado para ordenador que se ha reducido sin más. El texto se queda en varias columnas cuando en una pantalla pequeña no hay sitio para eso. La solución es casi siempre un planteamiento tranquilo en una sola columna, con bloques claros y suficiente aire entre las partes.

• El contenido principal va en una columna, sin barra lateral.
• Cada sección tiene suficiente espacio vertical, para que los bloques no se peguen entre sí.
• No hace falta desplazamiento horizontal en las páginas principales.
• El texto y las imágenes se alternan para dar un ritmo tranquilo.
• Los títulos no se parten por sitios raros.

Desde el editor de bloques ajustas, por bloque de columnas, cómo se comporta en pantallas pequeñas. Asegúrate de que las columnas queden una debajo de otra en vez de una al lado de otra. Así evitas que el texto se apriete en tiras estrechas. Trabaja además con un orden reconocible: el mensaje central en una frase arriba, después la prueba o las ventajas, luego la explicación o los pasos, a continuación la prueba social y al final el contacto o una llamada a la acción clara. Quien baje rápido entenderá de forma intuitiva dónde empieza y dónde acaba una sección.

Para el texto corrido en móvil usa un tamaño mínimo de dieciséis a dieciocho puntos y deja el interlineado amplio, para que el texto respire. Mantén los párrafos cortos, para que la gente pueda repasar con la vista, y usa listas donde ayuden a entender algo rápido.

Unos buenos títulos ayudan tanto a los visitantes como a los buscadores. Trabaja con un título principal claro en la página, debajo títulos de sección y, si hace falta, subtítulos cortos para los detalles. Mantén los títulos concretos y descriptivos. Evita textos vagos que no digan nada del contenido que viene debajo.

Técnicamente esto se ajusta con una media query para pantallas de hasta 768 píxeles de ancho. Ahí pon el texto base en dieciséis píxeles con una altura de línea de 1,7 y reduce también tus títulos, para que un título principal no ocupe media pantalla.

En el móvil el menú es tu principal herramienta de navegación. Sigue estas reglas:

• Usa un icono de menú reconocible que no compita con otros botones de la cabecera.
• Haz que el menú entre con suavidad y cubre el fondo con una capa ligera.
• Asegúrate de que los visitantes vean con claridad dónde están dentro de la web.
• No enseñes más navegación principal de la necesaria. El resto puede ir en subpáginas.

La prueba más sencilla: coge el móvil con una mano y usa solo el pulgar. ¿Puedes abrir y cerrar el menú sin apuntar? ¿Puedes volver a la página anterior sin frustrarte? Esta prueba pequeña suele decir más que informes largos. Comprueba también que el menú se cierra en cuanto tocas fuera, que las páginas más importantes están arriba y que la forma de contactar está siempre a mano.

Haz de cada imagen importante una versión que funcione bien en una pantalla estrecha. Deja el motivo en el centro y elige un formato que encaje con el ancho de un móvil. Así evitas que se corten textos importantes o caras.

En móvil, mejor no pongas un vídeo de fondo pesado que arranque solo. Sustitúyelo por una imagen tranquila o un fotograma fijo y deja el vídeo detrás de un botón de reproducción, para que el visitante elija si lo pone.

Activa además la carga diferida, para que no tengan que cargarse todas las imágenes a la vez. Combínalo con una proporción fija para las imágenes importantes, con ancho y alto en el código, para que no haya saltos mientras se baja por la página. Esos saltos son justo lo que mide una de las Core Web Vitals, y por qué tu informe agrupa las páginas está en Core Web Vitals y cómo juzga Google tu velocidad. Dale a cada imagen una descripción alternativa corta y clara y un ancho máximo del cien por cien.

Agrupa los campos relacionados, por ejemplo datos personales, datos de empresa y mensaje. No enseñes campos vacíos de más. Menos campos se siente enseguida más tranquilo. Usa un color de contraste para tu botón principal y escribe un texto concreto que deje claro qué pasa después del clic.

• ¿Todos los campos obligatorios lo son de verdad?
• ¿Puedes rellenar bien todos los campos con el pulgar?
• ¿Hay una explicación clara en cada campo?
• ¿El botón de envío es lo bastante ancho?
• ¿La confirmación después de enviar se lee bien en el móvil?

La teoría está bien, pero el efecto solo se nota cuando lo aplicas a una web real. En proyectos como swap.coupons y en negocios de servicios locales veíamos siempre los mismos patrones:

• Demasiados elementos en la primera pantalla.
• Columnas que no se apilan bien en pantallas pequeñas.
• Bloques de texto demasiado anchos o demasiado pegados al borde.
• Un menú que se pone delante de capas y formularios.

Después de ordenar la maquetación, el texto, el menú y los formularios, la web se sentía en el móvil más tranquila y más de fiar. Los visitantes podían leerlo todo y tocar los botones sin ampliar. Eso dio más tiempo en la página y más formularios rellenados, sin añadir ni un anuncio. Y si tus clientes entran sobre todo desde tu zona, mira cómo aprovechar WhatsApp y tu Perfil de Empresa en Google como negocio de oficio.

Haz después tu propio plan de mejora: apunta por página importante los problemas más grandes, planifica acciones para maquetación, texto, menú, imágenes y formularios, y pon en tu calendario una fecha para volver a probar en móvil.

Verse bien en el móvil también ayuda directamente al SEO. Los buscadores se fijan en la experiencia de uso, en el tiempo en la página y en lo fácil que resulta bajar y hacer clic. Cierra por eso este recorrido con una comprobación corta en la que mires tanto la sensación como las mediciones.

• Puedes leer todo el contenido importante sin ampliar.
• No hay desplazamiento horizontal y nada se queda fuera de pantalla.
• El menú y los formularios funcionan tranquilos y predecibles.
• El informe móvil de una herramienta de prueba enseña una mejora clara.

¿Quieres que miremos contigo la experiencia móvil y la visibilidad de tu web? Mira nuestro servicio mejorar el SEO.

Hay una parte de este tema que se sale de lo estético y que conviene tener clara antes de tocar nada. Google rastrea e indexa las webs con su rastreador de teléfono. Lo que un visitante ve en el ordenador y no ve en el móvil no es una diferencia de presentación: para el buscador, en la práctica, ese contenido no está. Google lo explica en sus recomendaciones sobre la indexación orientada a móviles, consultado el 25-08-2026.

De ahí salen unas cuantas reglas que se saltan constantemente cuando alguien intenta que la web se vea más limpia en el teléfono:

• El mismo contenido en las dos versiones. Si acortas los textos en el móvil porque quedan largos, estás acortando lo que Google lee. Un texto plegado dentro de un acordeón sí sigue contando, porque sigue estando en el código; un texto que la plantilla no imprime en el móvil, no.
• Los mismos títulos y las mismas descripciones. Es fácil que una plantilla móvil se coma un encabezado para ganar espacio. Con eso pierdes justo la señal que dice de qué va la página.
• Los mismos datos estructurados. Si tus datos estructurados solo están en la plantilla de escritorio, tus resultados enriquecidos se apoyan en algo que el rastreador no ve.
• Las mismas imágenes, con su texto alternativo. Una imagen que en el móvil se oculta no aparece en la búsqueda de imágenes.
• Las mismas etiquetas de rastreo. Un noindex heredado en la plantilla móvil es de los errores más caros que existen, y no se nota mirando la web en el ordenador.

La comprobación es sencilla y no cuesta nada: abre la misma página en el ordenador y en el móvil, y compara qué texto hay en cada una. Si en el teléfono falta un párrafo entero, ya sabes por dónde empezar. Esto se cruza directamente con la parte técnica que recorremos en SEO técnico.

Hay dos síntomas que casi siempre van juntos y que tienen causas distintas. El primero: la web aparece entera pero en miniatura, con el texto ilegible, como si el teléfono te enseñara la versión de ordenador en pequeño. El segundo: la web se ve bien pero se puede arrastrar de lado, y siempre asoma una franja vacía a la derecha.

La primera se debe casi siempre a la etiqueta viewport. Si falta en la cabecera de la página, el navegador supone que tu web está hecha para una pantalla ancha y la encoge para que quepa. Es la primera línea de cualquier diseño adaptable y ninguna hoja de estilos la sustituye, tal como recoge la guía de diseño adaptable de Google, consultado el 25-08-2026. Ten cuidado también con la variante que bloquea el zoom: impedir que el visitante amplíe deja fuera a cualquiera que necesite letra grande, y no arregla ningún problema de maquetación.

La segunda casi siempre es un elemento más ancho que la pantalla. El desplazamiento lateral nunca es un misterio, siempre hay un culpable concreto, y suele estar en esta lista corta:

• Un bloque con un ancho fijo en píxeles que en un teléfono estrecho ya no cabe.
• Una imagen sin límite de anchura que se sale por el borde.
• Una tabla ancha, casi siempre una tabla de precios o de especificaciones, que no se puede plegar y necesita su propio desplazamiento dentro de un contenedor.
• Una palabra o una dirección larga sin ningún punto de corte, que estira su línea entera.
• Un elemento colocado fuera de la pantalla que sigue ocupando sitio, por ejemplo un menú que se esconde a la derecha en lugar de desaparecer.

Para encontrarlo no hace falta ninguna herramienta de pago. Reduce la ventana del navegador del ordenador hasta el ancho de un teléfono y ve estrechando más: el punto exacto en el que aparece la barra de abajo te dice a qué anchura se rompe, y casi siempre reconoces el bloque a simple vista. Ese es el mismo método con el que se ordena la maquetación en el paso 2.

En la mayoría de las webs de empresas pequeñas el teléfono descarga exactamente la misma imagen que el ordenador, y después la encoge. El visitante no lo ve, pero lo paga: se lleva un archivo pensado para una pantalla ancha por una conexión móvil, y la página tarda en aparecer justo cuando menos paciencia hay.

Se arregla en tres movimientos, y ninguno de los tres es rehacer la web:

• Sirve varias medidas del mismo archivo. El HTML permite ofrecer un juego de tamaños y dejar que el navegador elija el que le conviene según la pantalla. En WordPress esto ya lo hace el sistema al subir la imagen, siempre que la plantilla no fuerce la versión grande.
• Da a cada imagen su ancho y su alto. No es solo cuestión de velocidad: sin esas medidas el navegador no puede reservar el hueco y el texto salta hacia abajo cuando la imagen llega. Es la causa más repetida de una maquetación inestable, tal como describe la guía de Google sobre estabilidad visual, consultado el 25-08-2026.
• Recorta, no solo comprimas. Una foto apaisada de un equipo entero, vista en un teléfono, se convierte en una tira en la que no se distingue a nadie. Vale más un recorte distinto para el móvil que la misma imagen reducida hasta lo ilegible.

Un aviso sobre la carga diferida, porque se usa mal muy a menudo: diferir todas las imágenes suena bien y en la primera pantalla es contraproducente. La imagen de arriba es justo la que el visitante está esperando, y diferirla es retrasarla a propósito. Difiere lo que está más abajo, nunca la primera.

¿Por qué mi web se ve mal en el móvil si la plantilla es adaptable?

En la práctica suele deberse a bloques y ajustes sueltos puestos encima de la plantilla. Piensa en columnas extra, anchos fijos, márgenes propios o CSS a medida. Los constructores de páginas también pueden tener ajustes que no acompañan bien en pantallas pequeñas. O sea que no es solo la plantilla, sino la combinación de plantilla, bloques y contenido.

¿Tengo que encargar una web móvil aparte?

Para la mayoría de las empresas no hace falta. Un buen planteamiento adaptable con una estructura clara en una columna suele ser suficiente. Una web móvil aparte da más mantenimiento y contenido duplicado, y eso puede complicar el SEO. Mejor céntrate en un solo entorno que funcione bien en todas partes.

¿Una mala experiencia móvil afecta a mi posición en los buscadores?

Sí. Los buscadores miran cómo de bien funciona una web en dispositivos móviles. Si la gente se va enseguida o tiene que ampliar mucho, eso es una mala señal. Un móvil tranquilo y claro ayuda justamente a ganar visibilidad en las búsquedas que tienen que ver con tus servicios, y eso sí se nota en el teléfono.

¿Qué hago si mi constructor de páginas tiene pocas opciones móviles?

Empieza por los ajustes más sencillos, como el espacio entre bloques, el tamaño de letra y el apilado de columnas. A veces es más inteligente construir las páginas nuevas importantes con el editor de bloques, en vez de seguir forzando un constructor que no encaja con lo que quieres. Y si prefieres empezar de cero, la ruta completa está en cómo crear tu propia web.

¿Cada cuánto tengo que probar mi web en el móvil?

Prueba en cualquier caso después de cambios grandes, como una plantilla nueva, una página de destino nueva o un formulario largo. Además, una comprobación fija una vez por trimestre es buena idea. Usa entonces tanto móviles reales como una prueba en el navegador, para cubrir varios tamaños de pantalla.

Has visto cómo hacer una medición de partida corta, cómo pasar de una maquetación desordenada a una sola columna clara y cómo el texto, el menú, las imágenes y los formularios deciden juntos la experiencia en el móvil. Recorriendo estos pasos con calma conviertes una web que se ve mal en el móvil en un entorno agradable para los visitantes y que puntúa mejor en los buscadores.

Elige ahora la página más importante, rellena las listas y haz la primera ronda de mejoras. Después repites el mismo proceso en la siguiente página. Así construyes paso a paso una web que en el móvil es tan fuerte como en el ordenador. Más guías como esta las encuentras en nuestra base de conocimiento.