¿Qué es el diseño web fluido?

Hoy en día todos los diseñadores y diseñadoras web, y medio planeta, conocen el concepto de web responsive. Sin embargo, puede haber dudas respecto a otros términos que vuelven a estar de moda, aunque con una evolución clara sobre lo que representan. Entre ellos está el diseño fluido.
‍

En este sentido, no hay un consenso claro sobre lo que abarca cada concepto entre responsive, fluid y adaptive. Por tanto, abordaremos las distinciones más útiles en la práctica, y pondremos el foco en el diseño fluido, el cual ofrece más posibilidades de ajustar el comportamiento de la interfaz para una mejor experiencia y accesibilidad del usuario.
‍

Empezando por el principio y a mi juicio, no es del todo correcto distinguir entre diseño web fluido y el diseño responsive. La realidad, es que el término fluido se está utilizando para enfatizar las mejores prácticas de responsive en cuestión de diseñar los elementos y composición de una web en relación al tamaño de la pantalla desde la que se visita.
‍

Concretando, el diseño fluido es un sistema de diseño que ajusta nuestra web, no solo en la composición, sino también en sus tamaños, alturas o espacios de forma relativa a la resolución de la pantalla en la que se visualice.
‍

Esto hace que los elementos se visualicen de una manera u otra en función al dispositivo con el que accedemos, es decir, si usamos un móvil de 420px de ancho, se verá la web de una forma distinta que si accedemos desde una pantalla de 360px de ancho. Lo mismo con tablets, PCs de sobremesa, un televisor, una gameboy o la pantalla de una nevera inteligente.
‍

Fuera de la composición, el uso de las medidas relativas es una práctica recomendada especialmente para elementos interactivos o multimedia, ya sean imágenes, vídeos o animaciones. Pero también se puede aplicar a otros componentes de la web como la tipografía, especialmente a títulos H1 o H2, por ejemplo. Ya lo veremos.
‍

La cuestión esencial es que en un diseño fluido, como decía, en vez de utilizar tamaños fijos en píxeles u otra medida, se utilizan medidas relativas como el Viewport Width (VW) / Viewport Heigh (VH) / EM / REM y porcentajes (%).

Interfaz de diseño fluido — Lamps - Augustus

El objetivo principal de este sistema de diseño es mantener la misma apariencia e intención con la que se diseñó el prototipo en todos los dispositivos, incluso para pequeñas diferencias de tamaño. Estos prototipos se diseñan, normalmente, con diferentes composiciones para cada ancho de pantalla según el breakpoint y pensando centralmente en el usuario y su experiencia. Por eso es importante mencionar que el diseño fluido o relativo también es útil para atender a la accesibilidad y usabilidad de la web.
‍

Sin embargo, lo primero que debemos tener en cuenta es que los tamaños relativos no son una solución perfecta. Deben completarse con tamaños fijos (fixed) y máximos y mínimos, en aquellos casos que sea mejor para el resultado, ya que los elementos relativos al ancho de la pantalla pueden coger tamaños demasiado grandes o pequeños según el dispositivo.
‍

Más adelante veremos algunas indicaciones útiles con las que abordamos nosotros el diseño fluido, aunque es razonable decir que la práctica será fundamental para dominar la técnica.

Un poco de contexto

Desde que salió el iPhone al mercado en 2007 (sí, hace hoy 15 años) todo cambió. Los usuarios de smartphone tenían a su disposición una experiencia de calidad para la navegación web que antes no estaba disponible.
‍

Hoy en día, tenemos una variedad de tamaños de pantalla enorme, incluso hasta 15 para un mismo dispositivo, desde los zoom, a las opciones de configuración de tamaño del navegador, o la opción Landscape (horizontal) en los móviles. La cuestión es que ya en ese entonces, Ethan Marcotte, diseñador web que acuñó el término ‘responsive’, decía que el comportamiento y la intención de los usuarios que navegan desde móvil es diferente a los de desktop y también sus necesidades. Entre otras cosas, no buscan leer tanto contenido de texto y sus flujos de navegación son más directos.
‍

