2.5Responsive & vista previa móvil
Lo esencial en 30 segundos
- Un sitio responsive adapta su maquetación a la pantalla: tres columnas en el ordenador se apilan en el teléfono.
- Google indexa prioritariamente la versión móvil (mobile-first): el responsive no es opcional.
- Se comprueba con la vista previa por dispositivo del editor y después en un teléfono real: texto legible, botones espaciados, imágenes sin desbordarse.
Minicaso hilado — el taller en el teléfono
Samir consulta el sitio de Hassan en su teléfono: la galería se desborda, un título es inmenso y el botón de contacto está pegado al borde. Comprende que la mayoría de los visitantes del taller llegarán desde un móvil, a menudo a través de las redes sociales. Retoma los ajustes responsive antes de entregar.
Continuación del caso 2.4 — el inicio está compuesto, comprobamos en todas las pantallas.
1. Responsive y mobile-first
El diseño responsive adapta automáticamente la maquetación al tamaño de la pantalla: una sola versión del sitio, legible en ordenador, tableta y teléfono. Los buenos temas lo gestionan de forma nativa, pero los contenidos añadidos pueden romper esta adaptación: una imagen demasiado ancha, una tabla, una columna mal ajustada.
Google aplica el mobile-first: indexa primero la versión móvil del sitio. Un sitio difícil de leer en el teléfono queda por tanto penalizado, además de ahuyentar a los visitantes. Samir considera el móvil como la pantalla de referencia, no como una opción.
2. Comprobar y corregir
El editor de bloques ofrece una vista previa por dispositivo (ordenador, tableta, móvil) que muestra el resultado sin salir de WordPress. Algunos bloques ofrecen ajustes por dispositivo: ocultar un elemento en móvil, ajustar un tamaño de fuente o apilar columnas. Después se corrigen los defectos clásicos.
Los problemas móviles más frecuentes: texto demasiado pequeño, botones demasiado juntos, imágenes que se desbordan, columnas sin apilar y menú ilegible. Tras la vista previa, Samir prueba en un teléfono real o mediante las herramientas del navegador: la prueba real revela lo que la vista previa oculta.
🔎 Ejemplo concreto — Corregir la galería móvil (caso Samir)
Problema: galería a 3 columnas que se desborda en móvil.
1. Vista previa móvil: constatar el desbordamiento.
2. Ajustar la galería a 1 columna en móvil.
3. Reducir el título del héroe en pantalla pequeña.
4. Espaciar el botón de contacto.
→ Prueba en teléfono real: OK.Resultado: una página legible y cómoda en móvil.
Lección: la vista previa guía, el teléfono confirma.
Vocabulario de la sección
- Diseño responsive
- Adaptación automática de la maquetación al tamaño de la pantalla.
Ejemplo sencillo: las tres colecciones se apilan en el teléfono.
Lo que no es: fijar una anchura fija que se desborda.
Reflejo: un sitio, todas las pantallas.
- Mobile-first
- Google indexa y evalúa prioritariamente la versión móvil del sitio.
Ejemplo sencillo: un sitio ilegible en móvil pierde posicionamiento.
Lo que no es: probar solo en ordenador.
Reflejo: móvil = referencia.
- Vista previa por dispositivo
- Botones de ordenador/tableta/móvil del editor para ver el resultado.
Ejemplo sencillo: Samir cambia al modo móvil en el editor.
Lo que no es: publicar sin mirar nunca el móvil.
Reflejo: comprobar antes de publicar.
- Ajustes por dispositivo
- Opciones de bloque que permiten ajustar tamaño, columnas o visibilidad según la pantalla.
Ejemplo sencillo: ocultar un elemento decorativo en móvil.
Lo que no es: suprimir un contenido útil para todos.
Reflejo: adaptar, no amputar.
- Defectos móviles habituales
- Texto demasiado pequeño, botones pegados, imágenes desbordadas, columnas sin apilar, menú ilegible.
Ejemplo sencillo: un botón de contacto pegado al borde de la pantalla.
Lo que no es: ignorar estos defectos porque el ordenador es perfecto.
Reflejo: perseguir estos cinco defectos.
En la práctica — Comprobar y corregir la visualización móvil
- En el editor, cambia la vista previa al modo móvil.
- Persigue los defectos: legibilidad, botones, imágenes, columnas, menú.
- Corrige los tamaños y las columnas, y prueba el menú hamburguesa.
- Comprueba en un teléfono real o con las herramientas del navegador.
Guion listo para decir — tranquilizar sobre el móvil (20 s)
«La mayoría de sus visitantes llegarán desde un teléfono. Compruebo cada página en móvil: texto legible, botones accesibles, fotos que no se desbordan. Google mira primero esta versión, así que también es bueno para su visibilidad.»
Vincular el móvil a la experiencia del cliente y al posicionamiento.
Modelo copiar-pegar — check móvil
PÁGINA PROBADA: _______________
TEXTO LEGIBLE: sí / no
BOTONES SUFICIENTEMENTE GRANDES Y ESPACIADOS: sí / no
IMÁGENES SIN DESBORDAMIENTO: sí / no
COLUMNAS APILADAS: sí / no
MENÚ UTILIZABLE: sí / no
PRUEBA EN TELÉFONO REAL: sí / noGalería de fotos
Una columna en móvil, dos en tableta y tres en ordenador.
Tabla de tarifas
A menudo ilegible en móvil: preferir tarjetas apiladas.
Menú cargado
Reducir a las entradas esenciales y comprobar el menú hamburguesa.
Tienda
Probar el proceso de compra en el teléfono, no solo la página de inicio.
✓ Buenas prácticas
- Considerar el móvil como la pantalla de referencia.
- Utilizar la vista previa por dispositivo antes de publicar.
- Confirmar siempre en un teléfono real.
✗ Errores frecuentes
- Publicar sin mirar el móvil.
- Reducir todo el texto para que la página quepa.
- Desactivar el responsive del tema.
Puntos clave
- El responsive adapta la maquetación a cada pantalla.
- Google indexa primero la versión móvil.
- La vista previa por dispositivo guía las correcciones.
- La prueba en un teléfono real sigue siendo indispensable.
Reto 48h — aplícalo mañana
Abre tres páginas de tu sitio en un teléfono real: anota cada defecto (texto, botones, imágenes, columnas, menú) y corrige al menos tres. 20 minutos.
- Compruebo una página con la vista previa móvil.
- Corrijo los defectos responsive habituales.
- Pruebo en un teléfono real antes de entregar.
Preguntas frecuentes
Mi tema es responsive, ¿aun así debo comprobar?
Sí. El tema proporciona una base adaptable, pero los bloques, imágenes y tablas que añades pueden romper la visualización. Sigue siendo necesaria una comprobación por página.
¿Cómo probar sin teléfono?
Utiliza la vista previa móvil del editor y después las herramientas de desarrollo del navegador (F12 → modo dispositivo). Estas herramientas simulan el tamaño, pero una prueba real sigue siendo preferible para la legibilidad y el tacto.
¿El mobile-first afecta también al posicionamiento?
Sí: Google indexa principalmente la versión móvil. Un sitio lento o ilegible en el teléfono puede clasificarse peor, además de perder visitantes.
La página Colecciones se desborda en el teléfono. ¿Cuál es el reflejo correcto?