Para saber si tu web es responsive, ábrela desde tu móvil y mira si se lee sin hacer zoom y sin desplazarte hacia los lados. La forma más completa es pegar su dirección en un comprobador responsive gratuito y verla a la vez en móvil, tablet, portátil y escritorio. En esta guía te explicamos 5 formas de comprobarlo, cómo reconocer las señales de que tu web no se adapta y qué hacer si es tu caso.
Respuesta rápida: tu web probablemente no es responsive si…
- En el móvil tienes que ampliar con los dedos para poder leer.
- Al deslizar aparece un desplazamiento lateral y se corta parte de la página.
- El menú, los botones o las fotos se salen de la pantalla o quedan pegados.
Si quieres comprobarlo en 30 segundos, pega tu dirección en el comprobador de diseño responsive de HMGia. Es gratis y no pide registro.
Qué es una web responsive
Una web responsive es la que cambia su diseño según el dispositivo en el que se abre: una columna en el móvil, dos en la tablet y más en el ordenador, con el menú, las imágenes y los textos reajustados para que todo se vea y se pueda usar sin esfuerzo. Lo explica bien Google en su guía fundamentos del diseño web responsive, y la documentación de Mozilla lo resume en su artículo sobre diseño responsive.
Técnicamente se apoya en dos cosas: media queries (reglas de estilo que cambian según el ancho de pantalla) y la etiqueta viewport en la cabecera de la página:
<meta name="viewport" content="width=device-width, initial-scale=1">
Sin esa etiqueta, el móvil muestra la web como si fuera una pantalla de ordenador, reducida, y todo se ve diminuto. No es lo mismo ser responsive que ser adaptativa: la adaptativa usa varios diseños fijos para tamaños concretos, mientras que la responsive se reajusta de forma fluida a cualquier ancho. Hoy lo habitual es la responsive.
Por qué importa a tu negocio en Palma de Mallorca
- Google valora tu versión móvil. Google indexa y posiciona a partir de la versión móvil de tu web (lo que llama indexación mobile-first). Si en el móvil falta contenido o se ve peor, tu posicionamiento puede salir perjudicado.
- Te buscan desde el móvil. Quien busca "panadería cerca de mí" o "peluquería en Palma" lo hace casi siempre con el teléfono en la mano, en la calle o de camino. Si entra en tu web y se ve mal, vuelve atrás y entra en la del vecino.
- Los visitantes de la isla también te buscan con el móvil. Un turista que busca dónde comer o a quién llamar no va a pelearse con una web descuadrada.
- Tu ficha y tus reseñas llevan a tu web. Si consigues más reseñas en Google (te contamos cómo conseguir más reseñas en Google en Palma de Mallorca), esos clientes acabarán en tu página: que no se pierdan al llegar.
Para saber cuánto de tu tráfico llega desde el móvil, mira el informe de dispositivos en tu herramienta de estadísticas. Si el porcentaje es alto, ser responsive no es un detalle, es lo primero que ve la mayoría de tus clientes. Es una de las acciones de la lista de 10 cosas que todo comercio de Mallorca debería hacer para no quedarse atrás.
5 formas de comprobar si tu web es responsive
Las ordenamos de más rápida a más técnica. Lo ideal es combinar al menos dos.
Una web responsive reorganiza el mismo contenido en cada pantalla: tres columnas en el portátil, dos en la tablet y una en el móvil.
1. Ábrela en tu propio móvil (la prueba real)
Es la comprobación más fiable y la que primero conviene hacer. Abre tu web en tu móvil y, si puedes, en otro con un sistema distinto (iPhone y Android) o en otro navegador. Revisa:
- Que se lee sin ampliar y no aparece desplazamiento lateral.
- Que el menú se abre y todos los enlaces funcionan.
- Que puedes pulsar los botones sin tocar el de al lado.
- Que el teléfono y la dirección se pueden pulsar para llamar o abrir el mapa.
- Que se ve bien girando el móvil en horizontal.
- Y que carga con rapidez usando los datos del móvil y no solo el wifi.
2. Usa un comprobador responsive online gratuito
Un comprobador te enseña tu web en varios dispositivos a la vez, sin salir del ordenador. En HMGia hemos creado el nuestro: el comprobador de diseño responsive es gratis, no pide registro y funciona así:
- Pegas la dirección de tu web.
- La ves en móvil (390×844), tablet (768×1024), portátil (1366×768) y escritorio (1920×1080) al mismo tiempo.
- Si quieres, añades un tamaño personalizado o giras cualquier pantalla a horizontal.
La web se carga directamente en tu navegador: no pasa por servidores de HMGia. Una limitación honesta: si tu web tiene activada una cabecera de seguridad que impide que se muestre dentro de otras páginas, aparecerá en blanco. No significa que esté mal; en ese caso usa las opciones 1, 4 o 5.
Existen también otras herramientas gratuitas, como Responsinator, Am I Responsive?, Screenfly de QuirkTools o la aplicación de escritorio Responsively App. Comprueba que siguen activas antes de usarlas, porque algunas han cambiado con los años y alguna puede pedir registro.
3. Cambia el tamaño de la ventana del navegador
Sin instalar nada: abre tu web en el ordenador y arrastra el borde de la ventana para hacerla más estrecha. Si la web es responsive, el diseño se reorganiza al llegar a ciertos anchos: el menú se convierte en un icono, las columnas se apilan y las imágenes se reducen. Si en cambio aparece un desplazamiento lateral o se corta el contenido, no se adapta.
4. Activa el modo dispositivo de tu navegador
Chrome, Edge y Firefox incluyen un simulador integrado. En Chrome pulsa F12 y activa el icono de dispositivo (o Ctrl+Shift+M), tal como explica su documentación sobre el modo dispositivo de Chrome DevTools. En Firefox, el atajo es el mismo en Windows y funciona con el modo de diseño adaptable. Puedes elegir móviles concretos, girar la pantalla y simular una conexión lenta. Eso sí, es una aproximación y no sustituye a probar en un móvil real.
5. Pasa un análisis con Lighthouse o PageSpeed Insights
Estas herramientas de Google no te enseñan la web en distintos tamaños, pero detectan problemas que afectan al móvil: textos demasiado pequeños, botones muy juntos, imágenes pesadas o una carga lenta. PageSpeed Insights analiza tu dirección y te da recomendaciones, y Lighthouse está integrado en las herramientas de desarrollo de Chrome y revisa rendimiento, accesibilidad y SEO.
Si buscabas la antigua prueba de optimización para móviles de Google (Mobile-Friendly Test), ya no existe: Google la retiró a finales de 2023 y recomienda Lighthouse como alternativa.
10 señales de que tu web no se adapta al móvil
Si ves alguna de estas, tu web necesita trabajo. Esto es lo que ocurre y cómo suele arreglarse:
| Señal | Qué ocurre | Cómo se arregla |
|---|---|---|
| Tienes que ampliar para leer | Falta la etiqueta viewport o el texto es muy pequeño | Añadir viewport y usar tamaños de letra legibles |
| Hay desplazamiento lateral | Algún elemento tiene un ancho fijo (imágenes, tablas, vídeos) | Hacer que se ajusten al ancho disponible |
| El menú se corta o no se abre | Es el menú de escritorio, sin versión móvil | Menú plegable de tipo hamburguesa |
| Los botones están pegados | Las zonas táctiles son demasiado pequeñas | Botones y enlaces más grandes y separados |
| Las imágenes se salen o se deforman | No se adaptan al ancho de la pantalla | Imágenes flexibles que mantienen su proporción |
| Las columnas se ven apretadas | No se apilan en pantallas estrechas | Reorganizar en una sola columna en el móvil |
| El formulario se amplía solo al escribir | Los campos son pequeños o de ancho fijo | Campos de ancho completo y con letra suficiente |
| Una ventana emergente tapa toda la página | El aviso no está pensado para pantallas pequeñas | Reducir o rediseñar el aviso para el móvil |
| Tarda en cargar con datos móviles | Imágenes y archivos demasiado pesados | Comprimir imágenes y optimizar la carga |
| El teléfono y la dirección no se pueden pulsar | Son texto normal, no enlaces | Enlaces para llamar y para abrir el mapa |
Qué hacer si tu web no es responsive
Tienes dos caminos, según el estado de tu web:
- Arreglos puntuales. Si la web es reciente y solo falla algo concreto (una imagen, un menú, el tamaño de un botón), suele bastar con corregirlo.
- Rehacerla. Si es antigua, está hecha con una plantilla que no se adapta o fallan muchas de las señales de la tabla, normalmente compensa más construir una web nueva que remendar la vieja.
En HMGia diseñamos páginas web a medida en Palma de Mallorca, pensadas desde el móvil y revisadas contigo antes de publicarlas: no pagas hasta verla terminada. Puedes ver cómo trabajamos y pedir presupuesto sin compromiso.
Preguntas frecuentes sobre webs responsive
¿Qué diferencia hay entre una web responsive y una web adaptativa?
Una web responsive tiene un diseño fluido que se reajusta de forma continua al ancho de cualquier pantalla. Una web adaptativa usa varios diseños fijos preparados para tamaños concretos y elige uno según el dispositivo. Hoy lo habitual y lo más recomendable es el diseño responsive.
¿Google penaliza una web que no es responsive?
Google usa la versión móvil de tu web para indexarla y posicionarla (indexación mobile-first). No tener versión móvil no impide aparecer en Google, pero Google recomienda tenerla, y si la versión móvil es peor o le falta contenido, tu posicionamiento y la experiencia de tus visitas pueden salir perjudicados.
¿Un simulador de dispositivos sustituye a probar mi web en un móvil real?
No. Los simuladores, incluidos los del navegador, son una aproximación: sirven para detectar problemas de diseño rápidamente, pero no reproducen todo lo que ocurre en un teléfono real, como la velocidad de la conexión móvil o el comportamiento del teclado. Lo ideal es combinar un simulador con una prueba en tu propio móvil.
¿Puedo comprobar una web que todavía no está publicada?
Sí, siempre que tenga una dirección accesible desde internet, por ejemplo un entorno de pruebas. Las páginas que solo existen en tu propio ordenador (localhost) no se pueden cargar en un comprobador online como el comprobador de HMGia.
¿Por qué mi web aparece en blanco en un comprobador responsive?
Algunas webs tienen activada una cabecera de seguridad (X-Frame-Options o Content-Security-Policy) que impide que se muestren dentro de otra página. No significa que tu web esté mal. En ese caso, pruébala desde tu móvil o con el modo dispositivo de las herramientas del navegador.
¿Es lo mismo una web responsive que una web mobile friendly?
No exactamente. Responsive es una técnica de diseño para que la web se adapte a cualquier pantalla; mobile friendly significa que la experiencia en el móvil es cómoda. Una web puede ser responsive y aun así incómoda en el móvil, por ejemplo con botones muy pequeños o una carga lenta.
En resumen
Comprobar si tu web es responsive lleva menos de cinco minutos: ábrela en tu móvil, pásala por un comprobador y revisa las señales de la tabla. Si falla algo, no esperes a que lo noten tus clientes. Empieza ahora mismo con el comprobador responsive gratuito de HMGia y, si ves que necesitas una web que de verdad funcione en el móvil, cuéntanos tu caso.
Fuentes y más información
- Responsive web design basics, web.dev (Google).
- Diseño responsive, MDN Web Docs (Mozilla).
- Indexación mobile-first, Google Search Central.
- Simular dispositivos móviles con el modo dispositivo, Chrome for Developers.
- Modo de diseño adaptable de Firefox, Firefox Source Docs.
- Introducción a Lighthouse y PageSpeed Insights, Google.
- Google retira el Mobile-Friendly Test, Search Engine Land.