Testing de Diseño Responsivo

Qué es el diseño responsivo #

El diseño responsivo significa que una aplicación web adapta su layout y contenido para funcionar bien en cualquier tamaño de pantalla — desde un celular de 320px hasta un monitor ultrawide de 2560px. En lugar de construir versiones separadas para móvil y desktop, una sola base de código se ajusta usando media queries de CSS.

Para ingenieros QA, el testing responsivo consiste en verificar que esta adaptación funcione correctamente en cada tamaño, no solo en los que el diseñador tenía en mente.

Breakpoints comunes #

La mayoría de los sistemas de diseño usan breakpoints estándar basados en anchos comunes de dispositivos:

Estas son guías, no reglas. Los breakpoints de tu aplicación dependen del sistema de diseño que use. Consulta con el equipo de diseño o inspecciona el CSS para los valores reales de @media query.

Metodología de testing #

El test de redimensionamiento #

La técnica de testing responsivo más efectiva es simple: redimensionar lentamente el navegador desde su ancho máximo al mínimo mientras observas la página.

1. Abre la página en un navegador desktop
2. Agarra el borde derecho de la ventana del navegador
3. Arrastra lentamente hacia la izquierda, reduciendo el ancho
4. Observa cualquiera de estos problemas:
   • Contenido desbordándose de su contenedor (aparece scrollbar horizontal)
   • Texto superponiéndose con otro texto o imágenes
   • Navegación rompiéndose o volviéndose inaccesible
   • Imágenes estirándose, aplastándose o desapareciendo
   • Botones volviéndose demasiado pequeños para tocar
   • Espacio en blanco apareciendo donde no debería
   • Elementos saltando o reorganizándose de forma torpe

Esta técnica detecta bugs entre breakpoints que el testing de ancho fijo no encuentra. Un layout puede verse perfecto a 768px y 375px pero romperse a 500px.

Emulación de dispositivos en DevTools #

El modo dispositivo de Chrome DevTools (Ctrl+Shift+M) ofrece control preciso del viewport:

• Dispositivos preconfigurados: Selecciona entre perfiles de iPhone, Pixel, iPad y otros
• Dimensiones personalizadas: Ingresa valores exactos de ancho y alto
• Modo responsivo: Arrastra manijas para redimensionar libremente viendo las dimensiones exactas
• Device pixel ratio: Simula pantallas de alta densidad (Retina)
• Simulación touch: Prueba interacciones touch sin dispositivo físico

Tamaños de viewport clave para probar #

Como mínimo, prueba estos anchos:

• 320px: Ancho móvil soportado más pequeño
• 375px: Ancho móvil más común
• 768px: Breakpoint de tablet — aquí es donde ocurren la mayoría de los cambios principales de layout
• 1024px: Laptop/tablet horizontal
• 1440px: Desktop estándar

También prueba en anchos justo debajo y encima de cada breakpoint (767px y 769px, por ejemplo) para verificar que las transiciones sean suaves.

Bugs responsivos comunes #

Desbordamiento de contenido #

El bug responsivo más frecuente. El contenido se extiende más allá de su contenedor, creando un scrollbar horizontal en móvil.

Causas comunes:

• Elementos de ancho fijo (ej., width: 600px) que no escalan hacia abajo
• URLs largas o palabras sin saltos que no hacen wrap
• Imágenes sin max-width: 100%
• Tablas más anchas que el viewport

Cómo detectar: Haz scroll horizontal en vista móvil. Si puedes hacer scroll a la derecha, algo se está desbordando.

Tamaño de touch targets #

Los usuarios móviles tocan con dedos, no cursores de mouse. Los botones y links deben ser lo suficientemente grandes para tocar con precisión.

Guía de Google: Los touch targets deben ser de al menos 48x48 píxeles CSS con 8px de espaciado entre targets.

Violaciones comunes:

• Links de navegación demasiado juntos
• Checkboxes o radio buttons pequeños sin áreas de toque ampliadas
• Links del footer amontonados
• Botones de cerrar en modales demasiado pequeños

Colapso de navegación #

La navegación desktop con muchos items usualmente colapsa en un menú hamburguesa en móvil. Prueba:

• ¿Aparece el menú hamburguesa en el breakpoint correcto?
• ¿Aparecen todos los items del menú cuando está abierto?
• ¿Se cierra el menú cuando tocas fuera de él?
• ¿Se cierra el menú cuando seleccionas un item?
• ¿Puedes navegar con teclado cuando el menú hamburguesa está abierto?

Problemas de tipografía #

El texto que se ve genial en desktop puede volverse ilegible en móvil:

