Validar · Criterio KATA
QA responsive y móvil
No se validan dispositivos: se validan anchos y estados. Un catálogo de móviles envejece; un ancho, no.
Cómo se ha elaborado esta guía
Qué estás leyendo
Son los anchos y estados que valida KATA. La elección concreta es criterio propio: otros equipos usan otros y también funciona.
Qué es criterio propio y qué es estándar externo
- Criterio propio: Los umbrales, el orden y la decisión de qué se considera superado son de KATA.
- Experiencia observada: Lo aprendido en proyectos propios. No se cuantifica ni se presenta como estadística.
- Estándar externo: Cuando se cita una norma o una guía de un tercero, se identifica su fuente oficial con entidad y fecha.
La metodología completa está en el Método KATA.
Respuesta directa
Validamos cinco anchos —360, 390, 768, 1440 y 1920 píxeles— y, en cada uno, cuatro estados: reposo, foco, contenido largo y contenido vacío.
La razón de elegir anchos y no modelos concretos es que un catálogo de dispositivos caduca cada temporada. Un ancho de 360 píxeles seguirá existiendo dentro de cinco años.
Qué mira cada ancho
| Ancho | Qué representa | Qué se detecta ahí |
|---|---|---|
| 360 | Móvil estrecho, el peor caso realista. | Desbordamiento horizontal, texto que no cabe, botones que se salen. |
| 390 | Móvil habitual. | Legibilidad real y alcance del pulgar. |
| 768 | Tableta en vertical o ventana estrecha. | El punto donde las rejillas suelen romperse. |
| 1440 | Portátil estándar. | La composición prevista. |
| 1920 | Monitor grande. | Líneas de texto demasiado largas y vacíos excesivos. |
Los cuatro estados que casi nadie prueba
- Reposo: cómo se ve al cargar. Es lo único que se suele mirar.
- Foco: recorrido completo con el tabulador, comprobando que el indicador se ve y que nada lo tapa.
- Contenido largo: un título de doce palabras, un nombre sin espacios, una tabla ancha. Es donde revientan las rejillas.
- Contenido vacío: qué se ve cuando una sección no tiene datos. Muchos diseños no lo contemplan y muestran un hueco raro.
El CTA flotante es reincidente
De todos los elementos que revisamos, el botón flotante de acción es el que más veces acaba tapando algo. En móvil ocupa la zona del pulgar, que es exactamente donde suele estar el último control de un formulario o la última opción de una lista.
Nuestro criterio operativo: el CTA flotante no puede tapar contenido ni controles, y no debe aparecer en la página que es su propio destino. Se comprueba en los cinco anchos, con la página en su estado de mayor densidad.
Dónde este criterio NO aplica
- Aplicaciones con interfaz muy dependiente del dispositivo —cámara, sensores, gestos— donde hay que probar con hardware real.
- Proyectos con requisito explícito de un dispositivo concreto, donde el catálogo sí importa.
- Contenido con visores incrustados de terceros, cuyo comportamiento responsive no controlamos.
Preguntas frecuentes
¿No hay que probar en móviles reales?
Conviene, y no sustituye a lo anterior. Los anchos detectan los fallos de composición; el dispositivo real detecta los de rendimiento y los de interacción táctil. Son dos cosas distintas y se hacen en momentos distintos.
¿Por qué 360 y no menos?
Porque es el peor caso realista con el que nos encontramos. Bajar más produce fallos que no le ocurren a nadie y consume atención que hace falta en otro sitio.
Siguiente decisión
Continúa con una pregunta concreta
Accesibilidad WCAG 2.2 AA
Una lectura relacionada dentro del mismo método.
Accesibilidad WCAG 2.2 AA →
Auditoría web integral
Qué podemos abordar contigo y cómo delimitamos el trabajo.
Auditoría web integral →
Ilustraciones conceptuales; no son fotografías de clientes.