Una distribución de dos columnas puede verse equilibrada en computadora y resultar confusa en un teléfono. Muchas veces el problema es el orden de lectura, no solo el ancho. Antes de dar estilo, decide qué contenido debe aparecer primero cuando todo se convierta en una secuencia vertical. Esa secuencia debe explicar el asunto sin depender de posiciones laterales.
Por ejemplo, una comparación de servicios puede incluir un título y una descripción en cada columna. Mantener cada elemento completo permite apilarlo con sentido. Si todos los títulos están en una fila y las descripciones en otra, al estrecharse la pantalla pueden separarse las etiquetas de sus explicaciones. La cuadrícula no debería ser lo único que conserva el significado.
Leer el diagrama como texto
- Título del servicio A: Introduce el primer elemento completo de la comparación.
- Explicación del servicio A: Su descripción y siguiente acción permanecen junto al título.
- Título del servicio B: Empieza el segundo elemento cuando termina el primero.
- Explicación del servicio B: La segunda descripción conserva su propia etiqueta.
La posición en computadora no debe ser la única relación entre título y explicación.
Una prueba útil consiste en sustituir una frase corta por la redacción más larga que razonablemente necesitaría la sección. Después cambia el ancho poco a poco. Observa cuándo se divide un botón, crece un encabezado o la imagen deja de mostrar el detalle. Esas transiciones revelan si el diseño depende de una longitud afortunada. No hace falta prepararlo para contenido absurdo, pero una variación normal no debería romper la relación entre una etiqueta y su explicación.
Utiliza los ajustes compatibles del bloque Columnas y observa el comportamiento real del tema. Algunos controles afectan el apilado; los estilos del tema también intervienen en separaciones y anchuras. No existe un único punto de cambio correcto para todos los sitios. La prueba importante consiste en leer el contenido real en distintos anchos.
Presta atención a palabras largas, direcciones y botones. Pueden ensanchar una columna aunque los párrafos normales entren bien. Prueba la etiqueta más larga que razonablemente utilizarás, no un texto provisional corto. Cuando sea posible, aclara la redacción en lugar de comprimir letras diminutas dentro de una caja fija.
Las imágenes deben acompañar esa misma secuencia. Si una fotografía pertenece a una explicación, mantenla dentro de su estructura y no dependas únicamente de su ubicación en computadora. Revisa el recorte después del apilado, porque las proporciones disponibles pueden cambiar. Una imagen decorativa no debería obligar a recorrer demasiado espacio antes del siguiente párrafo útil.
Comprueba finalmente una ventana intermedia además de un teléfono estrecho. La zona incómoda puede aparecer antes de que las columnas se apilen. Si quedan apretadas, simplifica el contenido o cambia la distribución. Una sección adaptable conserva las relaciones entre elementos; no basta con que todos permanezcan, de alguna manera, dentro de la pantalla.
