Foto gigante en escritorio
Una altura mínima de 720 px crea una escena casi a pantalla completa. Limite el contenedor y compare foto y texto en dos columnas. Revise sizes y recorte móvil: comprimir el archivo no corrige la composición.
Guías prácticas detalladas
Diagnosticar incoherencias del diseño responsive
Revisar títulos, columnas, espacios y fotografías según las tareas de lectura: pruebas para pantallas grandes, teléfonos y cada idioma.
Actualización :
Teclas de un teclado con varios juegos de caracteres. Fotografía de contexto documental; no representa una misión ni equipos de Alexis Roux ZG. © Alexander-design · Fuente · CC0. Redimensionada y convertida a WebP; visualización recortada.
¿Dónde impide el diseño leer o actuar?
La ausencia de desbordamiento no garantiza una composición equilibrada. Un título enorme, tres tarjetas comprimidas en cuatro columnas o una foto excesiva pueden ocultar información útil. Relacione cada defecto con su regla CSS, corrija el componente y repita en las páginas que lo comparten. Las anchuras propuestas son una matriz de trabajo, no una norma universal.
Crear la matriz
Incluya inicio, sección, ficha larga, resultados, formulario y herramienta. Pruebe 320, 390, 768, 1024, 1440 y 1920 píxeles CSS y cambie progresivamente entre ellos. Añada títulos largos y todos los alfabetos: una anomalía entre puntos de ruptura puede escapar a capturas habituales.
Examinar la cascada
Anote fuente calculada, interlineado, anchura, padding, margin y altura mínima en las herramientas del navegador. Identifique la regla ganadora y su especificidad. Una corrección global de h2 puede no afectar a un selector más preciso. Revise las variantes del componente.
Equilibrar la lectura
Compare título, introducción, subtítulos y texto de tarjetas. Examine saltos de línea y posición de la acción. Limite tamaños y adapte interlineados a la escritura. Quite alturas fijas que dejan huecos con texto breve o recortan traducciones largas.
Probar las columnas
Examine conjuntos de tres, cuatro y cinco tarjetas con contenido real. Pase a una columna antes de estrechar demasiado los párrafos. Pruebe URL largas y campos. Mantenga desplazamiento local explícito en tablas que requieren dos dimensiones.
Comprobar las fotografías
Mida marco y proporción, después currentSrc y bytes transferidos. sizes debe describir el espacio ocupado: media página no equivale a toda la pantalla. Compruebe recorte del motivo, dimensiones reservadas y carga diferida bajo el primer tramo visible.
Repetir zoom e interacciones
Pruebe lectura al 200 % y redistribución al 400 % de zoom en una pantalla adecuada. Recorra menús, FAQ y campos con teclado. Compruebe foco visible y orden lógico. En árabe, revise alineación, iconos direccionales y cadenas latinas. Guarde resultados por URL, idioma y anchura.
Situaciones y decisiones
Situaciones tipo para preparar un control. No describen misiones realizadas ni observaciones reales.
Tres tarjetas en cuatro columnas
La cuarta pista queda vacía y los párrafos son estrechos. Adapte la cuadrícula y repita tres, cuatro y cinco elementos con los títulos rusos y finlandeses más largos.
Formulario visualmente correcto
Un banner fijo puede ocultar el foco o un error aparecer lejos del campo. Pruebe fallo y recuperación mediante teclado. La alineación no demuestra que pueda completarse la acción.
Prueba que conservar
- URL, idioma, anchura CSS, zoom, navegador y estado del panel.
- Captura del defecto y reglas calculadas responsables.
- Captura comparable tras la corrección y resultado de la acción.
- Plantillas y traducciones repetidas; defectos pendientes separados de correcciones validadas.
Referencias oficiales
Protocolos relacionados
Comprobaciones antes de concluir
- ¿Una tarjeta filtrada, un título traducido largo y un formulario con errores conservan columnas y espacios coherentes?
- ¿El archivo de foto elegido por el navegador se adapta al ancho mostrado sin cargar innecesariamente la variante mayor?
- ¿El zoom y el teclado permiten leer y actuar sin texto oculto bajo un elemento fijo?
Preguntas frecuentes
¿Un punto de ruptura por teléfono?
Elija los puntos cuando el contenido deja de funcionar. Los modelos amplían la matriz sin justificar multiplicar reglas arbitrarias.
¿Siempre bastan 16 px?
No. Tipografía, contraste, interlineado, longitud de línea y zoom actúan conjuntamente. Pruebe el texto real y sus lectores.
¿Puede ocultarse un bloque en móvil?
Solo si la información necesaria sigue disponible. Reorganizar una comparación o formulario suele ser mejor que quitar explicaciones.
¿Por qué todos los idiomas?
Cambian longitudes, alfabetos, división de palabras y dirección. Una plantilla francesa puede fallar con un título finlandés o una dirección latina dentro de texto árabe.