Diseño responsive: por qué «se ve en móvil» no significa que funcione

Existe la idea de que una web es responsive cuando no se sale de la pantalla. Se comprueba arrastrando la esquina del navegador hasta que todo se apila, se ve que nada desborda y se da por bueno.Sin embargo, esa prueba solo mide una cosa: que el ancho se adapta. No mide si alguien puede usar tu web con una mano, en la calle, con datos móviles y prisa.Adaptar no es funcionar.

La cronología de un responsive que no lo era

Este recorrido lo he visto tantas veces que ya sé en qué semana aparece cada síntoma.Semana 1. La maqueta se aprueba en una pantalla de 27 pulgadas. Todo el mundo asiente.Semana 4. Se publica. Alguien la abre en su móvil y comenta que «se ve bien», mirando por encima y con Wi-Fi.Mes 2. Llega la primera queja: un cliente no encuentra el teléfono. Estaba en el menú desplegable, que en móvil queda tras dos toques.Mes 5. El formulario recibe menos consultas de las esperadas. Nadie lo relaciona con que en pantallas pequeñas los campos quedan por debajo de tres pantallas de scroll.Mes 9. Se contrata publicidad para compensar. El tráfico sube, las consultas no.Diseñar en el portátil y publicar para móvil es preparar el partido en tu campo y jugarlo siempre fuera. El rival no cambia: cambia el terreno, y el terreno decide.

Los cuatro criterios que sí importan

Estos cuatro criterios separan un diseño web responsive de uno que solo se ha estrechado:

• Breakpoints por contenido, no por dispositivo. Los puntos de ruptura se ponen donde el diseño empieza a romperse, no en los anchos de moda. Perseguir modelos concretos es una carrera perdida.
• Áreas táctiles reales. Un botón necesita una zona de toque cómoda y separación suficiente de sus vecinos. Dos enlaces juntos en una lista son dos errores de pulsación esperando a ocurrir.
• Imágenes servidas por tamaño. Con srcset y sizes, un móvil descarga la versión pequeña y no la de escritorio reescalada. Sin eso, tu usuario paga tu diseño con sus datos.
• Estabilidad al cargar. Todo elemento necesita su espacio reservado antes de aparecer, o el contenido salta y el dedo pulsa donde no quería. El umbral exacto está en qué mide cada Core Web Vital y cómo corregirlo.

Mobile first no es empezar por el móvil

El diseño mobile first se cuenta como una cuestión de orden: primero la pantalla pequeña, después la grande. El orden es lo de menos.Lo que cambia de verdad es qué decides cuando solo te caben tres cosas. En una pantalla de 27 pulgadas caben el reclamo, el vídeo, los seis servicios, las tres insignias de confianza y el aviso de cookies sin que nadie tenga que elegir. En 390 píxeles de ancho eliges por narices, y esa elección es el diseño.Por eso una web responsive bien planteada suele salir mejor también en escritorio: alguien tuvo que decidir qué era imprescindible.El error habitual es el contrario. Se diseña el sitio web responsive en grande, se aprueba en grande, y cuando toca reducir nadie quiere quitar nada, así que se apila todo en vertical. El resultado es un diseño web adaptable sobre el papel y una columna de seis metros en la mano del usuario.Si tienes que apilar nueve bloques para que quepa, el problema no era el ancho.

Responsive o adaptive: cuál es la diferencia

Se usan como sinónimos y no lo son. Un diseño responsive es fluido: el mismo HTML se reorganiza de forma continua según el ancho disponible. Un diseño adaptive (adaptativo) trabaja con un puñado de maquetas fijas y sirve la que corresponde a cada rango de pantalla.El adaptive da más control sobre cada tamaño, pero obliga a mantener varias versiones y deja huecos entre un rango y otro. El responsive cuesta más de pensar al principio y se mantiene una sola vez. Para la web de un negocio, responsive casi siempre. El adaptive solo tiene sentido en interfaces muy concretas, como un panel que se usa en dos o tres dispositivos conocidos.

Tres pruebas que puedes hacer hoy

No hacen falta herramientas de pago ni conocimientos técnicos.Abre tu web en tu móvil, con datos y sin Wi-Fi, de pie y en la calle. Intenta llegar al teléfono o al formulario con una sola mano. Cuenta los toques.Gira el teléfono. Muchos diseños se rompen en horizontal porque nadie lo probó.Y entra desde un enlace, no desde la portada. La mitad de tus visitas aterrizan en una página interior, y esa página también tiene que funcionar sola.

Lo que no es diseño responsive

Tres cosas que se venden como diseño web móvil y no lo son.Una web de escritorio con el zoom permitido: se ve entera y no se puede usar. Una versión móvil separada en otra URL, que duplica el mantenimiento y parte las señales. Y ocultar bloques en móvil para que quepa, que no es adaptar: es amputar, y suele caerle encima justo a lo que vendes.Cero contenidos escondidos para que cuadre.La otra mitad del problema no es técnica: es qué encuentra el usuario cuando por fin puede tocar la pantalla, y eso lo tienes en las fricciones que frenan una conversión. Y si la estructura de la página no se sostiene en pantalla pequeña, tampoco lo hará para quien la rastrea: es lo mismo que cuento en la jerarquía que leen los buscadores.En negocios pequeños esto explica más pérdidas de las que parece, como se ve en los errores que dejan una web de pyme sin consultas y en lo que cuesta cada segundo de espera en un móvil.Yo no doy por bueno un diseño hasta abrirlo en un teléfono real, con datos móviles y sujetándolo con una mano. El emulador del navegador sirve para maquetar, no para decidir. Y si en esa prueba algo cuesta, se cambia antes de publicar, aunque ya estuviera aprobado en la pantalla grande. Ese es el orden que sigo en todos mis proyectos.