Anleitung: Fluid Design in Webflow nutzen (mit Kalkulator)

Schon mal von Fluid Design gehört? Ich beschreibe es gerne als ein Upgrade für Responsive Design. Es ermöglicht dir bei einem bestimmten Breakpoint dein Website Layout zu skalieren. Gerade bei dem Desktop Breakpoint in Webflow sieht das Design schnell mal gequetscht aus, wenn man es bis auf 991 Px Breite kleiner macht. Das kannst du umgehen, indem du genau dann das Fluid Design aktivierst.

Wir schauen uns zum einen die Wizardry Methode von Timothy Ricks und genauso auch die Client First Varianten von Finsweet an. Zudem hast du ab 9:04 eine Schritt für Schritt Anleitung, wie du den Fluid Design Kalkulator für dein Layout anwendest und das Ganze dann auch in die Website einbindest (Beispiel anhand von einem Client First Template mit REM Einheiten).

Wichtig! Diese Methode funktioniert nur, wenn du mit REM oder EM arbeitest!

Finsweet Fluid Design Kalkulator: https://www.finsweet.com/client-first/docs/fluid-responsive