# Frank's baseline UX — agreed 06-08-2026

The nine rules every page passes BEFORE Frank sees it, drawn from his corrections on the eR School pages. The full standard (with his working-style, conciseness and cookbook blocks) lives in memory `feedback-franks-standard.md`.

1. Baseline UX is assumed, never requested: the whole card is clickable, hover is visible, links work.
2. Compact beats wide: cards a third of the page, not half — but real air between a title and its content.
3. Numbers are almost never the message: small, grey, or absent. Nobody cares that there are 164 of something.
4. Color carries meaning (one hue per section family); decoration carries nothing — no separator lines that add nothing.
5. One name per notion, once per page: no brand appearing twice, no two sections with near-same titles, sibling pages visible in the navigation, internal menus labeled as menus, meta information a whisper.
6. Titles precise, not evocative: "Good UI/UX", never "What makes a good service".
7. Missing content shown honestly: a tab saying "to be filled later" beats a hidden gap.
8. The builder's eye is the linter, not Frank's: this list plus the five-second cover-the-text test run before any page opens in his browser.
9. Look-choices come as three options rendered in the real page, one marked recommended.

## 10. Una página que llena la pantalla del teléfono se pega a los cuatro lados y nunca se mide en `vh` (27-08-2026)

**Lo que pasó.** Cuatro noches con el mismo defecto en la portada ABC: al abrirla en el teléfono se veía perfecta, y uno o dos segundos después asomaba una tira oscura abajo, el contenido subía y el título se metía detrás de la hora. Se arreglaron tres síntomas reales, uno por noche, y volvía.

**La causa.** Safari cambia el alto visible **dos veces al abrir**: su barra de traducción aparece y se va sola, y después se esconde la de direcciones. `100vh` mide de más, `100svh` mide con la barra puesta, `100dvh` sigue a la barra **pero no al vuelo**: durante el salto el bloque conserva el alto anterior, deja ver el fondo por abajo y ese hueco mueve la página.

**La regla.** En la consulta de teléfono, el bloque que debe llenar la pantalla va `position: fixed; inset: 0`, que mide siempre la pantalla del instante. Si debajo no hay nada, se bloquea la rodada con `html, body { height: 100%; overflow: hidden }`. Y la imagen de fondo se sale un dedo por arriba y por abajo (56 px bastan), para que en el instante del salto lo que asome sea la propia imagen y no el color del fondo.

**Cómo se comprueba, y sin esto no está hecho.** Un navegador de escritorio nunca reproduce el salto: allí `svh`, `dvh` y la pantalla valen lo mismo. Se comprueba de dos maneras: **(1)** el bloque tiene que estar `fixed` (la vara de la página lo mide y reprueba si no); **(2)** cambiando el alto de la ventana SIN recargar, de 640 a 720, el bloque tiene que pasar a 720 en el mismo momento, con el título entero.

**Dónde vive el guardián**: `3 - Projects/abc-colombia/valentina/la-vara-pagina.py`, criterio 46 en `9 - System/ui-ux/motion/criteria.md`.