Cómo comprobar un diseño responsive

Una lista de comprobación del diseño responsive debe indicar si una persona puede completar una tarea con distintos tamaños de pantalla. Una captura móvil bien resuelta aporta información útil, pero no permite saber si el menú se cierra, si una comparación sigue siendo comprensible o si el botón de envío desaparece detrás del teclado.

Empieza por la tarea y examina el diseño mientras la realizas. En una página de marketing, podría consistir en entender la oferta, comparar planes y encontrar el siguiente paso. En la interfaz de un producto, podría ser localizar un registro, cambiar un valor y confirmar el resultado. Realiza la misma tarea con distintos anchos para distinguir qué cambios ayudan y cuáles se limitan a trasladar el problema a otro lugar.

Prepara una página que permita descubrir los problemas

Elige una página con suficiente variedad para que la revisión resulte significativa. Una página de destino casi vacía puede superar la prueba fácilmente mientras la de precios falla. Escoge una que incluya navegación, un título de cierta longitud, una imagen, contenido repetido y al menos una acción importante. Si el sitio tiene un formulario o una tabla de datos, incluye también una página que contenga ese patrón.

Antes de comprobar el diseño, sustituye el contenido de ejemplo que resulte demasiado favorable. Es poco probable que una tarjeta llamada «Equipo» revele los mismos problemas que «Operaciones regionales y atención al cliente». Utiliza descripciones realistas, la etiqueta de navegación más larga de las habituales y una imagen cuyo motivo principal esté cerca de un borde. Son datos de prueba, no intentos de hacer fallar la página con contenido absurdo.

Anota qué debe seguir siendo posible. En una página ficticia de reserva de talleres, el visitante debería poder leer la fecha, entender dónde se celebra, comparar las opciones de sesión e iniciar una reserva. Si el diseño estrecho oculta el lugar para ahorrar espacio, habrá perdido información necesaria para la tarea, aunque la composición visual parezca más limpia.

Utiliza puntos de comprobación y examina también los anchos intermedios

Las vistas previas de escritorio, tableta y móvil son un punto de partida práctico. No abarcan todas las condiciones en las que se verá la página. Una ventana de navegador redimensionada, una tableta con pantalla dividida o una página ampliada pueden mostrar el diseño con anchos que no cubre ningún tamaño de dispositivo predefinido.

Elige un punto de comprobación estrecho, otro intermedio y otro amplio. Los valores concretos importan menos que incluir las condiciones pertinentes para tu público. En una primera revisión, podrías comprobar unos 360, 768 y 1440 píxeles CSS, y después cambiar el tamaño gradualmente entre ellos.

Presta especial atención a los momentos cercanos a un cambio de estructura. La cabecera puede caber holgadamente en el ancho grande y contraerse correctamente en el pequeño, pero quedar demasiado apretada justo antes de cambiar. Una sección de tres columnas quizá necesite más espacio del que le concede su contenedor en un ancho intermedio. Los problemas suelen aparecer antes de un punto de ruptura, no necesariamente en el propio punto.

La guía de diseño responsive de web.dev recomienda decidir los cambios de disposición según las necesidades del contenido, en lugar de basarse en dispositivos concretos. Aplica ese principio anotando el primer ancho en el que un componente deja de funcionar con comodidad. Así tendrás una razón para modificarlo y un punto útil en el que repetir la prueba después.

Una referencia útil: GOV.UK conserva la tarea de lectura

La guía de disposición de GOV.UK parte de una sola columna en pantallas pequeñas y recomienda una columna de lectura de dos tercios para muchas páginas más amplias. Su ejemplo oficial de dos tercios y un tercio muestra cómo el mismo contenido pasa a formar una secuencia vertical cuando se reduce el espacio.

Lo útil es adoptar la relación entre los contenidos, no la proporción. La explicación principal sigue apareciendo primero y el material de apoyo, después. En tu propia página, una condición legal necesaria antes de pagar no es secundaria solo porque encaje bien en una barra lateral. Decide su función antes de copiar un diseño que le otorgue menor prioridad.

Esto permite una prueba más precisa que comprobar si «las columnas se apilan». Escoge una frase de la columna de apoyo e identifica la acción a la que impone una condición. Después de apilar las columnas, ¿puede el lector encontrarse con esa acción sin haber visto nunca la frase? Si es así, la implementación responsive puede ser correcta geométricamente y equivocada en su organización del contenido. Mueve la condición junto con la acción o haz explícita la dependencia entre ambas.

