Diseño web móvil: las pruebas que separan una web usable de una que espanta
La mayoría de las visitas llegan desde un teléfono. Un diseño web móvil que solo se ha probado en el navegador del portátil pierde consultas cada día. Estas son las pruebas que conviene hacer antes de publicar.
Un diseño web móvil no es una versión reducida del escritorio: es la versión que ve la mayoría de tus visitantes. Si el botón de llamar queda debajo del pliegue, si el menú no se abre o si el texto se sale de la pantalla, el cliente no se queja: se marcha y compra en otro sitio que sí responde.
La buena noticia es que casi todos los problemas se detectan en diez minutos con un teléfono real. No hacen falta herramientas caras ni un rediseño: hacen falta cinco pruebas concretas y la costumbre de repetirlas cada vez que cambia algo.
Estas cinco comprobaciones cubren la mayoría de los fallos que llegan a producción:
- El primer pantallazo. Abre la home en un móvil de gama media. Antes de hacer scroll deberías ver de qué va el negocio y cómo contactar. Si solo hay un logo enorme y una foto, sobra medio pantallazo.
- Los pulgares. Los botones principales tienen que medir al menos 44 píxeles de alto y estar separados. Dos enlaces pegados se pulsan mal y el usuario acaba en la página equivocada.
- El formulario completo. Rellénalo en el móvil, con una mano. Si el teclado tapa el campo de envío, si no hay confirmación o si el teléfono autocompleta mal, lo has perdido.
- La legibilidad. Texto de 16 píxeles como mínimo, líneas cortas y contraste suficiente al sol. Un gris claro sobre blanco se lee en el despacho y desaparece en la calle.
- La navegación. Menú, migas y botón de volver tienen que funcionar sin zoom. Si necesitas ampliar para pulsar algo, el diseño falla.
Ninguna de estas pruebas requiere conocimientos técnicos. Requieren cinco minutos y un teléfono que no sea el tuyo.
El patrón se repite: se diseña en un monitor grande, se aprueba en una reunión con un portátil y se publica. El móvil se revisa el último día, con prisa, y solo la portada. Ahí nacen los problemas: un carrusel que se desborda, una tabla que empuja la página a lo ancho y un botón de WhatsApp que tapa el de enviar.
El coste no es solo estético. Google indexa la versión móvil de tu web (mobile-first indexing), así que un fallo ahí cuenta doble: pierdes al usuario y pierdes la señal de calidad que el buscador usa para ordenar resultados. Y en una pyme, cada consulta perdida es una venta que se va a la competencia.
La usabilidad y la velocidad van juntas. Un botón de 44 píxeles que aparece a los seis segundos es tan inútil como uno de 20 píxeles que aparece al instante. Antes de discutir colores, revisa el peso: imágenes sin comprimir, tipografías de tres familias y dos carruseles de JavaScript se notan mucho más en 4G que en fibra.
Si tu web tarda, el problema puede venir de más abajo. Revisa si el hosting web responde rápido y si el CMS está optimizado; un WordPress lento se sufre sobre todo en el móvil.
- Ocultar contenido en móvil. Si algo es importante, no lo escondas con
display: nonepara que quepa. Reordena o recorta, pero no lo elimines. - Menús de hamburguesa sin etiqueta. Tres rayas sin texto se entienden, pero un icono raro no. Añade siempre la palabra “Menú”.
- Popups que tapan la pantalla al entrar. El usuario aún no sabe qué vendes y ya le pides el correo. Espera a que lea algo.
- Tablas y precios sin adaptar. Una tabla de cuatro columnas en 372 píxeles es ilegible sin zoom. Conviértela en tarjetas.
- Enlaces de teléfono mal formateados.
tel:+34600000000funciona; un número con espacios y guiones puede fallar en algunos móviles. - Formularios con teclados equivocados. Un campo de email debe abrir el teclado de correo y uno de teléfono, el numérico. Son dos atributos y ahorran errores.
Estos fallos afectan también a quien navega con lector de pantalla o con el texto ampliado. Si quieres ir un paso más allá, la accesibilidad web básica se solapa casi entera con el buen diseño móvil.
No necesitas un dispositivo por modelo. Con tres perfiles y una herramienta de navegador cubres el 90 % de los casos:
- Un móvil pequeño y antiguo (720 px de ancho) para ver lo peor.
- Un móvil actual de gama media, que es el que usa la mayoría.
- Un tablet en vertical, donde muchas maquetaciones se rompen.
- Las herramientas de desarrollo del navegador para simular red lenta y comprobar el LCP.
Después, repite la prueba con el formulario de contacto: es el punto donde más conversiones se pierden y el que casi nadie revisa en móvil. Lo contamos en por qué pierdes clientes en el formulario.
No. Adaptar el ancho es el mínimo. Un diseño web móvil tiene que adaptar también el orden de los bloques, el tamaño de los botones, el teclado de los formularios y el peso de lo que se descarga.
Para la mayoría de pymes, no. Una app exige descarga, permisos y actualizaciones. Una web móvil bien hecha cubre el 95 % de los casos y no depende de tiendas de aplicaciones.
Cada vez que se toca el diseño o se añade un plugin, y una vez al trimestre sin excusa. Los fallos llegan con los cambios, no con el paso del tiempo.
Sí. Google usa la versión móvil para indexar y evalúa la experiencia en ese dispositivo. Un móvil lento o difícil de usar arrastra la posición aunque el escritorio esté impecable.