Sin embargo, me surge la pregunta de cuánta influencia tiene en ese comportamiento una conducta adquirida de los usuarios por estar acostumbrados a una mala experiencia en móvil, aunque cierto es que también influye el contexto en el que se usa un móvil frente a un sobremesa.
‍

Desde luego, todos los que por aquellos tiempos usábamos internet, podemos estar de acuerdo en que las páginas web no estaban diseñadas ni preparadas para ese aluvión de dispositivos y pantallas.
‍

En cualquier caso, como decía, Ethan Marcotte es el primero en mencionar el concepto de ‘diseño web responsive’, en 2010. Lo hace en este artículo que se publica en la web alistapart.com.
‍

Pero la accesibilidad y la experiencia multidispositivo llevaba ya tiempo siendo objeto de debate. Y también la adaptabilidad de los diseños. Un año antes, en 2009, el mismo Marcotte, publica un artículo titulado Grids Fluidos. En este artículo ya explica la relación a 16px del navegador y también usa la medida relativa EM para títulos y texto, aunque con algunas diferencias, al menos respecto a las prácticas que usamos actualmente en la agencia. Nosotros usaremos EM respecto al tamaño de letra del body y respecto a la de la configuración del navegador, lo haremos en REM.
‍

En cualquier caso, toda la intención de esta corriente de buenas prácticas y estándares de accesibilidad es la de construir un ecosistema web accesible para todo el mundo y con la mejor experiencia posible con independencia del contexto y el dispositivo con el que se acceda. Y las grandes marcas que apostaron por su canal online, empezaron a aplicarlo.
‍

Hoy en día, en una web con suficiente tráfico, se pueden registrar más de 1.000 resoluciones diferentes de pantalla de los usuarios. Y nuestros productos han de estar preparados para todas, o al menos la inmensa mayoría de ellas.
‍

Llegados a este punto, le pido al lector comprensión porque aprovecharé estos segundos de respiro para incluir un detalle de posicionamiento con el anchor text diseño responsive.

Diferencias entre Responsive tradicional, Adaptativo y Responsive fluido (en la práctica).
‍

Responsive tradicional:

Llamaremos responsive tradicional a las prácticas más habituales de diseño responsive, donde se suele utilizar un tamaño de elementos fijo, pero que se recolocan verticalmente según el ancho de la pantalla o Viewport Width. Es lo que conocemos como apilar los elementos dentro de un contenedor o del wraper, siendo el contenedor el que habitualmente tiene anchos relativos en porcentaje o VW, y dentro de él, los elementos van ordenándose según tengan espacio.

Como se puede ver en la animación, los elementos se reordenan con el ancho de pantalla, sin embargo, tienen tamaños absolutos que no varían.
‍

Para aplicar esta adaptación, lo más común es utilizar media queries para los diferentes tamaños de pantalla, así se ajusta el layout de la web a medida de cada ancho cuando las diferencias son demasiado grandes.

Las debilidades de este sistema se perciben especialmente entre breakpoints, es decir, si tenemos definido un layout para el tramo de pantallas entre 1440px y 1650px, dentro de ese tramo los elementos no se ajustarán dinámicamente con el ancho, siempre que se usen tamaños absolutos.
‍

Esta forma de trabajar el responsive es un sistema útil y eficaz cuando no se requiere de un acabado demasiado preciso en los diseños, o se está usando un determinado tipo de diseño muy modular y contenido.
‍

Adaptativo:

Lo que se suele denominar como diseño adaptive, no entra en conflicto con el responsive. Para que se entienda, la diferencia radica en que el adaptativo tiene diferentes archivos para cada disposivo, es decir, se crea un layout específico para cada pantalla en las que queremos que se visualice correctamente la aplicación. Utilizando el user agent del navegador, podemos decir qué layout se debe cargar para ese usuario y dispositivo en particular.
‍

Tiene sus ventajas, por ejemplo, se puede iterar de forma independiente en un layout determinado con mayor comodidad, sin tocar el resto del diseño. Por otro lado, para sitios grandes, es positivo que el usuario solo cargue el layout que corresponda a su dispositivo, por contra de una única hoja de estilos que puede llegar a ser muy grande.
‍

