Diseño móvil-seguro

1) Principios de Mobile-safe

1. Thumb-first: zonas de acción - dentro del pulgar (navegación inferior, AMB/primario en la parte inferior derecha).
2. Touch-friendly: objetivos ≥ 40-48 px con campos; distancia ≥ 8-12 px.
3. Safe-area by design: tenemos en cuenta los cortes/zonas gestuales ('env (safe-area-inset-)').
4. La velocidad es más importante que la «belleza»: LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (p75).
5. Contención: mínimo de modales, mínimo de formas, máximo de autocompletados.
6. Redes y batería: tráfico económico, modo offline, retraídas competentes.

2) Malla, breakpoints y área segura

Breakpoints: ≤ 480 (mobile), 481-768 (tablet vertical), 769-1024 (tablet horizontal).
Contenedores con máx-width, tarjetas flexibles de 1-2 columnas.
Los paneles inferiores ≥ 56 px, stock bajo navegación gestual.

css
:root { --inset-b: env(safe-area-inset-bottom); --inset-t: env(safe-area-inset-top); }
.app { padding-bottom: calc(16px + var(--inset-b)); padding-top: calc(8px + var(--inset-t)); }

3) Texto, botones e interacciones

Texto: 16-18 px básico, interlínea 1. 4–1. 6, longitud de línea 40-70 caracteres.
Botones: altura 44-52 px, enfoque claro/activo/disabled; icono + texto, no sólo icono.
Los gestos siempre tienen una alternativa (botón/menú/punto caliente).
Las animaciones están en 'transformación/opacity' y respetan 'prefers-reduced-motion'.

4) Formularios, teclados y autocompletar

html
<input type="email" inputmode="email" autocomplete="email">
<input type="tel" inputmode="tel" autocomplete="tel">
<input type="number" inputmode="numeric" pattern="[0-9]">
<input type="text" autocomplete="one-time-code" />

Las máscaras son suaves (el formato se muestra, pero no rompemos la entrada).

5) Navegación y arquitectura de pantallas

Navegación inferior (hasta 5 puntos) + gesto «atrás».
Hasta 3-5 tapas antes de la acción objetivo.
Evite la «hamburguesa» para las secciones críticas; use tabs/segmented.
Estados de IU: 'loading/empty/error/success' - explícitos, con acciones y explicaciones.

6) Rendimiento y ahorro

Code-split y widgets perezosos; los gráficos/tarjetas son enviados «a pedido».
Los recursos críticos son 'preload', el resto son 'defer '/' lazy'.
Imágenes de AVIF/WebP + 'srcset/sizes', 'loading =' lazy '.
Fuentes: 1 WOFF2 variable, 'font-display: swap', preload sólo principal.
Almacenamiento en caché y fuera de línea a través de Service Worker (PWA), 'stale-while-revalidate'.

7) Redes, offline y retraídas

Amabilidad a 3G/alta latencia: límite de peticiones, batching, backoff jittered.
Pantalla offline con caché de datos críticos y cola de sincronización.
Respete el ahorro de datos: Client Hints/Save-Data → imágenes ligeras, sin auto-video.

js const saveData = navigator.connection?.saveData;
const slow = ['slow-2g','2g'].includes(navigator.connection?.effectiveType);
if (saveData          slow) enableLiteMode(); // менее тяжелые ресурсы

8) Disponibilidad (A11y) en mobile

Control completo del teclado/interruptores y enfoque legible.
Contraste ≥ WCAG AA, texto de alternativas ('alt',' aria-label ').
Grandes objetivos y pausa de animaciones; los gestos se duplican con los botones.
Para gráficos, un breve resumen de texto y una tabla de datos.

9) Tema oscuro, brillo y haptics

El tema oscuro no es sólo una inversión; compruebe los contrastes y los acentos de color.
Respete el tema del sistema ('prefers-color-scheme').
Haptics - dosificado (éxito/error), la capacidad de desactivar.

10) Privacidad, permisos y seguridad

Permisos sólo en el momento del valor (cámara → escaneo del documento).
La explicación de «por qué» y fallback sin permiso.
WebAuthn/biometría en lugar de contraseña; los gestores de contraseñas son compatibles.
Oculte los campos sensibles cuando se contraigan; Timeouts con una advertencia.

11) Notificaciones push y tareas de fondo

