Cómo probar tu sitio web en dispositivos móviles reales

Imagínese esto. Pasa semanas perfeccionando su sitio web. En su portátil, se ve impecable: imágenes nítidas, columnas ordenadas, botones que están exactamente donde los puso. Luego, un amigo le envía una captura de pantalla desde su teléfono, y se le revuelve el estómago. El titular está cortado por la mitad, una foto se sale del borde y el botón "Comprar ahora" está escondido detrás de un menú. El mismo sitio web, una experiencia completamente diferente, y usted no tenía ni idea.

Esa brecha entre cómo se ve un sitio en su imaginación y cómo se comporta en la mano de alguien es exactamente la razón por la que las pruebas reales en dispositivos móviles son importantes. En esta guía, aprenderá lo que realmente implican las pruebas de dispositivos, por qué mirar su sitio en un solo teléfono nunca es suficiente, cómo construir una rutina de pruebas simple sin ningún conocimiento técnico y las trampas prácticas que atrapan incluso a los propietarios de sitios más cuidadosos. El objetivo es simple: cuando una persona real abre su sitio en un teléfono real, simplemente funciona.

Por qué su portátil le está mintiendo

Aquí hay una verdad incómoda. La pantalla en la que construye su sitio web casi con certeza no es la pantalla que usan la mayoría de sus visitantes. La mayor parte del tráfico web mundial ahora proviene de teléfonos móviles, no de ordenadores de escritorio. Así que la versión de su sitio que usted mira todo el día es, para la mayoría de la gente, la excepción más que la regla.

Las pruebas en dispositivos móviles simplemente significan abrir su sitio web en teléfonos y tabletas reales, como lo harían sus visitantes, y comprobar que todo funciona. No una ventana de navegador encogida que simula ser un teléfono. Un dispositivo real, con una pantalla táctil real, una conexión de red real y todas las peculiaridades que conlleva. La diferencia parece pequeña. En la práctica, es la diferencia entre "se ve bien" y "está realmente bien".

Los emuladores son un comienzo, no un final

La mayoría de los creadores de sitios web y navegadores ofrecen una "vista responsiva" o vista previa de dispositivos. Arrastra un control deslizante, la página se estrecha y obtiene una idea aproximada de cómo podría verla un teléfono. Estas herramientas son realmente útiles para una comprobación rápida de cordura, y debe usarlas con frecuencia desde el principio. Pero son una impresión de un teléfono, no un teléfono.

Un emulador no puede sentir cuán grandes son los objetivos táctiles bajo un pulgar real. Rara vez le muestra cómo se comporta el sitio con una conexión irregular. No detectará cómo un teléfono antiguo tiene dificultades con una animación pesada, o cómo un teclado en particular aparece y desplaza su formulario. Los dispositivos reales revelan problemas reales. Ese es el punto.

Qué comprobar realmente en un teléfono

Cuando toma un teléfono para probar su sitio, ayuda tener una lista de verificación mental corta en lugar de simplemente desplazarse y esperar. Busca cuatro cosas generales: ¿puede la gente leerlo, puede la gente tocarlo, puede la gente hacer lo que vino a hacer y se siente rápido? Todo lo demás es detalle.

La legibilidad es lo primero. ¿El texto es lo suficientemente grande como para leer sin pellizcar y hacer zoom? ¿Los titulares se ajustan de forma ordenada, o las palabras largas se salen de la pantalla? ¿Las imágenes están dentro del diseño en lugar de sobresalir de él? Luego, pase al tacto. Los botones y enlaces deben ser lo suficientemente grandes como para tocarlos con un pulgar y espaciados para no pulsar el equivocado. Un enlace apretado contra otro enlace es una frustración diaria en el móvil.

La velocidad merece una atención especial en el móvil porque los teléfonos suelen utilizar datos móviles, no una conexión de banda ancha doméstica rápida. Una página que se carga en un instante en la conexión de su oficina puede ir lenta en un tren o en un café. Si desea profundizar en esto, nuestra guía sobre cómo mantener su sitio rápido en teléfonos explica las cosas específicas que ralentizan las páginas móviles y cómo solucionarlas.