Otra prueba útil consiste en recorrer la página con el teclado. La reorganización visual puede dejar intacto el orden del código fuente. Si en pantalla un control parece estar después de la explicación, pero el foco llega a él antes, la revisión necesita comprobar tanto la disposición como el orden de lectura. Una captura por sí sola no resuelve esa discrepancia.

Basa las pruebas responsive en tareas

Utiliza las siguientes comprobaciones como registro inicial y elimina las filas que no correspondan a elementos de tu página. Escribe el resultado esperado antes de revisar; de lo contrario, es fácil justificar un defecto después de verlo. Los ejemplos siguientes son condiciones de prueba, no valores universales para los puntos de ruptura.

No combines todas estas observaciones en un único porcentaje de aprobación. Un pie de imagen decorativo recortado y una acción de pago inaccesible no son fallos equivalentes. Soluciona primero las tareas bloqueadas, después la información incorrecta o ausente y, por último, la comodidad de lectura y el acabado visual. Ese orden permite a un equipo pequeño tomar una decisión práctica sobre la publicación, sin fingir que una revisión incompleta demuestra compatibilidad con todos los dispositivos.

Recorre la página mientras la utilizas

Navegación: abrir, elegir, cerrar y volver a abrir

Abre todos los controles de navegación que cambien con la disposición. Un icono de menú puede parecer perfectamente alineado y, al abrirse, mostrar un panel inutilizable. Examina el estado abierto, selecciona un destino, cierra el panel y vuelve a abrirlo. Si la página contiene navegación anidada, prueba un elemento de un nivel más profundo en lugar de detenerte en el primero.

En el ejemplo del taller, la cabecera amplia podría mostrar Sesiones, Ponentes, Lugar y Reservar plaza. La versión estrecha podría trasladar los tres primeros enlaces a un panel. Comprueba que Lugar siga presente, que su etiqueta sea legible y que cerrar el panel devuelva al visitante a la página sin dejar una capa transparente que impida utilizarla.

Presta atención a la relación entre el menú y el resto de la pantalla. Un panel alto puede necesitar su propio desplazamiento o permitir que se desplace la página. Sea cual sea la solución, el visitante debe poder llegar al último elemento y al control de cierre. Un panel que solo funciona cuando el área visible es suficientemente alta sigue siendo un problema responsive.

Repite la tarea con el teclado. Comprueba si el cambio de disposición ha dejado algún control inaccesible o ha ocultado el foco actual. Registra la secuencia exacta que provoca el problema para que la corrección pueda centrarse en ella.

Orden de lectura: sigue la secuencia móvil

Cuando las columnas pasan a apilarse, el orden de lectura necesita una nueva revisión. La versión de escritorio puede apoyarse en relaciones espaciales que ya no existen. Un precio situado junto a su explicación puede acabar varias pantallas más lejos de ella. Un pie de imagen puede parecer referido a la imagen siguiente en vez de a la anterior.

Lee la página estrecha de arriba abajo sin consultar la disposición de escritorio. Pregúntate qué te prepara cada sección para entender a continuación. En una página de reservas, los detalles de las sesiones deben aparecer antes de pedir al visitante que elija una. Colocar una gran imagen decorativa entre la elección y su explicación puede hacer que la acción parezca desconectada.

Vigila las secciones alternas de escritorio. Una sección con imagen a la izquierda y texto a la derecha, seguida de otra con imagen a la derecha y texto a la izquierda, puede generar un orden móvil incoherente si la implementación se limita a apilar los elementos del código fuente. Decide si cada imagen introduce el texto o lo ilustra después, y mantén esa relación cuando el contenido cumpla la misma función.

Desbordamiento: identifica la causa antes de ocultarlo

Recorre toda la página y busca contenido que se salga de su contenedor. Algunas señales habituales son una etiqueta de botón recortada, el borde de una tarjeta que sale de la pantalla o un enlace del pie que desplaza los elementos vecinos. Comprueba también las capas superpuestas y el contenido desplegado: la página en reposo puede caber mientras un control abierto no lo hace.

Distingue el desbordamiento accidental de una zona de desplazamiento intencionada. Puede ser razonable que una tabla comparativa ancha se desplace horizontalmente dentro de su propia zona. Que toda la página se mueva de lado por una ilustración demasiado grande es un problema distinto. Si el desplazamiento horizontal es intencionado, el visitante necesita una forma de advertir que hay más contenido y de mantener la orientación mientras lo lee.

