Fluid Layout

Bei einem Fluid Layout passt sich die Website der Breite des Browserfensters an, und nutzt so den zur Verfügung stehenden Platz optimal aus. Auf großen Monitoren können also mehr Inhalte abgebildet werden als auf kleinen Monitoren.

Um die notwendige Flexibilität zu erreichen, müssen einige bzw. alle Spalten des Gestaltungsrasters variabel sein. Diese Spalten basieren auf Prozentwerten und nicht auf Pixelwerten. Die Website ist normalerweise nur in der horizontalen Ausrichtung flexibel, die vertikale Ausrichtung bleibt starr. Häufig wird auch eine Obergrenze für die maximale Ausbreitung des Designs festgelegt.

Ein fluid Design lässt sich nicht so einfach gestalten wie ein Fixed Design und auch die technische Umsetzung ist komplizierter. Alle Gestaltungselemente die in einer flexiblen Spalte untergebracht sind, müssen in der Breite skalierbar sein. Prozentwerte sind in Layoutprogrammen jedoch normalerweise nicht möglich. Der Designer muss daher immer daran denken, welche Bereiche flexibel sind und die Grafiken entsprechend vorbereiten.

Ein Fluid Layout wird bei inhaltsstarken Seiten wie Online-Shops, Magazin-Seiten oder Foren verwendet. Es ist auch die Grundlage eines „echten“ Responsive Designs.

Das könnte Sie auch interessieren

blog_nachhaltiges-hosting-imagebild
Nachhaltige Homepage und Webseiten?
Wie kann ein Internetauftritt nachhaltig sein oder besser gesagt nachhaltig werden? Diese Frage klingt merkwürdig, ist aber einfach zu beantworten. Jede Webseite beansprucht beim…
Haben Sie noch Lücken bei der DSGVO?
Seit 25. Mai 2018 ist die DSGVO nun in Kraft. Sicher haben Sie viele Maßnahmen dafür bereits umgesetzt. Wenn Sie bei einzelnen Maßnahmen technische…
Aktuelles R&M Betriebliche Altersvorsorge Monitor
Website Relaunch – R&M
Heute schon an Morgen denken – eine Aussage der besonders Unternehmer, Selbstständige und leitende Angestellte jeden Tag gegenüberstehen. Auch Armin Schulz, der Geschäftsführer der…
DIN Formate einfach erklärt
An dieser Stelle erklären wir Ihnen die Formate der Vorzugsreihe DIN A, die in der DIN-Norm 476 festgelegt wurde, außerdem finden Sie hier eine übersichtliche…