≡En resumen
- Una web responsive puede adaptarse y aun así ser difícil de usar en algún ancho intermedio.
- Los puntos de corte deben salir del contenido, cuando el diseño se rompe, no de una lista de dispositivos.
- El criterio de reflow exige que todo funcione a 320 px CSS, lo que también protege a quien usa zoom.
- Tablas, imágenes con texto y menús ocultos son los tres fallos responsive más frecuentes.
- Se prueba estirando la ventana poco a poco y con zoom al 400 %, no solo en tres tamaños fijos.
01 ¿Qué es la usabilidad responsive?
El diseño responsive es la técnica: rejilla fluida, imágenes flexibles y media queries. La usabilidad responsive es la comprobación de que esa técnica da un buen resultado para las personas en cada tamaño. La diferencia importa porque casi todas las plantillas actuales se anuncian como responsive, y eso solo garantiza que la maquetación se reorganiza, no que el contenido real de tu negocio siga funcionando.
02 Puntos de corte (breakpoints): dónde se rompe el diseño
Un punto de corte es el ancho en el que el diseño cambia de disposición: de tres columnas a una, del menú horizontal al desplegable. El error clásico es fijarlos por dispositivos (móvil, tablet, escritorio) y revisar solo esos tres tamaños. Entre ellos hay anchos donde el diseño queda raro: tablets en horizontal, móviles plegables, pantalla dividida en un portátil o un escritorio con zoom.
| Ancho aproximado | Situación real | Fallo habitual |
|---|---|---|
| 320-360 px | Móvil pequeño o escritorio con zoom al 400 % | Palabras largas, URL o emails que desbordan la pantalla |
| 600-900 px | Tablet, plegable abierto o media pantalla en portátil | Tarjetas de tres columnas apretadas o un móvil estirado con líneas de texto larguísimas |
| 900-1.100 px | Portátil pequeño o tablet en horizontal | Menú horizontal que ya no cabe y se parte en dos líneas |
| Horizontal en móvil | Altura de unos 350 px o menos | Cabecera fija y barra de cookies que dejan un hueco mínimo para el contenido |
03 Reflow: el criterio WCAG 1.4.10
320 px
ancho CSS al que el contenido debe usarse sin desplazamiento horizontal
Fuente: W3C, WCAG 2.1 y 2.2, criterio 1.4.10
400 %
zoom que convierte una ventana de 1.280 px en 320 px CSS
Fuente: W3C, Understanding Reflow
256 px
alto CSS equivalente para contenido que se desplaza en horizontal
Fuente: W3C, criterio 1.4.10
El criterio 1.4.10, de nivel AA e incorporado en WCAG 2.1, pide que el contenido se pueda leer y usar sin perder información ni funciones y sin tener que desplazarse en dos direcciones a la vez. Está pensado para personas con baja visión que amplían el texto: si al hacer zoom tienen que moverse a derecha e izquierda en cada línea, leer se vuelve agotador.
Una web bien hecha en responsive cumple casi todo el reflow gratis, porque al hacer zoom el navegador le presenta un ancho menor y se activa el diseño móvil. Los fallos aparecen en elementos con ancho fijo, cabeceras fijas enormes y ventanas modales que no caben.
04 Tablas en diseños responsive
Las tablas son el elemento que peor se adapta, porque su sentido está en cruzar filas y columnas. No hay una solución universal: depende de cuántas columnas tenga y de qué necesite hacer el usuario con ella.
Desplazamiento dentro de la tabla
La tabla vive en un contenedor con scroll horizontal propio y la primera columna fija. Mantiene la comparación; conviene señalar que hay más columnas.
Filas convertidas en tarjetas
Cada fila se apila como una ficha con etiqueta y valor. Ideal para listados (pedidos, citas) donde no se compara entre filas.
Columnas prioritarias
En móvil se muestran las columnas esenciales y el resto bajo un «Ver detalle». Útil en tablas de precios o especificaciones.
Cambiar la pregunta
A veces un selector («Elige tu plan») y una sola columna resuelven mejor la tarea que cualquier tabla.
05 Imágenes: tamaño, encuadre y texto incrustado
| Problema | Consecuencia | Solución |
|---|---|---|
| La misma imagen de 2.500 px para todos | El móvil descarga de más y el LCP empeora | srcset y sizes para servir la resolución adecuada |
| Foto panorámica reducida en el móvil | El producto o la persona quedan diminutos | Elemento picture con otro encuadre para móvil (dirección de arte) |
| Banner con texto dentro de la imagen | El texto se vuelve ilegible al reducir | Texto en HTML sobre la imagen |
| Imágenes sin dimensiones | El contenido salta al cargar (CLS) | Atributos width y height o aspect-ratio en CSS |
| Infografía compleja | No se puede leer en 360 px | Versión móvil simplificada o enlace a la imagen completa ampliable |
06 Menús y contenido que desaparece al estrechar
Al estrechar la pantalla, la tentación es esconder: el menú va a un icono de hamburguesa, los filtros a un panel y parte del texto a un «Leer más» o directamente a display: none. Esconder tiene coste: lo que no se ve se usa menos, y los estudios de Nielsen Norman Group muestran que la navegación oculta se descubre y se utiliza menos que la visible.
Además, con la indexación mobile-first, lo que eliminas de la versión móvil deja de contar para Google. La regla práctica es reordenar y resumir, no amputar.
- ✓Las 2-4 opciones más importantes del menú siguen visibles en móvil, fuera de la hamburguesa.
- ✓El contenido de la versión móvil es el mismo que el de escritorio, aunque cambie el orden.
- ✓El orden visual en móvil sigue el orden lógico de lectura y de tabulación.
- ✓Ningún menú o tooltip depende del hover para abrirse.
- ✓El zoom no está bloqueado en la etiqueta meta viewport (nada de user-scalable=no).
- ✓Las ventanas modales caben en una pantalla de 320 px y se pueden cerrar sin desplazarse.
07 Cómo probar la usabilidad responsive
-
1
Estira la ventana despacio
De 1.400 px a 320 px en el navegador de escritorio, mirando cada página clave. Así aparecen los anchos intermedios problemáticos.
-
2
Haz zoom al 400 %
Con la ventana a 1.280 px, amplía al 400 %: es la prueba del criterio de reflow y detecta cabeceras fijas que lo tapan todo.
-
3
Gira el móvil
En horizontal la altura útil se desploma: comprueba cabeceras, barras de cookies y formularios.
-
4
Usa el modo dispositivo
Las herramientas para desarrolladores de Chrome o Firefox simulan anchos y densidades, útiles para depurar.
-
5
Termina en dispositivos reales
El teclado virtual, las barras del navegador y el tacto solo se comprueban de verdad en un móvil y una tablet.
Los fallos que no dependen del ancho, sino del dedo, el teclado virtual o el contexto, son de usabilidad móvil específica y se revisan aparte. Para una revisión completa, combina estas pruebas con una auditoría de usabilidad centrada en las tareas clave.
08 ¿Parchear o rehacer la maquetación?
Muchas webs se hicieron para escritorio y se «adaptaron» después con parches de CSS. Si cada corrección rompe otra cosa, suele ser más barato un rediseño web planteado desde el móvil que seguir parcheando. En proyectos con tablas de datos, configuradores o áreas privadas, el problema ya no es de plantilla sino de producto, y lo resuelve un desarrollo web a medida. Para una web corporativa, lo razonable es un proyecto de diseño y desarrollo web que pruebe cada plantilla con el contenido real antes de publicar.
Preguntas frecuentes sobre Usabilidad responsive
Es la capacidad de una web adaptable para seguir siendo fácil de usar en cualquier ancho de pantalla, orientación y nivel de zoom, sin perder contenido ni funciones.
El diseño responsive es la técnica que reorganiza la maquetación según el ancho; la usabilidad responsive comprueba si el resultado sigue siendo cómodo y completo para el usuario en cada tamaño.
Es el criterio 1.4.10 de WCAG, de nivel AA: el contenido debe poder usarse a 320 px CSS de ancho sin desplazamiento horizontal, lo que equivale a una ventana de 1.280 px con zoom al 400 %.
Los que pida tu contenido: estrecha la ventana poco a poco y añade un punto de corte donde el diseño se rompa. Revisar solo móvil, tablet y escritorio deja fuera anchos intermedios reales.
Según su uso: desplazamiento horizontal dentro de la tabla con la primera columna fija, filas convertidas en tarjetas o columnas prioritarias con detalle desplegable. Nunca una imagen ni texto ilegible.
Suele serlo: lo oculto se usa menos y, con la indexación mobile-first, deja de contar para Google. Es mejor reordenar y resumir que eliminar.
Estira la ventana de escritorio de ancho a estrecho, prueba zoom al 400 % con 1.280 px, gira el móvil y termina con dispositivos reales recorriendo las tareas clave.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