Evita dar por terminada una reparación solo por aplicar una regla global que oculte el desbordamiento. Puede dejar limpio el borde exterior a costa de recortar el elemento que causaba el problema. Identifica primero el elemento responsable y decide después si debe cambiar su ancho, el ajuste de línea, su ubicación o el contenedor. Tras el cambio, comprueba que no haya desaparecido sin más contenido útil.

En la página del taller, imagina una tarjeta de entrada con un nombre de recinto largo. Una corrección útil podría ser permitir que el nombre ocupe varias líneas y que la tarjeta crezca. Reducir todo el texto de la tarjeta también haría que cupiera, pero empeoraría la legibilidad de información que no estaba causando el problema.

Comprueba el significado de las imágenes con cada recorte

Una imagen puede caber técnicamente y, aun así, no comunicar lo necesario. Observa qué se conserva cuando cambia su forma. Si pretende mostrar una entrada, esa entrada debe seguir siendo visible. Si explica una función, la parte pertinente de la interfaz no debe quedar tan pequeña que no se distinga.

En una fotografía editorial, quizá puedas cambiar el recorte y conservar el motivo principal. En una captura instructiva, recortar las etiquetas podría eliminar la explicación. Estos dos recursos requieren decisiones distintas. Revisa el propósito de la imagen antes de elegir entre un recorte más cerrado, otro recurso o una sección propia de mayor tamaño.

Utiliza el texto que la rodea como comprobación. Si la frase dice «Elige la sesión resaltada», pero el resaltado no se aprecia al tamaño mostrado, la ilustración ya no está respaldando esa frase. Un primer plano del control pertinente puede resultar más útil que reducir una imagen de pantalla completa para que quepa.

Examina el recurso que realmente se muestra, en vez de juzgar únicamente las dimensiones del archivo original. Un archivo de alta resolución puede ser ilegible si se muestra demasiado pequeño; una imagen de tamaño adecuado puede verse borrosa si se carga la variante equivocada. Anota cuál de esas condiciones observaste. La distinción ayuda a quien aplique la corrección a elegir entre cambiar la disposición o cambiar el recurso.

Mantén juntas las decisiones y sus controles

Un diseño responsive debe conservar la conexión entre la información y la acción a la que sirve. En una sección de precios, eso significa que el nombre del plan, los límites pertinentes, el precio y la acción sigan identificándose como una sola opción. En un formulario de reserva, significa que la sesión seleccionada siga estando clara cuando el visitante llegue a la acción final.

Comprueba con atención los botones repetidos. Tres etiquetas idénticas de «Continuar» pueden confundirse fácilmente si las tarjetas a las que pertenecen quedan visualmente fragmentadas. Quizá necesites reforzar la agrupación, aclarar las etiquetas de los planes o describir mejor la acción. Empieza por el cambio menos invasivo que recupere la relación, en lugar de añadir una decoración excesiva a cada elemento.

Prueba los controles cuando las etiquetas ocupen varias líneas. Un botón de dos líneas puede ser aceptable si su espacio interior, su alineación y los controles vecinos siguen formando un conjunto coherente. Lo que importa es que el usuario pueda seguir distinguiendo la acción y activarla con comodidad. Que la etiqueta quede recortada después de la primera palabra es un fallo más grave que un botón ligeramente más alto.

Incluye los elementos fijos en esta revisión. Una barra fija de reserva puede ayudar a mantener disponible la acción principal, pero también puede tapar una nota sobre el precio o el último campo del formulario. Desplázate hasta el final, abre una sección desplegable y lleva el foco a un campo. El elemento debe justificar el espacio que ocupa en esos estados, no solo en la cuidada captura inicial.

Prueba los formularios después de que cambien de estado

Los formularios merecen una revisión aparte porque la interacción cambia la cantidad de contenido. Un mensaje de error, una opción seleccionada o un aviso de confirmación pueden añadir altura y alterar la relación entre los campos. Revisa el formulario con datos realistas y al menos un error que se pueda corregir, en lugar de comprobar únicamente las casillas vacías.

En una pantalla estrecha, abre el teclado en pantalla en un dispositivo real siempre que sea posible. Comprueba si el campo activo sigue visible y si se puede acceder a la siguiente acción. La vista previa de escritorio ayuda con la disposición, pero no basta por sí sola para determinar cómo gestiona cada navegador móvil el teclado y el área visible.

Introduce un valor más largo en un campo que normalmente lo admita. El nombre completo de una organización, un apellido compuesto o una dirección de correo larga pueden revelar recortes que una muestra breve no detecta. El objetivo no es cambiar la política de validación de la aplicación durante la revisión visual, sino garantizar que los datos aceptados sigan siendo comprensibles en la interfaz.

