¿Qué es Fluid Design?

Es una estrategia de diseño para multidispositivos.

En el diseño web se usan varias estrategias para lograr una interfaz responsive. Entre ellas se encuentran:

• Adaptive Design
• Responsive Design + Server Side Components (RESS)
• Responsible Responsive Design
• Fluid Design

Las variantes anteriormente mencionadas funcionan muy bien aunque desde que conocí fluid design lo aplico siempre en mis proyectos, ya que me encanta la versatilidad para adaptarse a diferentes pantallas haciendo uso de la menor cantidad de mediaqueries posibles, sobre todo en tipografías donde se aplican diferentes cambios y podemos llegar a tener demasiadas mediaqueries.

Con fluid design y solo unas simples líneas de código, los elementos pueden escalar de una manera uniforme en sus diferentes tamaños.

Fue propuesto por Trys Mudford en 2020 y su ejecución es muy simple.

En Utopia podemos encontrar una calculadora de escala y haciendo uso de la función clamp nativa de css junto con las unidades del viewport lograremos una interfaz responsive fácilmente.

Para contenedores:

.box-fluid {
    width: clamp(400px, 60vw, 600px);
    height: clamp(200px, 30vh, 300px);
}

Para tipografías:

:root {
  --step-0: clamp(1.31rem, 1.24rem + 0.37vw, 1.5rem);
}

.step-0 {
  font-size: var(--step-0);
}

En mi sitio web aplico esta estrategia tanto para tipografías, iconos y contenedores de botones.