Diseño responsivo más allá de "mobile first"
Lo que mobile first no resuelve solo
Un diseño pensado solo para mobile, escalado hacia arriba, a menudo desperdicia el espacio disponible en pantallas grandes. Esta escalada simple suele producir pantallas de escritorio con demasiado espacio en blanco o columnas de texto incomodamente anchas, porque el layout nunca se pensó realmente para ese contexto.
Cómo diseño los puntos intermedios
Reviso explícitamente cómo se ve el diseño en tablet y en pantallas de escritorio angostas, no solo en los extremos más fáciles de resolver. Esta revisión explícita evita depender de que el navegador "resuelva solo" el punto intermedio con las reglas pensadas para los extremos, que rara vez producen un resultado bien equilibrado.
El punto medio es donde más se nota el descuido
Es fácil diseñar bien los dos extremos y descuidar el rango intermedio, que en la práctica cubre una porción grande del tráfico real. Reviso ese rango con la misma atención que los tamaños más comunes. Este descuido es tan común que se ha vuelto casi un estándar implícito — lo cual significa que revisarlo con cuidado es una de las formas más fáciles de diferenciarse con calidad real.
Qué hacer esta semana
Abre tu sitio en un ancho de tablet (768px) y en un laptop angosto (1280px). Son los tamaños que más se olvidan revisar. Anota cualquier elemento que se vea apretado o mal alineado en esos anchos específicos — son ajustes rápidos de resolver una vez identificados, pero fáciles de pasar por alto si nunca se prueban.
Una herramienta simple para no olvidar estos tamaños
Guardo una lista fija de 5 anchos de prueba (mobile, tablet vertical, tablet horizontal, laptop angosto, escritorio grande) y reviso cada diseño nuevo en esos 5 puntos antes de aprobarlo, en lugar de confiar en la memoria. Esta lista fija convierte una revisión que dependía del criterio de cada diseñador en un checklist objetivo que cualquiera del equipo puede aplicar de la misma forma.
