Diseño responsive más allá de los breakpoints: contenedores, fluidez y contenido

En las presentaciones de diseño solemos enseñar tres pantallas: escritorio, tableta y móvil. Quedan muy claras en una diapositiva. Pero cuando la web sale al mundo, nadie la ve exactamente en esos tres tamaños. La ven en un móvil plegable abierto a medias, en un portátil con la ventana partida, en una tableta en horizontal con el teclado puesto, en un monitor ultrapanorámico o en un móvil con el texto del sistema al 130 %.

Hace años que en el estudio dejamos de pensar en «las tres versiones» y empezamos a pensar en cómo se comporta cada pieza cuando el espacio cambia. No es un matiz técnico. Cambia la forma de diseñar, la forma de entregar los archivos a desarrollo y, sobre todo, la experiencia de quien usa la web en el dispositivo que sea.

Esta guía va de ese cambio: de elegir los puntos de ruptura a partir del contenido, de las medidas que se estiran solas y de los componentes que se adaptan al hueco que ocupan, no a la pantalla. Si buscas el porqué de empezar por el móvil, lo tienes en la guía de diseño mobile first; aquí vamos un paso más allá.

01Del «tres tamaños» al diseño que fluye

El término responsive web design lo propuso Ethan Marcotte en 2010 con tres ingredientes: rejillas fluidas, imágenes flexibles y media queries (las consultas CSS que aplican estilos según el tamaño de la pantalla). La idea era brillante y sigue vigente. Lo que cambió fue la práctica: durante años se tradujo en diseñar tres maquetas fijas y unirlas con cortes en 768 y 1024 píxeles, los tamaños del iPad de entonces.

El problema de ese enfoque es lo que pasa entre los cortes. En una pantalla de 900 píxeles, un diseño pensado para 768 se queda con márgenes enormes, o uno pensado para 1024 se aprieta hasta romperse. Y los dispositivos reales viven justamente ahí, en los huecos.

Jen Simmons llamó intrinsic web design (diseño web intrínseco) a la evolución natural: combinar elementos fluidos y fijos, dejar que el contenido defina sus propios tamaños y usar las herramientas modernas de CSS (Grid, Flexbox, clamp(), container queries) para que el diseño se adapte de forma continua. En la práctica significa diseñar comportamientos, no fotos fijas.

02Breakpoints que dicta el contenido, no el dispositivo

Un breakpoint o punto de ruptura es el ancho en el que el diseño cambia de estructura: el menú se pliega, dos columnas pasan a una, una imagen se coloca encima del texto. La pregunta no es «qué dispositivos existen», sino «dónde empieza a verse mal este contenido».

Método para encontrarlos

1. 01Diseña primero en la pantalla más estrecha razonable, unos 320–360 píxeles de ancho.
2. 02Ensancha poco a poco el navegador (o el marco en Figma) y observa.
3. 03Marca el punto en que algo deja de funcionar: líneas de texto demasiado largas, una imagen que se queda pequeña, un hueco que pide una segunda columna.
4. 04Añade el cambio justo en ese punto, sea el que sea, aunque no coincida con ningún dispositivo conocido.
5. 05Repite hasta el ancho máximo que vaya a tener tu contenido.

Lo habitual es que aparezcan dos o tres cortes estructurales para la página y algunos más dentro de componentes concretos.

La medida de línea como guía

Uno de los criterios más fiables para decidir un punto de ruptura es la longitud de las líneas de texto. Entre 45 y 75 caracteres por línea se lee con comodidad; por encima de 80, el ojo se pierde al volver al principio de la siguiente. Cuando una columna de texto supera esa medida, es momento de limitar su ancho con max-width (por ejemplo 65ch) o de pasar a dos columnas. Los detalles de tamaños, interlineados y escalas los desarrollamos en la guía de tipografía web y legibilidad.

03Medidas fluidas: tipografía y espacios que se estiran solos

La forma más eficaz de reducir breakpoints es que muchas medidas no salten, sino que crezcan de forma proporcional entre un mínimo y un máximo. La función CSS clamp() hace exactamente eso: recibe un valor mínimo, uno preferido que depende del ancho de la ventana y uno máximo.

:root {
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-3: clamp(1.75rem, 1.4rem + 1.75vw, 2.75rem);
  --step-5: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --space-l: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  --space-xl: clamp(3rem, 2rem + 5vw, 7rem);
}
h1 { font-size: var(--step-5); }
section { padding-block: var(--space-xl); }

Con esas variables, un titular pasa de 40 a 72 píxeles de forma continua entre el móvil y el escritorio, y los espacios entre secciones crecen en la misma proporción. No hay que decidir qué pasa en 768 o en 1024: simplemente se ve bien en todos los anchos intermedios.

Herramientas como Utopia, creada por James Gilbert y Trys Mudford, calculan escalas tipográficas y de espaciado fluidas a partir de dos tamaños de referencia, y facilitan mucho la conversación entre diseño y desarrollo.