Tengamos en cuenta que en determinadas ocasiones, cuando usamos un único layout responsive, hay elementos que ocultamos para ciertos dispositivos y, por el contrario, hay otros elementos que se muestran. Esto se identifica especialmente en los menús de navegación. Con el diseño adaptativo ahorraríamos al usuario cargar aquellos elementos que no corresponden a su caso.
‍

Sin embargo, también es más laborioso.
‍

Bajo mi punto de vista, tiene sentido utilizar esta técnica en grandes ecommerce como Amazon o BestBuy. También son prácticas adecuadas para el desarrollo de APPs.
‍

Si se quiere profundizar en el tema, recomiendo seguir a la comunidad de Flutter, un SDK desarrollado por Google que tiene su propio canal de youtube y mucho contenido al respecto.
‍

Responsive Fluido:

El diseño fluido es, por tanto, una forma de diseño responsive que evita los tamaños fijos mientras no sean necesarios y relativiza sus medidas al ancho de pantalla. También se incluyen tamaños máximos y mínimos para que no se nos disparate un elemento grande, como un título, o no acabemos con un tamaño de letra menor de 16px en dispositivos pequeños.
‍

Por lo demás, a fluir.
‍

Mantendremos los breakpoints y la apilación modular de los elementos siempre que sea conveniente y, en definitiva, haremos los ajustes que correspondan en cada circunstancia.
‍

Con todo, gracias al diseño fluido conseguiremos una experiencia de usuario superior entre breakpoints y un acabado muy fiel a la intención del diseño.

Entonces, ¿Qué sistema usar?

Pues, como no podría ser de otra forma, el sistema que mejor convenga para cada caso. Aunque yo recomiendo aplicar el responsive fluido como lógica general para la maquetación web.
‍

Es bueno e importante entender que cuando diseñamos en nuestras bonitas pantallas, tenemos una visión sesgada y parcial del resultado, ya que probablemente la mayoría de los usuarios que visiten la web utilicen resoluciones diferentes.

Buenas prácticas generales del diseño responsive

Como decíamos, cada caso es particular y estas prácticas no son rígidas o absolutas, pero desde luego es manifiestamente saludable tenerlas en cuenta.

‍

‍

Diseña con lógica Progressive enhance o mobile first: partiendo de aquellas disposiciones de pantalla más exigentes en simplicidad para ir desarrollando el diseño en layouts más complejos.
Conoce y ten en cuenta las principales resoluciones de pantalla, al menos los anchos.
Identifica resoluciones que están cogiendo tendencia para adelantar tu diseño a los próximos años.
Revisa el histórico de las métricas de la web (en caso de tenerlo). Si no tienes, utiliza datos generales de share de navegación por dispositivos y navegadores.
Ten en cuenta el tipo de interacción del usuario en cada pantalla, en móvil usamos los dedos, de manera similar que en una tablet, frente a la precisión del ratón en desktop. Esto implica varias cosas para pantallas pequeñas:
‍

Los botones deben ser amplios y accesibles con el pulgar igual que los enlaces.
Idealmente los sliders han de ser swippeables, es decir, desplazables en horizontal con el pulgar.
El buscador cobra mayor importancia y debe ser accesible.
La navegación debe ser cómoda y simplificada
Focaliza el contenido en lo más importante y elimina los elementos más supérfluos.
Estudia y entiende la intención de navegación y el contexto de tus usuarios en móvil.
‍

Ten en consideración lo que sucede entre breakpoints, puedes tener puntos negros donde se montan elementos o no se visualiza correctamente el layout.
Testea. No solo con el dev tools, sino con usuarios y dispositivos reales.

‍

Cómo aplicar el diseño fluido en webflow: Fnsweet vs Wizardry

Actualmente para el no-code con webflow hay dos herramientas que son tendencia y las usamos en kingseo. Una es wizardry, de Timothy Ricks . La otra es el sistema de Fnsweet. Ambas técnicas en pleno desarrollo en 2022.
‍

Aunque nosotros usamos la lógica de wizardry, ambas tienen sus pros y sus contras. Veamos las diferencias:
‍

Wizardry

Con wizardy utlizaremos como referencia el viewport width (vw) para el body, el parent por excelencia, y todas las clases heredarán esa referencia para sus tamaños proporcionales en EM.
‍