Después de un error, confirma que la página sigue comunicando qué hay que corregir. El error no debe quedar separado de su campo porque se haya movido otra sección. Si el formulario utiliza un resumen, examina la conexión entre ese resumen y el campo individual. Anota si el problema corresponde a la disposición, la redacción, el comportamiento del foco o la validación real, para que pueda resolverlo la persona responsable adecuada.

Distingue los problemas de adaptación de los problemas de contenido

Algunos fallos que parecen responsive se deben a un contenido poco claro, no a la falta de espacio. Un párrafo que repite el título puede alargar innecesariamente la página móvil. Una fila de seis acciones puede reflejar que aún no se ha decidido su prioridad. Antes de comprimir el diseño, pregúntate si el contenido tiene una función clara.

Otros fallos pertenecen claramente a la disposición. No deben eliminarse condiciones importantes solo porque el componente actual sea demasiado rígido. Una condición de cancelación en una página de reservas puede ser esencial aunque complique la composición. La respuesta adecuada podría ser ubicarla mejor, ofrecer una explicación desplegable o conceder más espacio vertical, según cuándo la necesite el visitante.

Una distinción útil es preguntarse si la información debe estar disponible con cualquier ancho. Si es así, trabaja en su presentación. Si su pertinencia depende realmente de la tarea o del estado actual, puede ser adecuado mostrarla de forma condicional. El ancho por sí solo es una razón débil para retirar información que respalda la misma decisión en todos los dispositivos.

La introducción al diseño responsive de MDN plantea la adaptación como una combinación de disposición flexible, recursos multimedia, tipografía y comportamiento del área visible. Conviene recordarlo al asignar correcciones: un fallo en una pantalla pequeña no significa que haya que regenerar toda la página.

Convierte las observaciones en cambios pequeños y comprobables

Centra cada incidencia en un único fallo. Describe el componente, la condición y el comportamiento esperado. Por ejemplo: «En el ancho intermedio de la vista previa, Lugar se superpone a Reservar plaza. Contrae esta cabecera antes de que los elementos se toquen; conserva las etiquetas y el destino de la reserva». Es una petición de cambio más útil que «Mejora el diseño para tableta».

Si trabajas en OpenDesign, las vistas previas de escritorio, tableta y móvil pueden servir para la comparación inicial. Puedes añadir comentarios o enviar la observación al chat y revisar después el HTML actualizado. Las ediciones manuales de texto, enlaces, imágenes y estilos compatibles resultan útiles cuando el cambio necesario es concreto.

Para los cambios estructurales, identifica qué debe permanecer estable. Si la cabecera necesita otra disposición, conserva su contenido y sus destinos durante esa revisión. Si una imagen necesita un recorte mejor, evita cambiar al mismo tiempo el texto que la rodea. Mantener esas variables estables facilita juzgar si el cambio ha resuelto el problema registrado.

Vuelve a probar primero la condición que fallaba y después los anchos cercanos y los estados relacionados. Una corrección que permite que el menú quepa con un ancho puede dejar la cabecera innecesariamente apretada con otro. Un botón más alto puede dejar en evidencia una tarjeta con altura fija. Esta breve comprobación de regresión forma parte de la corrección original; no es una ronda opcional de acabado.

Termina con un registro de revisión que otra persona pueda utilizar

Antes de dar por completada la revisión responsive, repite la tarea principal de principio a fin en cada punto de comprobación. Lee el contenido, abre los controles y llega al resultado. Después examina al menos un ancho entre esos puntos en el que cambie la disposición. Guarda evidencia de los estados abiertos o desplegados importantes, no solo tres vistas atractivas en reposo.

La nota final puede ser breve: qué páginas se comprobaron, qué anchos y navegadores se utilizaron, qué tareas se completaron y qué condiciones siguen sin probarse. Si no se dispuso de un móvil real, indícalo. Si una tabla se desplaza horizontalmente de forma intencionada, registra esa decisión para que la siguiente persona que la revise no la confunda con un defecto inadvertido.

Prioriza los problemas pendientes según lo que impiden hacer. Una acción oculta o un requisito ilegible pueden bloquear la tarea. Un título incómodo pero legible suele tener menor prioridad. Así, la siguiente revisión tendrá un orden razonable sin dar a entender que la calidad visual carece de importancia. Simplemente se evita que los retoques menores oculten los problemas que impiden utilizar la página.