04Rejillas intrínsecas: que el componente decida cuántas columnas caben

CSS Grid permite crear rejillas que calculan solas cuántas columnas entran, sin una sola media query. Es uno de los patrones que más usamos en catálogos, listados de servicios o galerías.

.rejilla {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

La regla se lee así: crea tantas columnas como quepan, cada una de al menos 18 rem (unos 288 píxeles) y repartiendo el espacio sobrante. En un móvil sale una columna; en una tableta, dos; en un escritorio amplio, cuatro. El min(100%, 18rem) evita que, en pantallas muy estrechas, la tarjeta se salga de su contenedor.

Con Flexbox y flex-wrap se consigue algo parecido para elementos de ancho variable, como etiquetas o grupos de botones, que pasan a la siguiente línea cuando ya no caben. La retícula general de la página, con sus columnas y márgenes, la contamos en la guía de retícula y grid en diseño web.

05Container queries: componentes que miran su hueco

Las media queries preguntan por el tamaño de la pantalla. Pero un mismo componente puede vivir en sitios muy distintos dentro de la misma pantalla: una tarjeta de noticia ocupa toda la anchura en la portada y un tercio en la barra lateral. Lo que le importa a la tarjeta es su propio espacio, no el del dispositivo.

Las container queries, disponibles en todos los navegadores modernos, permiten exactamente eso: aplicar estilos según el ancho del contenedor.

.tarjeta-contenedor { container-type: inline-size; }
.tarjeta { display: grid; gap: 1rem; }
@container (min-width: 32rem) {
  .tarjeta { grid-template-columns: 40% 1fr; align-items: center; }
}

Con esto la tarjeta se coloca en vertical cuando tiene poco espacio y en horizontal, imagen a la izquierda y texto a la derecha, cuando su contenedor supera los 32 rem, esté donde esté. Para diseño es un cambio de mentalidad muy sano: cada componente se diseña con sus propios estados de ancho, y la página simplemente los coloca.

Hay más técnicas de CSS moderno que encajan aquí, como :has() o el anidamiento, y las repasamos en la guía de container queries y CSS moderno.

06Cómo diseñar y entregar un diseño responsive

El cambio de enfoque también se nota en la herramienta de diseño y en la forma de documentar.

En Figma (o la herramienta que uses)

• →Auto layout en todo. Los marcos que se estiran y reorganizan solos permiten probar el comportamiento redimensionando, igual que en el navegador.
• →Componentes con variantes de ancho. Una tarjeta «estrecha» y una «ancha» en lugar de una tarjeta «móvil» y una «escritorio».
• →Dos o tres marcos de página de referencia, no más, con anotaciones sobre qué pasa entre ellos.
• →Escalas tipográficas y de espaciado como variables, con su valor mínimo y máximo, que desarrollo traduce directamente a clamp().

En la documentación para desarrollo

En vez de «en tableta, dos columnas», escribimos reglas de comportamiento: «la rejilla de servicios usa columnas de mínimo 18 rem», «la imagen del caso se coloca a la izquierda cuando la tarjeta supera 32 rem», «los titulares van del paso 3 al paso 5 de la escala». Son instrucciones más cortas y mucho más precisas.

07Probar como lo usan las personas

Un diseño responsive se valida usándolo, no mirándolo. Esta es la rutina que seguimos antes de publicar:

1. 01Arrastrar el navegador de 320 píxeles al ancho máximo, despacio, buscando roturas entre tamaños.
2. 02Móviles reales, al menos un Android y un iPhone, en vertical y en horizontal.
3. 03Zoom al 200 % en escritorio y tamaño de texto del sistema aumentado en el móvil.
4. 04Orientación y ventanas partidas: tableta en horizontal, portátil con la ventana a la mitad.
5. 05Objetivos táctiles cómodos: WCAG 2.2 fija un mínimo de 24 × 24 píxeles y Apple recomienda 44 × 44 puntos; en la zona de navegación móvil apuntamos a lo segundo.
6. 06Contenido real, no textos de relleno: nombres largos, precios con decimales, títulos en alemán si la web es multidioma.

Este último punto es el que más sorpresas da. Un diseño perfecto con «Lorem ipsum» puede romperse con el nombre real de un tratamiento o con una traducción un 30 % más larga.

08Webs que se sienten hechas para cada pantalla

Cuando un diseño se piensa así, el usuario no nota que la web es responsive; simplemente siente que está hecha para su pantalla, sea la que sea. Es uno de esos trabajos invisibles que distinguen una web cuidada de una que solo funciona. En SIMA lo integramos desde el primer boceto en nuestros proyectos de diseño web y experiencia digital, con diseño y desarrollo trabajando sobre las mismas reglas. Si tu web se ve bien en tu ordenador pero sospechas que en otros dispositivos no tanto, escríbenos y la revisamos contigo.