Layout y espaciado
Cuánto tiene que aguantar una composición antes de romperse, y por qué el espaciado es una escala y no una decisión por componente.
Cómo leer esta guía
Citado, Verificado, Decisión Sensa. Sin marca = trabajo pendiente.
El suelo medible: reflow
(Verificado — WCAG 1.4.10, nivel AA) El contenido debe presentarse sin pérdida de información ni de funcionalidad, y sin obligar a hacer scroll en dos direcciones, a un ancho equivalente a 320 px CSS (contenido de scroll vertical) o a una altura de 256 px CSS (contenido de scroll horizontal). La excepción son las partes que necesitan dos dimensiones para funcionar o para significar algo: una tabla de datos, un mapa, un pentagrama.
320 px no es un capricho de móvil pequeño: sale de una página a 1280 px con un zoom del 400 %, que es como navega mucha gente con baja visión. Si tu layout aguanta 320, aguanta ese caso.
Decisión Sensa. 320 px es el suelo real, no 375. Y el scroll horizontal, cuando es inevitable (una tabla ancha, un bloque de código), va contenido dentro de su propia caja con overflow-x: auto, nunca en el <body>.
Adaptarse no es tener breakpoints
(Citado — Apple) El diseño tiene que responder a cambios de tamaño y orientación, y Apple lo plantea como comportamiento continuo, no como saltos: hay que respetar las áreas seguras y los márgenes del sistema, y probar en todos los tamaños de ventana, incluidas las multitarea de iPad.
Decisión Sensa. Primero se intenta que la composición fluya sola —grid con auto-fit/minmax, clamp() para tamaños— y sólo se añade un breakpoint cuando la estructura tiene que cambiar de verdad, no cuando algo se ve un poco apretado. Un breakpoint es una decisión de diseño; ajustar un padding no lo es.
Espaciado
El espaciado es donde se nota si hay sistema o improvisación. Si cada componente elige su propio valor, la interfaz se ve desordenada aunque cada pieza esté bien resuelta.
Decisión Sensa. Escala fija basada en 4 px: 4, 8, 12, 16, 24, 32, 48, 64. Nada intermedio. Un padding: 13px es un error de revisión. La regla que más ordena una composición: lo relacionado va más junto que lo no relacionado — el espacio entre un label y su campo debe ser claramente menor que el que hay entre dos campos distintos. Cuando algo "se ve raro" y no sabes por qué, casi siempre es esto invertido.
Zonas de toque y áreas muertas
(Citado — Rauno) «Interactive elements in a vertical or horizontal list should have no dead areas» — si hay una lista de elementos pulsables, no debe haber huecos entre ellos donde el clic no haga nada. Y «decorative elements should disable pointer-events to not hijack events».
El tamaño mínimo de zona pulsable está cubierto en Accesibilidad, con la cifra de WCAG 2.5.8.
Anti-patrones
overflow-x: hiddenen el<body>para tapar un desbordamiento. Oculta el síntoma, mata elposition: stickyde dentro y deja contenido inalcanzable a 320 px.- Alturas fijas en píxeles en cualquier caja con texto.
- Valores de espaciado fuera de la escala.
- Breakpoints por cada dispositivo concreto que existe.
- Espaciado uniforme entre todo: sin agrupación no hay jerarquía.
- Grids que a 320 px obligan a scroll lateral.
Checklist de revisión
- ¿Funciona a 320 px de ancho sin scroll horizontal en el body?
- ¿El contenido ancho (tablas, código, diagramas) hace scroll en su propia caja?
- ¿Todos los espaciados salen de la escala?
- ¿Lo relacionado está más junto que lo no relacionado?
- ¿Hay áreas muertas entre elementos pulsables de una lista?
- ¿Aguanta un texto tres veces más largo (traducción, nombre real de cliente)?
- ¿Se respetan las áreas seguras en móvil?
Lo que falta
- No hay fuente archivada sobre sistemas de grid (columnas, gutters). El grid 2x de Carbon sería la candidata.
- Densidad: no está tratada, y en producto con mucho dato es la decisión de layout que más pesa.