La prueba de la tarea principal

De todas las comprobaciones que puede realizar, una es más importante que las demás: ¿puede un visitante completar realmente la tarea para la que existe su sitio? Si vende algo, ¿puede comprarlo desde un teléfono, desde el primer toque hasta la confirmación, sin quedarse atascado? Si acepta reservas o consultas, ¿puede rellenar el formulario y enviarlo? Es asombroso cuántos sitios se ven hermosos en el móvil pero fallan silenciosamente en el último paso, cuando un campo de pago es demasiado pequeño o un botón de confirmación se encuentra debajo de un banner fijo.

Así que adquiera el hábito de recorrer todo el proceso en un teléfono real, como si fuera un cliente nuevo que nunca ha visto el sitio. No se limite a mirar la página de inicio. Haga clic en un producto, agréguelo al carrito, inicie el proceso de pago, escriba en cada campo. La fricción que siente es la fricción que sienten sus clientes, excepto que ellos no serán tan pacientes como usted. Este tipo de comprobación de principio a fin encaja perfectamente junto con una auditoría de salud del sitio web más amplia, donde usted da un paso atrás y revisa todo el sitio en lugar de una página a la vez.

Un solo teléfono nunca es suficiente

Es tentador probar en su propio teléfono, ver que se ve genial y darlo por hecho. El problema es que su teléfono es solo una de las miles de combinaciones que existen. Las pantallas vienen en docenas de tamaños. Algunos teléfonos son altos y estrechos, otros anchos. Los dispositivos más antiguos ejecutan software más antiguo que maneja las características web modernas de manera diferente. Y los dos principales sistemas operativos móviles renderizan algunas cosas de maneras sutilmente diferentes.

No necesita un cajón lleno de teléfonos para manejar esto, pero sí necesita más de uno. Un enfoque práctico es probar en un conjunto pequeño y deliberadamente variado: un teléfono reciente y uno de hace unos años, e idealmente uno de cada sistema operativo principal. Pida prestado a familiares, amigos o colegas. El objetivo no es cubrir todos los dispositivos del mundo, lo cual es imposible, sino detectar las roturas obvias que un solo dispositivo le ocultaría.

Las pruebas en dispositivos reales son un pariente cercano de las pruebas entre navegadores, que comprueban que su sitio funciona en diferentes navegadores web en lugar de diferentes teléfonos. Ambas van de la mano, porque un teléfono es en realidad un tamaño de pantalla, un sistema operativo y un navegador, todo junto. Cubra ambos y muy poco se le escapará.

Pidiendo prestados los dispositivos del mundo

Si realmente no puede conseguir teléfonos variados, existen servicios de pago que le permiten controlar dispositivos reales de forma remota a través de su ordenador. Ve un teléfono real en un centro de datos, navega por su sitio y observa cómo se comporta. Para la mayoría de los sitios pequeños, esto es excesivo, pero vale la pena saber que existe si alguna vez lanza algo complejo y necesita una amplia cobertura rápidamente.

Incorpore las pruebas a su rutina

El error más grande que cometen los propietarios de sitios es tratar las pruebas móviles como una tarea de lanzamiento única. Revisa todo en un teléfono antes de salir en vivo, todo se ve genial y luego nunca vuelve a mirar. Meses después, ha agregado nuevas páginas, intercambiado imágenes, instalado un complemento y cambiado su menú, y cualquiera de esas cosas podría haber dañado silenciosamente la experiencia móvil.

La solución es convertir las pruebas de dispositivos en un hábito recurrente en lugar de un evento de lanzamiento. Cada vez que realice un cambio significativo, abra la página afectada en un teléfono antes de seguir adelante. Una vez al mes, realice un rápido recorrido completo por sus páginas clave en un par de dispositivos. Esto encaja naturalmente en un programa de mantenimiento del sitio web regular, donde las comprobaciones pequeñas y repetidas evitan grandes y costosas sorpresas. La misma lógica sustenta una buena lista de verificación de mantenimiento: poco y con frecuencia es mejor que raro y frenético.

Pruebe los cambios de forma segura primero

