Fluid Design in Webflow (Responsive Design Layouts skalieren)

[@zerz99]

Danke dir Jonas! Besser in 15 Minuten erklärt und auf den Punkt gebracht als in einem 1h langem Video von Finsweet selber. Deine Videos sind eine super Hilfe für den Umstieg auf Client-First und das nutzen von REM. Vielen Dank dafür! :)

[@jonasarleth]

Freut mich, danke!

[@aloha2713]

Mir gefällt der finsweet “client first” REM Ansatz besser. Das Framework von Finsweet ist weniger kompliziert und damit aus meiner Sicht besser handelbar. Außerdem gefällt mir das Plugin und die Funktionsergänzungen für Webflow. Aus meiner Perspektive spricht kein wirklich gutes Argument für EM.

[@jonasarleth]

Meinst du jetzt bezogen auf das Fluid Design?

[@dro2709]

All the best,

[@r7kxwy443]

Nice tutorial

[@jonasarleth]

thanks!

[@user-yg4nx1mk9v]

Hi Jonas! ❤Thanks for the video, I understand correctly that then, starting with the version of the tablet you prescribe new dimensions, because otherwise everything will be too small?

[@jonasarleth]

Yes exactly! And I think fluid Design makes the most sense on the desktop breakpoint because the tablet and mobile breakpoints are so small and its easier to change settings of elements there. Sorry for not talking in english! I just try to build a strong Webflow community here in Germany! But please ask whenever you don't understand something!

[@user-yg4nx1mk9v]

@@jonasarleth Thank you so much for the explanation! Everything is fine, I think I understand you well, even without knowing German🙂

[@dehaagsebeveiliging4516]

Mudstep - Break In

[@consti_monsti]

Hi! Ich finde deine Videos immer wieder aufs Neue sehr interessant und hilfreich! Danke dafür. Zudem hätte ich noch eine Frage. Hast du bei deinem Online Kurs webflow gefragt, ob du deren Namen in deiner Domain benutzen darfst? Jetzt bitte nicht falsch verstehen, würde mich persönlich interessieren, da man eingetragene Namen ja nicht benutzen sollte und ich auch eine Domain registrieren möchte, die den Namen beinhaltet! Vielen Dank!

[@jonasarleth]

Habe ich ehrlicherweise nie gefragt. Mach ich bei Gelegenheit aber mal. Ich denke Webflow-lernen ist eigentlich kein Problem. Soll ja eher als eine Lern-Plattform für Webflow gesehen werden und sowas wäre schwierig aufzubauen wenn man da nie ihr Namen verwenden dürfte. Und ich habe ihnen schon etliche neue Kunden gebracht 😀Würde mich jetzt aber auch nicht killen, wenn ich eine andere Domain nehmen müsste.

[@matthiaspanopau]

Hallo Jonas, bezieht sich deine Einschätzung auf Wizardry 2.0? Ich frage deshalb, weil es in dem Video von Timothy Ricks so aussieht, als ob die Einstellung der Schriftgröße/Zoom einen Einfluss auf die Größe des Textes hat (siehe: kzbin.info/www/bejne/mIG6qHyYmb-Kq5Y). Ich bin neu bei Webflow und möchte gerne Fluid Design für mein erstes Projekt verwenden. Vielen Dank!

[@jonasarleth]

Die wizardry Lösung alt sowie neu nutzt im Prinzip die gleiche Lösung wie der fluid design calculator von Client First ein. Nur setzt Timothy das mit Java Script um und das ist in dem Fall ein Umweg, da man das direkt über css schlanker lösen kann. Ich würde nicht mehr empfehlen die wizardry Methode zu nutzen.

[@noemimc9633]

Hmm leider funktioniert das bei mir irgendwie nicht. Code eingesetzt und REMS überall abgeändert. Es scheint nicht zu skalieren..

[@jonasarleth]

Schick mir gerne mal einen Read Only Link

[@strikerdom8076]

