Preparando los sitios para el formato 1:1: se vienen los teléfonos fold y muchos sitios no están listos

Los layouts pensados solo para alto o ancho empiezan a quedarse cortos

Durante años, muchos sitios se diseñaron asumiendo un mundo relativamente simple: pantallas portrait para teléfono y landscape para desktop o tablet horizontal. Ese atajo funcionó razonablemente bien cuando el rango de proporciones era más predecible.

Pero ese supuesto ya viene mostrando grietas. Los teléfonos fold, las pantallas que pueden quedar casi cuadradas, el uso en multitarea, las ventanas flotantes y los navegadores redimensionables hacen que la interfaz ya no viva solo en dos estados cómodos. Un formato cercano a 1:1 puede dejar a muchos sitios en una zona incómoda: demasiado ancho para la lógica móvil clásica y demasiado alto para la lógica desktop tradicional.

Ahí empiezan los síntomas: héroes desproporcionados, menús que ocupan demasiado espacio, grids que quedan “a medio camino”, formularios con campos apretados, tablas ilegibles y CTAs que desaparecen más abajo de lo esperado.

Qué suele romperse primero

• Cabeceras que dependen de una imagen panorámica demasiado ancha.
• Bloques de dos columnas que no saben cuándo apilarse ni cuándo mantenerse lado a lado.
• Menús y barras con alturas excesivas para ventanas medianas.
• Tarjetas que se calculan solo por ancho y terminan demasiado altas o demasiado comprimidas.
• Formularios cuyos labels, ayudas y botones quedan mal repartidos en pantallas casi cuadradas.
• Componentes que asumen que el usuario siempre tiene mucho scroll vertical o mucho aire horizontal.

Por qué `portrait` y `landscape` ya no alcanzan como criterio principal

Las media queries por orientación siguen siendo útiles, pero usar solo `@media (orientation: portrait)` y `@media (orientation: landscape)` como columna vertebral del layout es cada vez más frágil. La orientación dice poco sobre la calidad real del espacio disponible.

Una pantalla puede estar en portrait y aun así tener poco alto útil por barras del navegador, teclado o multitarea. También puede estar en landscape pero ofrecer un ancho efectivo muy limitado. Y en formatos cercanos a 1:1, la orientación casi deja de ser una señal de diseño relevante: el problema ya no es si el rectángulo está “parado” o “acostado”, sino cómo se comporta cada componente dentro del espacio real.

• La orientación no describe densidad de contenido ni altura útil visible.
• No distingue entre pantalla completa, split view o ventana embebida.
• No resuelve qué hacer con layouts intermedios, especialmente cerca del cuadrado.
• Empuja a decisiones binarias cuando la UI necesita respuestas graduales.
• Hace más probable que un componente funcione bien en extremos y mal en rangos medios.

En otras palabras, el diseño responsive ya no debería preguntarse solo “¿estoy en portrait o landscape?”, sino “¿cuánto espacio inline tengo?, ¿cuánto espacio vertical real queda?, ¿este componente sigue siendo legible?, ¿debería reordenarse antes?”.

Cómo preparar un sitio para pantallas 1:1 y dispositivos fold

1. Diseñar por rangos de espacio, no por categorías rígidas de dispositivo

   En vez de pensar en “teléfono”, “tablet” y “desktop” como cajas cerradas, conviene pensar en rangos de ancho, alto y proporción donde cambian decisiones concretas del layout. Eso permite que la interfaz responda mejor a estados intermedios y no solo a extremos clásicos.

2. Dar más peso a breakpoints de componentes y contenedores

   Muchas veces no falla la página completa: falla una tarjeta, un carrusel, un formulario o un bloque de pricing. Por eso vale más definir cuándo un componente cambia dentro de su contenedor que depender exclusivamente del viewport general. Las container queries y layouts más modulares ayudan mucho aquí.

3. Evitar héroes y secciones que dependan de una sola proporción cómoda

   Si la parte superior del sitio solo se ve bien en una franja ancha o muy alta, el formato 1:1 la va a castigar. Conviene usar composiciones que puedan reordenar imagen, título, bajada y CTA sin perder claridad ni consumir demasiado alto inicial.

4. Revisar navegación, formularios y tablas como casos críticos

   Son los elementos que más sufren cuando el espacio queda ambiguo. La navegación debe seguir siendo clara sin devorar la pantalla; los formularios deben redistribuir campos y botones; y las tablas necesitan alternativas como scroll controlado, vistas resumidas o tarjetas de datos.

5. Usar tipografía y espaciado fluidos con límites razonables

   Escalas con `clamp()`, anchos máximos bien elegidos y grids menos rígidos suelen comportarse mejor que layouts que saltan bruscamente entre dos estados. La clave es que la interfaz degrade con elegancia mientras cambia el espacio disponible.

6. Probar ventanas cuadradas de verdad, no solo emulaciones extremas

   Muchos equipos prueban móvil angosto y desktop ancho, pero nunca se detienen en tamaños intermedios. Para prepararse mejor, conviene revisar rangos donde ancho y alto estén relativamente cerca, porque ahí afloran las suposiciones ocultas del diseño.

Qué decisiones técnicas ayudan

• Preferir layouts con grid y flex que permitan reorganización progresiva.
• Usar `minmax()`, `clamp()` y anchos máximos para evitar estiramientos raros.
• Incorporar container queries cuando el componente lo justifique.
• Reducir dependencia de imágenes hero excesivamente panorámicas.
• Definir estados intermedios para cards, listas, filtros, tablas y sidebars.
• Revisar interacciones con teclado virtual, barras del navegador y áreas seguras.

Checklist rápido para auditar si un sitio está listo

• ¿El hero sigue comunicando bien cuando el viewport se acerca al cuadrado?
• ¿Los CTA principales siguen visibles sin depender de una proporción específica?
• ¿Las cards cambian de densidad sin romper jerarquía ni altura?
• ¿El menú no consume demasiado alto útil en pantallas intermedias?
• ¿Los formularios se reordenan bien y mantienen campos cómodos de usar?
• ¿Las tablas tienen una estrategia alternativa cuando no cabe todo?
• ¿El layout usa más señales de espacio real que de orientación binaria?

La idea central

La llegada de más dispositivos fold no obliga a reinventar todo el responsive design, pero sí empuja a dejar atrás algunas simplificaciones cómodas. La más importante: asumir que portrait y landscape bastan para describir la experiencia.

Preparar un sitio para formatos cercanos a 1:1 significa diseñar con más criterio espacial, pensar mejor los componentes y probar los rangos intermedios que antes nadie miraba. Los sitios que hagan eso mejor van a envejecer mucho mejor frente a la próxima ola de pantallas variables.