Checklist de pruebas de web móvil: 30 comprobaciones antes del lanzamiento

Una prueba de web móvil comprueba que el sitio se lee, se usa y carga rápido en el móvil antes de que los visitantes reales encuentren los problemas. El checklist de abajo reúne 30 comprobaciones en siete grupos. La mayoría lleva segundos en una vista móvil en el ordenador; unas pocas necesitan un móvil real. Repásalo antes de cada lanzamiento o rediseño, y guarda la versión corta para las publicaciones habituales.

Antes de empezar: prepara los dispositivos de prueba

Necesitas tres tipos de vista:

1. Una vista móvil rápida en el ordenador para revisar el diseño en muchas páginas: el modo dispositivo de Chrome DevTools o una extensión como Mobile View Extension. Las diferencias están en extensión de simulador móvil o DevTools.
2. Motores móviles reales (y los navegadores de escritorio del checklist de pruebas cross browser): Safari de iOS con el Simulator de Xcode o un iPhone real, y Chrome en Android. Mira probar en iPhone y probar en Android.
3. Al menos un móvil real de gama media para el táctil, el teclado y la velocidad.

Prueba como mínimo estos anchos (qué significan se explica en qué es el tamaño del viewport): 360 px, 390–402 px y 430–440 px en vertical, más un tamaño en horizontal y otro de tablet.

1. Diseño y legibilidad

1. Ninguna página tiene scroll horizontal. Si una página se desplaza de lado, busca el elemento más ancho que la pantalla; los anchos fijos, las URL largas y las tablas anchas son los culpables habituales.
2. El texto principal mide al menos 16 px y las líneas no son más anchas que la pantalla.
3. Los titulares saltan de línea limpiamente, sin palabras sueltas en una línea.
4. Las imágenes se ajustan a la pantalla y mantienen la proporción.
5. El orden del contenido tiene sentido cuando las columnas se apilan. Lo más importante no queda debajo de una barra lateral larga.
6. En horizontal, nada queda oculto tras el notch o el indicador de inicio (revisa env(safe-area-inset-*) si usas diseños a sangre).
7. La página tiene una etiqueta meta viewport correcta. Sin ella, los móviles muestran una página de escritorio alejada. Más en la etiqueta meta viewport explicada.

2. Navegación

8. El menú se abre y se cierra con un toque, y se cierra al elegir un enlace.
9. Todos los elementos del menú, incluidos los anidados, son accesibles sin hover.
10. El logo o un enlace a inicio aparece en todas las páginas.
11. En horizontal, las cabeceras fijas no ocupan más que una pequeña parte de la altura de la pantalla.
12. El botón atrás (y el gesto atrás de Android) vuelve al sitio esperado, también en aplicaciones de una sola página.

3. Táctil e interacción

13. Las zonas táctiles son lo bastante grandes y están separadas. WCAG 2.2 fija un mínimo de 24 × 24 píxeles CSS; las guías de diseño de Apple y Google recomiendan unos 44–48 px.
14. Los carruseles y sliders funcionan con swipe y tienen controles visibles.
15. Los pop-ups y avisos de cookies se cierran con facilidad y no tapan toda la pantalla al llegar.
16. Los enlaces del texto se distinguen sin hover.

4. Formularios

17. Cada campo muestra el teclado adecuado: type="email", type="tel", inputmode="numeric".
18. Los campos usan texto de al menos 16 px, para que Safari en iOS no haga zoom al enfocar.
19. El teclado en pantalla no tapa el campo en el que se escribe ni el botón de enviar.
20. El autocompletado funciona para nombre, email, dirección y pago (atributos autocomplete).
21. Los mensajes de error aparecen junto al campo y se ven sin hacer scroll.

5. Multimedia y recursos

22. Las imágenes se sirven a tamaños adecuados a la pantalla (srcset y sizes), no como archivos de escritorio reducidos.
23. Los vídeos no se reproducen solos con sonido y se ven dentro de la página en iPhone cuando así se quiere (playsinline).
24. Los iconos y logos se ven nítidos en pantallas de alta densidad (SVG o imágenes 2x/3x).

6. Velocidad

25. El contenido principal aparece rápido con una conexión limitada. Revisa los datos de campo en PageSpeed Insights y haz una prueba de laboratorio; la guía del test de velocidad web en móvil explica ambas cosas.
26. El diseño no salta mientras carga la página (Cumulative Layout Shift).
27. La página responde rápido al primer toque (Interaction to Next Paint).

7. SEO y accesibilidad en móvil

28. La página móvil tiene el mismo contenido principal, titulares, datos estructurados y metaetiquetas que la de escritorio. Google indexa la versión móvil.
29. El texto se puede ampliar al 200 % sin romper el diseño, y la página se puede usar con el lector de pantalla en al menos un móvil.
30. Una auditoría de Lighthouse en modo móvil no muestra problemas críticos de accesibilidad ni de SEO. Pasos: auditoría móvil con Lighthouse en Chrome.

La versión corta para cada publicación

Nadie hace 30 comprobaciones en cada despliegue. Para las publicaciones rutinarias:

• abre las páginas modificadas en vista móvil a 360 px y 430 px
• comprueba que no haya scroll lateral ni menús rotos
• envía un formulario desde un móvil real
• echa un vistazo al informe de velocidad de la landing principal

Lleva unos diez minutos y detecta la mayoría de las regresiones.

Errores frecuentes en las pruebas móviles

• Probar solo redimensionando la ventana. Cambia el ancho, pero no el user agent, la densidad de píxeles ni el tipo de entrada, y algunos sitios sirven otra página a los móviles reales. Detalles: cómo ver la versión móvil de una web en el ordenador.
• Probar solo en un móvil de gama alta reciente. La mayoría de los visitantes tiene dispositivos más lentos que los de quien desarrolla.
• Ignorar el horizontal y las tablets. Muchos diseños fallan en torno a 768–1024 px; mira cómo ver una web como en un iPad.
• Probar solo páginas sin sesión iniciada. Las áreas de cliente y el proceso de compra suelen recibir la menor atención en móvil.

Preguntas frecuentes

¿Cómo pruebo mi web en móvil sin teléfono?

Usa una vista móvil en Chrome de escritorio para el diseño, el Simulator de Xcode para Safari de iPhone en un Mac y el emulador de Android Studio para Android. Deja un móvil real para la comprobación final de los flujos clave.

¿Cuál es el problema más común de las webs en móvil?

Contenido más ancho que la pantalla, que provoca scroll lateral. Suele deberse a un elemento de ancho fijo, una tabla ancha o una imagen sin max-width: 100%.

¿Existe una prueba móvil oficial de Google?

Google retiró su prueba de optimización para móviles en diciembre de 2023 y ahora remite a Lighthouse. Hay alternativas en alternativas a la prueba de optimización para móviles de Google.