Me explico, el tamaño EM es un valor proporcional al tamaño de letra del contenedor parent. Es decir, si ponemos en <body> un tamaño de letra de 1vw, el valor EM de cualquiera de los elementos de la página será en relación a éste (salvo que otro parent diga lo contrario).
‍

Por tanto, un tamaño de letra de 3EM, corresponderá a 3VW siempre que su contenedor superior la tenga fijada a 1vw.
‍

Pero esto solo nos asegura la relación entre el tamaño y le ancho de la pantalla actual, lo que nosotros queremos es que, además, sea proporcional a las relaciones de tamaño que tenemos en nuestro prototipo.
‍

Para ejemplificarlo:
‍

Si en nuestro prototipo tenemos un tamaño de letra de 16px para un ancho de 1440px, queremos que para una pantalla de 1650px, el tamaño de letra sea X. Donde X sea para 1650, lo que 16 es para 1440. Sí, una regla de tres.
‍

Para este ejemplo, entonces el tamaño de letra del <body> será de 1.111111111112vw. Y nuestros tamaños de letra del Figma solo tendríamos que dividirlos entre 16 para usarlos en EM, en webflow.
‍

Si tenemos un título con tamaño de letra 90px. en nuestro Figma de 1440, en webflow lo podemos replicar dividiéndolo por 16; (90/16) EM, donde EM es igual al tamaño de letra del body (1.111111111112vw).
‍

Esto lo hará exactamente proporcional, independientemente del tamaño de pantalla del dispositivo donde se visualice.
‍

Pero también necesitaremos máximos y mínimos, tanto para los contenedores como para la tipografía o cualquier otro elemento que queramos que no siga creciendo o menguando sin control.
‍

En este ejemplo, definimos en CSS un tamaño de letra y un ancho de contenedor máximo a partir de resoluciones superiores a 1440px.
‍

<style>

body {font-size: 1.1111111111111112vw;}

/ Tamaño de letra máximo /

@media screen and (min-width:1440px)

{body {font-size: 16px;}}

/ Ancho máximo del contenedor /

.container {max-width: 1440px;}

</style>
‍

Si necesitas verlo con más claridad, te recomiendo ver estos vídeo de Timothy Ricks:

Y uno algo más completo de la nueva versión de Wizardry 2.0:

FnSweet

Por el contrario, FnSweet usa como medida relativa REM, que es una medida que depende de la configuración del navegador que tenga el usuario.
‍

Si utilizamos en el ordenador o en el móvil una configuración de letra grande, normalmente 18px o 20px, en vez de 16px, entonces REM será relativa a esa medida.
‍

En cuestión de accesibilidad, REM adapta el tamaño de nuestro layout a las necesidades del usuario. Y eso es algo muy bueno.
‍

Sin embargo, luego tenemos también que relacionarla con el ancho de la pantalla, haciéndole un cálculo de VW.
‍

Te dejo un vídeo de Fnsweet donde lo explican con detalle:

La ventaja del sistema de Fnsweet es principalmente el compromiso con la accesibilidad. También es 100% compatible con el estándar de su sistema de clases client-first, que se está popularizando en la comunidad de webflow y es usado a su vez en la librería Relume.

Conclusión: ánimo con la ‘One Web’.

One Web significa una web como un producto único y versátil, usable por todo tipo de usuarios desde cualquier dispositivo. La experiencia de los usuarios debe ser nuestra meta, ya que en su satisfacción están los objetivos de nuestros productos.
‍

Parece una misión adecuada la de eliminar las fricciones de la navegación y facilitar la conexión entre todas esas propuestas de marcas, medios, personas y entidades de todo índole, con el público que las aprecie y consuma.
‍

Por mi parte, querido lector o lectora, espero haber podido aportar algo de información útil a tus inquietudes. Pienso que, uses el sistema que uses, bajo una filosofía de diseño centrada en el usuario lograrás que tus productos sean más usados y valorados por todos.
‍

Por cierto, si tienes o trabajas en un estudio de diseño en Madrid, o donde sea, podemos maquetar tus prototipos. Solo tienes que escribirnos y proponernos una colaboración.
‍

Que vaya muy bien y feliz diseño.

‍