Cuando está a punto de implementar un gran rediseño o un cambio arriesgado, no querrá descubrir problemas móviles en su sitio en vivo frente a los clientes. Aquí es donde una copia de su sitio, separada de la pública, se vuelve invaluable. Puede realizar cambios allí, probarlos a fondo en teléfonos reales y solo publicarlos una vez que esté seguro. Nuestro artículo sobre sitios de staging explica cómo funciona esta red de seguridad en un lenguaje sencillo.

Diseñando con el móvil en mente desde el principio

Las pruebas detectan problemas, pero el problema más barato es el que nunca se crea. Si su sitio fue construido para adaptarse elegantemente a cualquier pantalla desde el principio, dedicará mucho menos tiempo a corregir cosas más tarde. Este enfoque, donde los diseños se adaptan y se reorganizan para ajustarse a cualquier dispositivo que los abra, es la base de un sitio moderno. Nuestra guía complementaria sobre diseño web responsivo explica la idea sin la jerga, y nuestro artículo sobre cómo hacer un sitio web amigable para móviles le brinda puntos de partida concretos.

Incluso con un sitio bien construido, el rendimiento puede disminuir con el tiempo a medida que se acumula el contenido. Mantener un ojo en el rendimiento del sitio web a largo plazo garantiza que la experiencia móvil rápida con la que lanzó no se degrade lentamente a una más lenta. Los teléfonos cambian, el contenido cambia y sus pruebas se mantienen al día con ambos.

Trampas comunes que pillan a la gente

Algunos problemas específicos aparecen una y otra vez, y conocerlos de antemano ahorra muchos quebraderos de cabeza. El primero es el elemento fijo, como una burbuja de chat o un banner de cookies, que se superpone a un botón que necesita. En una pantalla de escritorio espaciosa hay mucho espacio, pero en un teléfono todo está apilado muy junto, y estos elementos flotantes pueden cubrir justo lo que un visitante intenta tocar.

El segundo es el formulario que lucha contra el teclado. Cuando un visitante toca un campo, el teclado en pantalla aparece y reduce drásticamente el área visible. Si su formulario no fue diseñado para eso, los campos pueden desaparecer detrás del teclado o el botón de enviar puede salirse de la pantalla. El tercero es la imagen o el video de gran tamaño que se ve precioso pero tarda una eternidad en cargarse con datos móviles, poniendo a prueba la paciencia de su visitante y su consumo de datos al mismo tiempo.

La última trampa común es asumir que "funciona en mi teléfono" significa "funciona en todos los teléfonos". Su dispositivo está configurado de una manera particular, con un tamaño de texto particular y una configuración de accesibilidad particular. Alguien que haya ampliado el texto de su sistema para facilitar la lectura, por ejemplo, verá su sitio de manera bastante diferente. Probar en varios dispositivos y con un par de configuraciones es la única forma confiable de saberlo.

Poniéndolo todo junto

Las pruebas en dispositivos móviles no son glamurosas y nunca parecerán tan emocionantes como lanzar un diseño nuevo y brillante. Pero es uno de los hábitos de mayor valor y menor costo que un propietario de sitio puede desarrollar. Unos pocos teléfonos reales, una lista de verificación corta y un ritmo regular detectarán la gran mayoría de los problemas antes de que un solo cliente se encuentre con ellos.

Empiece poco a poco. Coja dos teléfonos diferentes hoy y revise su página más importante como si fuera un visitante primerizo. Anote lo que le parezca incómodo, arregle lo peor y ponga un recordatorio recurrente en su calendario para volver a hacerlo. Sus visitantes nunca se lo agradecerán, porque nunca se darán cuenta de los problemas que nunca ocurrieron. Ese silencio es exactamente lo que suena un sitio bien probado. Si prefiere dejar esto en manos de personas que lo hacen todos los días, siempre puede ponerse en contacto para obtener ayuda.

Preguntas frecuentes

Referencias

1. StatCounter. "Cuota de mercado de escritorio vs. móvil en todo el mundo." gs.statcounter.com.
2. Google. "Fundamentos web: Conceptos básicos del diseño web responsivo." web.dev.
3. Nielsen Norman Group. "Usabilidad móvil." nngroup.com.