Escenarios de valor claros, no frecuentar; un reloj tranquilo.
One-tap unsubscribe y el centro de preferencias.
Los cincos de fondo son porciones pequeñas, con restricciones en la batería/red.

12) Imágenes, medios y adaptabilidad

Placeholder con dimensiones especificadas → CLS cero.
Vídeo predeterminado sin autoplay, con subtítulos y controles; bitrates adaptativos.
Iconos: vector (SVG) o sprite; no envíe conjuntos de 1 MB.

13) Snippets y ajustes

html
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#11131A">

css
.card { content-visibility: auto; contain-intrinsic-size: 600px 400px; }

css
@media (prefers-reduced-motion: reduce) { { animation: none!important; transition: none!important; } }

14) Plan de prueba (mínimo)

Dispositivos: 1 iOS + 1 Android (pantalla pequeña/mediana/grande), retrato/paisaje.
Redes: offline, 3G, 4G (throttle); habilitar Save-Data.
Disponibilidad: VoiceOver/TalkBack scripts, paso de teclado, contraste.
Perfomance: Web-Vitals (RUM), perfilador; listas grandes, entrada/diapositiva/gestos.
Sostenibilidad: rotación, reducción/retorno, asesinato del proceso → recuperación de la condición.
Seguridad: permisos, sesión de tiempo, ocultación de datos privados, biometría.

15) Métricas Mobile-safe

LCP/INP/CLS (p75, móvil-solo).
Time-to-Action (hasta el clic principal de destino).
Tap Accuracy (proporción de falsas tapas de elementos cercanos).
Crash-free sessions/ANR rate (apps/webview).
Data per session y Battery impact (fondo/primer plano).
Opt-in/opt-out cañones y engagement.

16) Anti-patrones

Botones 28-32 px, listas ajustadas, «mapas» sin campo - errores.
Texto 12-14 px sobre fondo gris claro.
Modales en la parte superior de los modales; cerrando sólo con un gesto.
Reproducción automática de vídeos/animaciones en 3G/Save-Data.
Funciones «sólo con gesto», sin botón/menú.
Safe-area no contabilizada → superposición de contenido con «flequillo» o panel de deslizamiento.

17) Lista de verificación de pantalla

• Objetivos ≥ 48 px, sangría ≥ 8-12 px
• Safe-area учтен (`viewport-fit=cover`, `env(safe-area-inset-)`)
• Texto ≥ 16 px, contraste AA, enfoque/activo visible
• Formularios: correctos 'type/inputmode/autocomplete', autocompleto funciona
• LCP ≤ 2. 5 c, INP ≤ 200 ms, CLS ≤ 0. 1 (móvil)
• Lazy-loading de bloques pesados, downsampling listas
• Pantalla offline, retrés con backoff, modo Save-Data
• Puchi y permisos - a petición, con explicación y rechazo
• Tema oscuro y reduced-motion soportados
• Pruebas: iOS/Android, retrato/paisaje, 3G/offline, paso SR

18) Plan de implementación (3 iteraciones)

• Cuadrícula y área segura, segmentos 48 px, tipos de teclado/autocompletar, Web-Vitales básico, imágenes lazy, tema oscuro.

• Code-split, content-visibility, offline + SW, Save-Data mode, retray/colas, status restore, A11y-audit.

• RUM-dashboards, análisis de tráfico/batería, haptics, scripts de permisos, mejora de listas (virtualización), juegos regulares-días de redes móviles.

19) Mini preguntas frecuentes

¿Necesitas un «menú móvil» separado?
Sí, pero la prioridad es la navegación inferior con 3-5 puntos; hamburguesa - para un secundario.

¿Cómo puedo reducir los errores en los botones?
Aumente los objetivos a 48 px, agregue campos alrededor, divida verticalmente, use haptic para «éxito/error».

¿Fuera de línea es obligatorio?
Para escenarios críticos, sí: caché, cola de acciones y consejos honestos al usuario.

Resultado

Mobile-safe design es una combinación de ergonomía de tacto, contabilidad de área segura, rendimiento, disponibilidad y resistencia a redes/baterías. Siga las listas de verificación, mida Web-Vitals en usuarios reales, respete la privacidad y la configuración del sistema, y su interfaz será fácil de usar y confiable en cualquier dispositivo móvil.