Primero el Móvil, De Verdad

Todas las agencias dicen que sus webs son adaptables. Lo que eso suele significar es que la maquetación no se rompe cuando la ventana del navegador es estrecha, comprobado arrastrando la esquina de un navegador de escritorio.

Eso no es lo mismo que funcionar bien en un móvil, y en ese hueco se pierden muchas consultas.

Por qué importa más de lo que sugiere el porcentaje

Alrededor de la mitad del tráfico de la mayoría de webs de empresa es móvil, y en las búsquedas locales bastante más. Pero el porcentaje bruto lo subestima, porque los visitantes móviles son sistemáticamente distintos: más probablemente nuevos, más probablemente llegados de una búsqueda, y más probablemente decidiendo ahora mismo.

Los visitantes de escritorio suelen ser gente que ya te conoce y viene a comprobar algo. Los móviles son a menudo a quienes intentas ganar.

Qué se le escapa a "adaptable"

La red. Un navegador de escritorio con el wifi de la oficina descarga una página de 3 MB al instante. La misma página con 4G en un aparcamiento tarda seis segundos. La maquetación no cambió en nada; la experiencia es completamente distinta. Prueba con limitación de velocidad, o con datos reales.

El dispositivo. El diseño y el desarrollo se hacen en portátiles rápidos. Tus visitantes van con Android de gama media de hace tres años, donde JavaScript tarda varias veces más en ejecutarse. Una página que a quien la construyó le parece instantánea puede ser visiblemente lenta para un usuario real.

Los pulgares. Un puntero de ratón es un píxel. Un pulgar es como un centímetro, impreciso, y muchas veces va unido a la mano que sujeta el móvil. Los objetivos táctiles deben medir al menos 44 por 44 píxeles con espacio alrededor, y los importantes van al alcance del pulgar — los dos tercios inferiores de la pantalla, no la esquina superior.

El contexto. Quien está en la calle a pleno sol con una mano libre no va a leer tu historia corporativa de tres párrafos. El texto gris de poco contraste que quedaba elegante en un monitor calibrado es invisible en exteriores.

Lo que más falla

Los formularios. El mayor asesino de conversión móvil. Tipos de entrada que faltan, así que el teclado muestra letras cuando alguien necesita números. Campos demasiado juntos. Etiquetas que desaparecen al empezar a escribir. Desplegables con cuarenta opciones. Autocompletado desactivado, así que la gente teclea su propia dirección.

Poner el tipo de entrada correcto es un atributo por campo, lleva diez minutos en una web entera y mejora de forma medible la finalización.

Teléfonos que no son enlaces. En un móvil, el número debería poder tocarse y llamar. Es un arreglo de una línea y falta en un número asombroso de webs.

Todo lo que depende del hover. En una pantalla táctil no existe el hover. Si un menú solo se abre al pasar por encima, o la información solo aparece así, no existe para la mitad de tus visitantes.

Elementos fijos que se comen la pantalla. Una cabecera pegajosa, un banner de cookies y una burbuja de chat pueden llevarse entre los tres un tercio de una pantalla pequeña. En horizontal puede ser casi toda.

Desplazamiento horizontal. Casi siempre un elemento con un ancho fijo mayor que la pantalla — una tabla, un bloque de código, una imagen. Hace que toda la página parezca rota.

Texto minúsculo. El texto de cuerpo por debajo de 16 píxeles provoca zoom, y el zoom rompe tu maquetación de formas que nunca probaste.

Cómo probar de verdad

El único método que funciona es poco lucido: usa tu propia web en tu propio móvil, con datos, en la calle.

No el emulador de dispositivos del navegador, que acierta el tamaño y falla la velocidad, el tacto y el sol. No con el wifi de la oficina.

Haz el recorrido entero. Encuentra la página desde una búsqueda. Lee la primera pantalla. Busca el precio. Rellena el formulario de contacto. Intenta llamar. Hazlo con una mano, de pie.

Casi todo el que hace esto en serio encuentra al menos tres cosas, y normalmente una es embarazosa.

Dos herramientas de apoyo que merecen la pena: Chrome DevTools con limitación de CPU y de red para una aproximación repetible, y el informe de Core Web Vitals de Search Console, que muestra lo que experimentan tus usuarios móviles reales y no lo que cree tu portátil.

Diseñar para ello en vez de adaptarse

La expresión "primero el móvil" significaba originalmente diseñar la pantalla pequeña primero y después ampliar, en lugar de diseñar ancho y apretar. Ese orden importa porque obliga a hacerse pronto la pregunta útil: ¿cuál es la única cosa que esta página tiene que hacer?

Una maquetación ancha esconde esa pregunta, porque hay sitio para todo. Una estrecha no. Las secciones que decides recortar en móvil suelen ser las que tampoco se estaban ganando su sitio en escritorio.

Ese es el beneficio infravalorado de tomarse el móvil en serio: mejora la versión de escritorio, porque te obliga a decidir qué importa.

Una lista breve

• Texto de 16 píxeles o más, con contraste mínimo de 4,5 a 1.
• Objetivos táctiles de al menos 44 por 44 píxeles, con espacio entre ellos.
• Tipos de entrada correctos y autocompletado en cada campo.
• Teléfonos y correos como enlaces.
• Nada que solo funcione al pasar el cursor.
• Sin desplazamiento horizontal a 320 píxeles de ancho.
• Imágenes dimensionadas para la pantalla en la que caen, en formato moderno.
• La acción principal al alcance del pulgar.
• Probado en un móvil real, con datos, por alguien que no lo construyó.

Nada de eso es caro. Todo es invisible cuando está bien y evidente cuando está mal — y quien se da cuenta es justo quien estaba a punto de convertirse en cliente.