Web · 12 min de lectura
¿Qué es una web compatible con móvil? Diseño adaptable y pruebas en el móvil
La mayoría de tus clientes abre tu web desde el móvil. Una web cuyo texto no se lee, cuyos botones no se tocan bien o que carga lenta en el teléfono pierde clientes, por bien diseñada que esté.
En resumen
- Una web compatible con móvil muestra el mismo contenido en el teléfono, la tableta y la computadora, reacomodado al tamaño de la pantalla para que se lea y se use con facilidad.
- El método más común hoy es el diseño adaptable: una sola web, una sola dirección y una maquetación que cambia según el ancho de la pantalla.
- Google usa sobre todo la versión móvil de las páginas para indexarlas y posicionarlas; lo que falta en el móvil también falta en la búsqueda.
- Navegar en un teléfono real, usar el modo de dispositivo del navegador y revisar el resultado móvil de PageSpeed Insights es un buen comienzo para probar el móvil.
- Los temas de Heyşirket son adaptables; puedes ver tu web en vista de teléfono y tableta en la pantalla Personalizar, y en el plan Professional seguir tu puntuación de velocidad en el móvil en SEO › Velocidad.
Cuando abres tu web en la computadora, todo está en su lugar. Un cliente, sin embargo, abre la misma página en el teléfono: el menú no cabe en la pantalla, el texto es diminuto y al tocar el número de teléfono no pasa nada. Dos segundos después vuelve atrás y pasa al siguiente resultado de búsqueda.
En este artículo explicamos qué es una web compatible con móvil, las reglas básicas del diseño adaptable, una prueba de web en móvil paso a paso y los arreglos para los problemas que más se ven en los teléfonos. En la última parte detallamos cómo se resuelve la compatibilidad con móvil en las webs hechas con Heyşirket.
La buena noticia: casi nunca hace falta rehacer la web para que sea compatible con móvil. La mayoría de los problemas viene de saltarse algunas reglas y se detectan con una prueba de media hora. Repasar la checklist de este artículo una vez te da una imagen clara de cómo se comporta tu web de verdad en un teléfono.
Parte 1 · Definición ¿Qué es una web compatible con móvil?
Una web compatible con móvil muestra el mismo contenido en el teléfono, la tableta y la computadora, reacomodado al tamaño de la pantalla. En el teléfono el texto se lee sin hacer zoom, los botones se tocan fácilmente con el dedo, la página no se desplaza hacia los lados y las imágenes caben en la pantalla.
Hay tres formas de lograrlo. Casi todas las webs nuevas de hoy usan la primera:
| Enfoque | Cómo funciona | Estado |
|---|---|---|
| Diseño adaptable | Una web y una dirección; la maquetación cambia con el ancho de la pantalla | El enfoque común y recomendado hoy |
| Servicio dinámico | Misma dirección, pero el servidor envía HTML distinto según el dispositivo | Difícil de mantener, poco usado |
| Web móvil separada | Una dirección aparte, como m.dominio.com | Enfoque antiguo; el contenido se actualiza en dos sitios |
En el diseño adaptable, el contenido se escribe una sola vez. Una lista de servicios en tres columnas en la computadora pasa a dos en la tableta y a una en el teléfono. En pantallas estrechas, el menú se pliega detrás de un botón. Así actualizas en un solo lugar y ningún dispositivo se queda sin contenido.
Parte 2 · Por qué ¿Por qué importa tanto la compatibilidad con móvil?
La primera razón es el cliente. Quien busca un negocio local suele estar en movimiento con el teléfono en la mano: buscando una dirección, un horario, un número de teléfono o una cita. Si no llega a eso en dos toques desde el teléfono, se va a otra web.
La segunda razón es la búsqueda. Google usa sobre todo la versión móvil de las páginas al indexarlas y posicionarlas. Un texto o una sección que se ve en la computadora pero está oculto en el móvil también puede ser ignorado en gran medida por Google. La compatibilidad con móvil ya no es un truco aparte para posicionarse, sino un requisito básico de una web.
La tercera razón es la velocidad. Los teléfonos suelen trabajar con una conexión más lenta que las computadoras. Una página que abre rápido en el escritorio puede hacer esperar segundos a la gente en el teléfono por culpa de imágenes pesadas. Explicamos en detalle cómo se mide la velocidad en cómo medir la velocidad de una web.
Parte 3 · Reglas ¿Cuáles son las reglas básicas del diseño adaptable?
No necesitas escribir código para hacer una web adaptable, pero incluso con un tema lista conviene comprobar si cumple las reglas de abajo.
Checklist de diseño adaptable
- La página tiene una etiqueta viewport que ajusta el ancho de la pantalla al dispositivo.
- La maquetación se basa en una cuadrícula flexible y no en anchos fijos en píxeles; la página no se desplaza hacia los lados.
- El texto principal se lee en el teléfono sin hacer zoom; unos 16 px es un buen punto de partida.
- Los botones y enlaces son lo bastante grandes para tocarlos cómodamente con el dedo y no están apretados entre sí.
- Las imágenes se cargan en distintos tamaños según el ancho de la pantalla; no se envía una foto gigante al teléfono.
- Las imágenes tienen ancho y alto definidos; el contenido no salta mientras la página carga.
- Al tocar el número de teléfono se llama; al tocar el correo se abre la app de correo.
- Los formularios abren el teclado adecuado (números para un campo de teléfono, un teclado con @ para el correo).
- No hay ventanas emergentes que cubran la pantalla al cargar y sean difíciles de cerrar.
Contacto y formularios en el teléfono
Quien entra desde un teléfono normalmente quiere hacer algo: llamar, pedir cómo llegar, pedir una cita o un presupuesto. Por eso los datos de contacto no deben estar como texto simple al final de la página, sino como enlaces que se pueden tocar. Cuando el teléfono se da como enlace tel: y el correo como enlace mailto:, un solo toque inicia una llamada o un correo.
Los formularios son donde más abandonan los visitantes desde el teléfono. Deja los campos al mínimo: nombre, teléfono y un mensaje corto bastan para la mayoría de negocios. Quita los campos opcionales, muestra los mensajes de error justo debajo del campo y deja visible el botón de enviar mientras el teclado está abierto. Abrir el teclado numérico en un campo de teléfono parece un detalle pequeño, pero facilita mucho llenar el formulario.
Parte 4 · Pruebas ¿Cómo se prueba una web en el móvil?
La antigua herramienta “Prueba de compatibilidad con móviles” de Google y el informe “Usabilidad móvil” de Search Console se retiraron en diciembre de 2023. Hoy no hay un botón único de “compatible / no compatible” para probar el móvil; combinas algunos métodos sencillos.
Prueba en el móvil en cinco pasos
Navega en un teléfono real
Abre tu web en tu propio teléfono y recorre la portada, una página de servicio, la página de contacto y la del formulario. Abre el menú, toca el número de teléfono y llena y envía el formulario una vez.
Repite en otro dispositivo
Si puedes, revisa también en un teléfono pequeño y en una tableta. La mayoría de los problemas aparecen en la pantalla más pequeña.
Usa el modo de dispositivo del navegador
En una computadora con Chrome, haz clic derecho › Inspeccionar para abrir las herramientas de desarrollo y pulsa el icono de dispositivo. Puedes probar distintos anchos de teléfono en una misma pantalla.
Revisa el resultado móvil en PageSpeed Insights
Prueba tu página en pagespeed.web.dev y mira primero la pestaña Móvil. Además de la puntuación de rendimiento, las secciones de accesibilidad y buenas prácticas también listan problemas como textos pequeños o botones demasiado juntos.
Vigila Search Console
El informe Core Web Vitals de Search Console muestra, agrupados por página, los problemas de velocidad y de saltos de diseño que sufren los usuarios reales en el teléfono.
Para detalles de medición y cómo leer las puntuaciones, consulta las explicaciones de Core Web Vitals en web.dev y nuestro artículo cómo medir la velocidad de una web.
Parte 5 · Problemas Los problemas más comunes en el teléfono y cómo arreglarlos
| Problema | Síntoma | Arreglo |
|---|---|---|
| La página se desplaza hacia los lados | Se puede arrastrar a izquierda y derecha con el dedo | Haz flexibles las tablas, imágenes o incrustaciones de ancho fijo |
| Texto demasiado pequeño | Hay que hacer zoom para leer | Aumenta el tamaño del texto principal y acorta las líneas |
| Botones demasiado juntos | Se toca un enlace equivocado | Haz los botones más grandes y deja espacio entre ellos |
| Carga lenta | Las imágenes llegan tarde, puntuación baja | Reduce el peso de las fotos y quita código y fuentes innecesarios |
| El contenido salta | El texto se desplaza hacia abajo mientras lees | Da a las imágenes y a los espacios de anuncios medidas fijas |
| Una ventana emergente cubre la pantalla | No se encuentra el botón de cerrar | Haz la ventana más pequeña o no la muestres en teléfonos |
| Tocar el número no hace nada | El número es texto simple | Pon el número como enlace tel: |
Parte 6 · En la práctica ¿Es compatible con móvil una web hecha con Heyşirket?
Sí. Los temas de Heyşirket son adaptables y la parte técnica de las reglas de arriba viene incluida en el tema: las páginas se publican con etiqueta viewport, las cuadrículas pasan a una sola columna en pantallas estrechas, y el menú se pliega detrás de un botón de menú de al menos 44 píxeles. Las imágenes se sirven en distintos tamaños según el ancho de la pantalla, y siempre se escriben su ancho y su alto; la primera imagen de la página carga con prioridad y las demás cargan al acercarse a la pantalla.
- Vista previa del teléfono: en Diseño › Personalizar, encima de la vista previa, cambias entre Escritorio, Tableta y Teléfono. Puedes ver cómo queda cada cambio en el teléfono antes de publicar.
- Tamaño de imagen: se recomienda no subir a la biblioteca de medios fotos de más de 2000 píxeles; para las imágenes antiguas, Crear tamaños para las imágenes actuales crea versiones más pequeñas.
- Ajustes por dispositivo (Professional): puedes ocultar secciones de la portada en un dispositivo concreto y cambiar los ajustes de los componentes en el constructor de páginas para el dispositivo que muestra la vista previa.
- Informe de velocidad (Professional): en SEO › Velocidad, ves las puntuaciones de rendimiento, accesibilidad, buenas prácticas y SEO para teléfono y computadora, los valores de Core Web Vitals, el historial de puntuaciones y las mejoras que más sumarían.
Guía paso a paso en el panel: Ayuda › Informe de velocidad y Core Web Vitals. Para usar la pantalla de personalización, mira diseñar tu web con el personalizador, y para ver todas las herramientas de SEO según el plan, la página de herramientas de SEO.
El tema aporta la compatibilidad con móvil; el contenido es tuyo. Los párrafos largos que cuestan leer en el teléfono, las fotos subidas muy grandes o una ventana emergente que cubre la pantalla estropean la experiencia móvil incluso con un buen tema. Añade una revisión regular de tu web en el teléfono a tu rutina de mantenimiento de web.
¿Son lo mismo una web compatible con móvil y el diseño adaptable?
El diseño adaptable es la forma más común de lograr la compatibilidad con móvil. Una web compatible con móvil es el resultado (una web fácil de usar en el teléfono); el diseño adaptable es la manera de llegar ahí, con una sola web y una maquetación que cambia con el ancho de la pantalla.
¿Cómo pruebo si mi web es compatible con móvil?
Navega la web en un teléfono real, usa el modo de dispositivo de las herramientas de desarrollo del navegador y revisa el resultado móvil en PageSpeed Insights. Como la antigua Prueba de compatibilidad con móviles de Google se retiró en diciembre de 2023, estos métodos se usan juntos.
¿La compatibilidad con móvil afecta al posicionamiento en Google?
Sí. Google usa sobre todo la versión móvil al indexar y posicionar las webs. El contenido que parece faltar en el teléfono se trata como si faltara en la búsqueda, y las páginas lentas y difíciles de usar en el móvil quedan atrás en la experiencia de usuario.
¿Conviene hacer una web móvil separada (con dirección m.)?
Normalmente no. Una web móvil separada obliga a actualizar el contenido en dos sitios y aumenta el riesgo de errores. Una web adaptable con una sola dirección es el enfoque recomendado hoy.
¿Cobra Heyşirket algo extra por la vista móvil?
No. Todos los temas son adaptables y tu web se ve bien en el teléfono también en el plan Starter gratuito. La vista previa del teléfono en la pantalla Personalizar está en todos los planes; ocultar secciones por dispositivo y el informe de velocidad son del plan Professional.
Abre tu web en vista de teléfono Cambia a la vista de Teléfono en la pantalla Personalizar y revisa el menú, el texto y los botones antes de publicar. Abrir Personalizar
Autor: Equipo editorial de Heyşirket