Hey Jonas, bin gerade dabei in einem Projekt alles auf REM umzustellen. Wenn ich jedoch den Finsweet Code integriere, geht die "Text Zoom Preview " Funktion von Webflow nicht mehr, sprich keine Skalierung mehr trotz REM, wenn man eine andere REM "simuliert", als die Standard 16px des Browsers. Die Skalierung zwischen den Breakpoints, also bei unterschiedlicher Screen Größe funktioniert zwar(dafür ist der code ja auch), nur dann eben nicht mehr das eigentliche Feature der REMs. Wenn ich den Code entferne funktioniert das "zoomen" wieder und Schriften etc. werden größer, sehr komisch... Hast du vielleicht ne Ahnung woran das liegen könnte? BTW Super informative Videos und vielen Dank für den Content! :)

[@jonasarleth]

Ist mir noch garnicht aufgefallen aber du hast Recht! Webflow schreibt dann rein gar nichts mehr in den Quellcode. Vielleicht weil sie erst prüfen und sehen, dass es durch deinen Custom Code immer wieder überschrieben werden würde. Aber du kannst ja in den Browser Einstellungen die Schriftgröße umstellen. Dann funktioniert es. Oder falls du die Funktion unbedingt brauchst, den Code in die Seiteneinstellungen rein kopieren. Dann wird er erst in der veröffentlichten Seite aktiv und nicht direkt im Webflow Designer.

[@strikerdom8076]

@@jonasarleth Vielen Dank für die Antwort! Seite ist noch nicht gelauncht, weshalb ich es noch nicht mit Browser Einstellung testen konnte. Aber gut zu wissen, dass es ein generelles Anzeigeproblem ist und dennoch funktioniert wie gedacht. Muss ich mir dann nochmal überlegen, wie ich da am besten vorgehe, da ich das Feature doch ziemlich häufig benutze, um noch die optimalen Einstellung für den Finsweet Code zu finden.

[@leonstoel9028]

Hey Jonas, Was spricht deiner Meinung nach dafür, nicht bis 767px fluid runter zu skalieren? Da würde mich deine Meinung sehr interessieren :)

[@jonasarleth]

Bei mir werden viele Elemente dann einfach zu klein und schlecht lesbar. Zudem setze ich zweispaltige Komponenten, gerne ab tablet hochkant auf 100%. Das gibt dem ganzen natürlich ein anderes Layout und manche Seitenbesucher bevorzugen dieses und können ihr tablet dann einfach drehen. Würde ich es nur runter skalieren wäre es einfach nur kleiner. Ich glaube nicht, dass dafür der Umdreh-Modus von Tablets gemacht wurde. Verstehst du wie ich mein?

[@schaafman]

Nutze häufig 1.125 REM im Body, weil mir 16px immer zu klein war. Der ganze Style Guide wird dann in jeder Textart auf 18px eingestellt. Verstehe nicht, wie sich das dann zum Fluid Design verhält, also den PX, die man in den Rechner eingibt. Oder macht es mehr Sinn - wenn man eh den Fluid Design Code nutzt - dann im Webflow Body einfach 1 REM zu lassen und dann nur über den Code die PX einzustellen?

[@jonasarleth]

Im Fluid Design Rechner gibst du dann auch einfach 18px bei der Font Size an, wo ich 16px drin stehen habe. hier: kzbin.info/www/bejne/mYCTn4qed9-ofKs Bei mir kommt dann der Code raus (habe bei 991 14px eingegeben): html { font-size: 1.125rem; } @media screen and (max-width:1600px) { html { font-size: calc(0.46818555008210183rem + 0.6568144499178982vw); } } @media screen and (max-width:991px) { html { font-size: 1rem; } } Er schreibt hier jetzt deine 1.125rem in den html und 1rem müsste dann im body stehen. Das würde ich an deiner Stelle von der Logik her auch so machen. Das ist im Prinzip das gleiche, wie wenn du in den body deine 1.125rem rein schreibst und html standardmäßig bei 1rem steht. Bedenke nur, dass der Code oben nur auf dem Desktop Breakpoint die 1.125rem im html nimmt. Ab Tablet hat er dann wieder 1rem im html stehen und wenn du da auch deine 18px als Ausgangslage haben möchtest, müsstest du ab Tablet dann wieder 1.125rem in den body schreiben. Ich hoffe das war nicht zu kompliziert :D

[@schaafman]

@@jonasarleth Okay, danke dir 👍🏻 Würd dann die Größen ab Tablet down auch einfach im Fluid Design Rechner eingeben, dann hab ich alle Änderungen nur dort.

[@thesmarttv7074]

It’s all ntal brutha

[@yasin7520]

lol