Diseño responsive: por qué sigue importando y qué se mide de verdad
Adaptarse no es «que quepa en el móvil». Es un rango continuo de anchuras, densidades y proporciones, y hay cuatro medidas concretas que deciden si tu sitio funciona en el aparato de quien te visita.
Por Javier Tenjo, Desarrollador full stack
En esta página
«¿Es responsive?» es de las preguntas que más nos hacen y de las que peor información dan. Casi siempre significa «¿se ve bien en el móvil?», y la respuesta honesta es que el móvil no existe: existen ventanas de cualquier anchura, en pantallas de cualquier densidad, con proporciones que van del cuadrado al ultrapanorámico.
Diseñar para eso no es hacer dos versiones. Es aceptar que no sabes el tamaño y construir en consecuencia.
La medida que manda no es el dispositivo
Lo primero que conviene desmontar: una web no se adapta a tu monitor, se adapta al hueco donde cabe la página. Ese hueco es más pequeño que la pantalla —descuenta pestañas, barra de direcciones, barras de desplazamiento— y cambia cuando alguien reparte la pantalla entre dos ventanas, cosa que en escritorio pasa continuamente.
Por eso las decisiones se toman sobre la anchura de la ventana y no sobre categorías de aparato. Si quieres ver la diferencia en tu propio equipo, esta página te enseña las dos cifras a la vez: la resolución de tu pantalla y el espacio real que le queda a la web. En un monitor grande la segunda suele ser menos de la mitad de la primera.
Los puntos de ruptura salen del contenido
La forma antigua de trabajar era elegir tres anchuras —móvil, tableta, escritorio— y maquetar para ellas. Envejeció mal, porque cada año aparecen aparatos que caen justo en medio.
La forma que aguanta es al revés: estiras el diseño hasta que algo se rompe, y ahí pones el punto de ruptura. Un titular que parte mal, una tabla que se sale, tres columnas que se quedan demasiado estrechas para leerse. El corte lo decide el contenido, no un catálogo de dispositivos.
A eso se ha sumado algo que cambia el trabajo de verdad: las consultas de contenedor. Permiten que un componente reaccione al ancho del hueco donde está, no al de la ventana. Una tarjeta puede saber que está en una columna estrecha aunque el navegador esté a pantalla completa, que es exactamente el problema que las consultas de medios nunca supieron resolver.
La densidad: por qué tu imagen se ve borrosa en un móvil nuevo
Las pantallas modernas dibujan dos o tres puntos físicos por cada píxel con el que mide una web. Es lo que hace que el texto se vea nítido — y lo que hace que una imagen subida al tamaño exacto en que se muestra se vea blanda.
La regla práctica es subir las imágenes al doble del tamaño en que se ven, y no más. La densidad de tu propia pantalla también aparece en la página de resolución; el resto —formatos, pesos y medidas por tipo de imagen— está en la guía de imágenes.
La relación de aspecto: el detalle que evita que la página salte
Cuando un navegador encuentra una imagen o un vídeo sin dimensiones declaradas, no sabe cuánto espacio reservar. Pinta el texto, descarga la imagen y empuja todo hacia abajo cuando por fin sabe cuánto ocupa. Ese salto tiene nombre —desplazamiento acumulado del diseño— es una de las tres métricas que Google mide como experiencia de página, y es la causa de que a veces pulses el botón equivocado.
La solución es declarar la proporción por adelantado, con aspect-ratio o con los atributos de ancho y alto, para que el hueco esté reservado desde el primer pintado. Para calcular esa proporción o para redimensionar sin deformar, tenemos la calculadora de relación de aspecto, que además da el CSS listo para pegar.
Y una recomendación de encuadre: en una retícula de productos o de artículos, fuerza la misma proporción en todas las imágenes. Una cuadrícula donde cada tarjeta tiene una altura distinta se lee como un descuido, aunque cada foto por separado sea perfecta.
Lo que se olvida más a menudo
El dedo mide 44 píxeles. Cualquier cosa pulsable por debajo de ese tamaño se falla. En escritorio pasa desapercibido porque el ratón es preciso; en el móvil es la diferencia entre comprar y cerrar la pestaña.
La tipografía puede fluir. Con clamp() el texto crece con la ventana entre un mínimo y un máximo, sin necesidad de un punto de ruptura por cada tamaño.
El alto también existe. Un móvil apaisado tiene menos de 400 píxeles de alto útil. Un héroe que ocupa toda la pantalla, ahí, oculta todo lo demás.
Zoom al 200 %. Una persona con baja visión amplía, y ampliar equivale a estrechar la ventana. Un diseño que aguanta el móvil aguanta el zoom: son el mismo problema.
¿Cómo se comprueba sin adivinar?
Tres cosas, en este orden:
- Arrastra el borde de la ventana despacio, de ancho a estrecho, y mira dónde se rompe algo. Es más útil que saltar entre tamaños predefinidos, porque los fallos casi nunca están en las anchuras redondas.
- Usa el modo dispositivo de las herramientas de desarrollo para lo que la ventana no puede simular: puntero táctil, densidad de píxeles y agente de usuario.
- Ábrelo en un móvil de verdad, con datos móviles y con una mano. Ahí aparecen los problemas que ninguna simulación enseña: el peso real, el brillo del sol y la prisa.
Un sitio adaptable no es uno que tenga versión móvil. Es uno que no asume nada sobre la pantalla de quien llega — y eso, además de ser lo correcto, es lo único que sigue funcionando cuando salga el próximo formato de aparato.