• Tamaños de fuente demasiado pequeños para lectura móvil (mínimo 16px para texto del cuerpo)
• Longitud de líneas demasiado larga en pantallas anchas (óptimo: 45-75 caracteres por línea)
• Texto de encabezados demasiado grande para móvil, causando problemas de wrap
• Espaciado entre letras o palabras rompiéndose en pantallas angostas

Testing responsivo avanzado #

Testing de orientación #

Los dispositivos móviles pueden rotarse entre orientación vertical y horizontal. Esto cambia las dimensiones del viewport drásticamente (ej., 375x812 vertical vs. 812x375 horizontal).

Prueba:

• Ajuste del layout cuando cambia la orientación
• Contenido oculto en vertical apareciendo en horizontal (o viceversa)
• Formularios manteniendo el input cuando cambia la orientación (los usuarios no deberían perder datos escritos)
• Diálogos modales redimensionándose apropiadamente
• Elementos de posición fija (headers, footers) adaptándose correctamente

En DevTools, alterna la orientación usando el ícono de rotación en modo dispositivo.

Testing de imágenes responsivas #

Las imágenes deben adaptarse a diferentes tamaños de pantalla tanto para calidad visual como para performance:

• Atributo srcset: ¿El navegador carga imágenes del tamaño apropiado? Un dispositivo móvil no debería descargar una imagen de 4000px de ancho.
• Dirección artística: Algunos diseños muestran diferentes recortes de imagen a diferentes tamaños. El elemento <picture> maneja esto — verifica que el recorte correcto se muestre en cada breakpoint.
• Carga lazy: Las imágenes debajo del fold deberían cargarse solo al hacer scroll hasta ellas. Prueba observando la pestaña Network mientras haces scroll.

Ejercicio: Auditoría responsiva #

Elige una aplicación web y realiza una auditoría responsiva completa:

1. Comienza a 1920px de ancho. Documenta el layout: ¿cuántas columnas? ¿Dónde está la navegación?
2. Redimensiona lentamente a 1440px. Nota cualquier cambio.
3. Continúa a 1024px. El layout debería cambiar significativamente aquí. ¿Colapsa la navegación?
4. Continúa a 768px. Layout de tablet. Verifica que todo el contenido sea accesible.
5. Continúa a 375px. Layout móvil. Verifica:
   • ¿Puedes leer todo el texto cómodamente?
   • ¿Los touch targets son suficientemente grandes?
   • ¿Se desborda algún contenido?
   • ¿La navegación es accesible?
6. Ve a 320px. El ancho común más angosto. ¿Se rompe algo?
7. Prueba orientación horizontal a 375px de alto, 812px de ancho.

Crea un reporte de bug para cada problema encontrado:

Checklist de testing responsivo #

Usa este checklist para cada sesión de testing responsivo:

Layout:

• Sin scroll horizontal a ningún ancho
• Layout de grid/columnas se adapta en cada breakpoint
• Sidebar colapsa o se mueve debajo del contenido principal en móvil
• Footer se apila verticalmente en móvil

Navegación:

• Nav desktop visible en pantallas anchas
• Menú hamburguesa aparece en el breakpoint correcto
• Todos los items del menú accesibles en menú móvil
• Menú se cierra apropiadamente

Tipografía:

• Texto del cuerpo legible sin zoom (16px+)
• Encabezados no desbordan en móvil
• Longitud de línea razonable en todos los tamaños de pantalla

Media:

• Imágenes escalan sin distorsión
• Videos son responsivos (no ancho fijo)
• Contenido embebido (mapas, iframes) se adapta

Formularios:

• Campos de input ancho completo en móvil
• Labels visibles y asociados con inputs
• Teclado no oculta campos de input
• Botón de enviar fácilmente tappeable

Interacción:

• Touch targets de al menos 48x48px
• Espaciado adecuado entre elementos interactivos
• Interacciones solo-hover tienen alternativas touch

Puntos clave #

• El diseño responsivo adapta el layout a cualquier tamaño de pantalla usando breakpoints CSS
• El test de redimensionamiento (achicar lentamente el navegador) detecta bugs entre breakpoints
• Prueba en anchos estándar (320, 375, 768, 1024, 1440) más anchos personalizados cerca de breakpoints
• El desbordamiento de contenido es el bug responsivo más común — siempre verifica scroll horizontal
• Los touch targets deben ser de al menos 48x48px para usabilidad móvil
• Prueba orientaciones vertical y horizontal en móvil
• Usa un checklist sistemático cubriendo layout, navegación, tipografía, media, formularios e interacciones