Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Festes vs. flexibles Layout

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Festes vs. flexibles Layout

Mittlerweile haben wir genügend CSS-Wissen gesammelt, um uns Gedanken über das Grunddesign zu machen. Eine entscheidende Frage ist, wie sich unsere Seite in der Breite verhalten soll. In Frage kommen ein festes Layout, das immer dieselbe Breite einnimmt, oder ein flexibles Layout, das sich dynamisch dem Browserfenster anpasst.

Ein einfaches Beispiel

Ein Layout besteht selten aus einer einzelnen Spalte und so legen wir für unser Beispiel eine Inhalts- und eine Nebenspalte zugrunde. Das Markup, also der XHTML-Code, soll für diese Elemente wie folgt aussehen:

<div id="inhalt">
<!-- Inhalt der Hauptspalte-->

</div>

<div id="nebenspalte">
<!-- Inhalt der Nebenspalte-- >
</div>

Wir formatieren dieses Markup per CSS.

Feste Breiten

Die erste Möglichkeit wäre, beiden Elementen eine feste Breite zu geben. Pixel sind hier die übliche Einheit. Unsere CSS-Vorgaben heißen also:

#inhalt {
float: left;
width: 520px;
}

#nebenspalte {
float: right;
width: 240px;
}

Wir gehen von einer Bildschirmbreite des Besuchern von 800×600 Pixel aus. Da wir Raum für eine Scrollbar lassen müssen, beschränken wir hier die Breite des gesamten Layouts auf 760 Pixel.

Per float wird die Inhaltsspalte links ausgerichtet, die Nebenspalte dagegen rechts. Im Realfall sind diese beiden divs meist von einem Mantel-div der richtigen Breite umschlossen, über das sich alle Elemente gemeinsam in der Mitte der Seite positionieren lassen.

Beispiel: festes Layout in verschieden breiten Browserfenstern

Der Vorteil fester Breiten ist, dass wir pixelgenau arbeiten können. Etwa wenn es um passgenaue Bilder in den beiden Spalten geht. Außerdem können wir bei der Schrift im Zusammenspiel mit der festen Zeilenbreite auf eine gute Lesbarkeit achten.

Der Nachteil ist, dass ein solches, meist schmales Design auf einem großen Bildschirm recht verloren aussehen kann. Außerdem hat der Nutzer keine Möglichkeit, die Breite der Seite selbst zu beeinflussen.

Flexible Breiten

Wenn wir die Breiten nicht in Pixel, sondern in Prozenten angeben, wird das Design flexibel:

#inhalt {
float: left;
width: 70%;

}

#nebenspalte {
float: right;
width: 30%;
}

Diese beiden Spalten werden sich nun jeweils an der Gesamtbreite des Browserfensters orientieren. Der Bildschirm ist so immer ausgefüllt. Wenn der User wollte, könnte er sich die Breite des Browserfensters nach Belieben zurechtschieben, um so die Zeilenlänge der Spalten zu beeinflussen.

Beispiel: flexibles Layout in verschieden breiten Browserfenstern

Der größte Nachteil ist, dass wir eben diesen Einfluss auf die Zeilenlänge verlieren. Auf sehr breiten Bildschirmen kann die Lesbarkeit sehr erschwert werden, falls der Nutzer seinen Browser in der vollen Bildschirmgröße geöffnet hat.
Außerdem müssen wir uns hier mehr Gedanken über die Bilder auf der Seite machen. Alle Bilder müssen auf ihren jeweiligen Positionen bei kleinen und bei großen Breiten ansprechend gesetzt werden und dürfen keine Lücken erzeugen.

Auch in diesem Beispiel sind die Spalten direkt Seite an Seite gesetzt. Um Ränder zu erzeugen, könnten wir für #inhalt und #nebenspalte die CSS-Eigenschaften margin-left und margin-right nutzen. Einfacher ist es jedoch später den Elementen innerhalb der divs, also etwa <h1> oder <p>, einen Rand zu geben.

Was ist besser?

Manche Webworker argumentieren leidenschaftlich, warum die eine Herangehensweise der anderen überlegen ist. Fakt ist, dass beide ihre Vor- und Nachteile haben. In der Praxis wägt man beide Möglichkeiten anhand des aktuellen Projektes gegeneinander ab.

Dan Cederholms Website SimpleBits eignet sich hervoragend, um beide Möglichkeiten in Aktion zu sehen. In der blauen Leiste rechts oben befinden sich zwei kleine Icons, mit denen das Layout zwischen fest und flexibel umgestellt werden kann. Diese Variante lässt dem User alle Freiheiten – und verlangt vom Webdesigner einiges Wissen über CSS.

Weitere Möglichkeiten

Anstatt rein feste oder rein flexible Breiten zu wählen, sind auch Mischformen möglich. Dann wird meist der Nebenspalte eine feste Pixel-Breite gegeben, während die Spalte für den Inhalt mit Prozentwerten arbeitet.

Mit Hilfe der CSS-Eigenschaften min-width und max-width können wir die Breiten bei flexiblen Designs besser kontrollieren. So können wir z.B. die Mindestbreite auf 760 Pixel und die Maximalbreite auf 1200 Pixel setzen, um eine gute Kontrolle über das Layout zu haben und die Lesbarkeit zu gewährleisten. Allerdings interpretiert der Internet Explorer diese Eigenschaften noch nicht.

Alternativ kann es in manchen Fällen sinnvoll sein, Breiten in der Einheit em festzulegen. Diese Einheit orientiert sich an der Schriftgröße. Die Breite der Box wächst dadurch zusammen mit der Schriftgröße. Mehr dazu finden Sie in den folgenden Links.

Weiterführende Links

Kommentare

Robert
am 16.12.2005 - 16:06

Fakt ist doch aber auch das einige Designs gar keine Möglichkeit für flexibles Umsetzen haben. Da kann man machen was man will :D
oder?

Permanenter Link

markus
am 16.12.2005 - 19:53

Beide Lösungen haben verschiedene Nachteile:

Auf der einen Seite sollte man immer sicherstellen, dass Zeilen im Fließtext nicht zu lang werden, weil dadurch das flüssige Lesen erschwert wird (man verliert die Zeile beim Zurückspringen). Es gibt immer Leute, die noch einen breiteren Bildschirm haben als ihr!

Auf der anderen Seite verursachen aber auch gerade feste Breiten bei großen Bildschirmen ebensogroßen Ärger: die vom Nutzer größer eingestellte Schrift wird dann in eine winzige Box gequetscht und lässt große Teile des Bildes ungenutzt. Opera-Nutzer sind da natürlich einen Vorteil, weil dieser Browser auch alle Boxen gleichmäßig vergrößern kann.

Sehr cool finde ich die Methode auf tagesschau.de: dort vergrößert sich das gesamte Layout mit, wenn man die Schrift mit Strg++ vergrößert (auch in Firefox ohne Opera). So einen Kompromiss würde ich mir bei vielen Webseiten wünschen -- einshcließlich Webkrauts.

Permanenter Link
Dirk Jesse

Dirk Jesse (Webkraut)
am 17.12.2005 - 00:20

Eine Pixel-Angabe für max-width erachte ich als nicht sonderlich sinnvoll. denn damit wird zwar die Breite des Layouts begrenzt, jedoch ohne die eingestellte Schriftgröße zu berücksichtigen.

Ich empfehle daher für min-width die 760 Pixel um die 800x600 Auflösung abzusichern. Für max-width empfiehlt sich hingegen ein Wert auf Basis von em. Damit erreicht man ebenfalls den gewünschten Effekt, dass das Layout nicht endlos in die Breite gezogen wird. Zudem profitieren User mit großen Bildschirmen denn durch die Skalierung der Schriftgröße wächst die Layoutbreit proportional mit.

Permanenter Link

Edoardo
am 17.12.2005 - 02:56

Für max-width empfiehlt sich hingegen ein Wert auf Basis von em. Damit erreicht man ebenfalls den gewünschten Effekt, dass das Layout nicht endlos in die Breite gezogen wird.

Das will mir nicht einleuchten. Durch die Angabe in em wird doch unter Umständen die Seite so breit, daß ein horizontaler Scrollbalken entsteht.

Für wie wichtig haltet ihr die Tatsache, daß man Taskleisten auch an die seitlichen Bildschirmränder setzen kann?
Ich hab' unter WinXP (und in der Uni unter KDE) die Leiste am rechten Bildschirmrand. Bei 800x600 bringt mir das mit 760 Pixeln nichts.

Permanenter Link
Dirk Jesse

Dirk Jesse (Webkraut)
am 17.12.2005 - 23:08

@Edoardo

Das will mir nicht einleuchten. Durch die Angabe in em wird doch unter Umständen die Seite so breit, daß ein horizontaler Scrollbalken entsteht.

Das mag passieren,wenn man mit relativer Positionierung arbeitet. Mit floats hingegen gibts da keine Probleme.

Permanenter Link

Edoardo
am 18.12.2005 - 03:36

Auch wenn man ein sogenanntes wrapper-div in em dimensioniert? Das wird doch dann immer breiter und floatet nicht (logisch, ohne Nachbar).

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 18.12.2005 - 13:21

@Robert:
Sicher, wenn du ein Design anstrebst, das etwa ein Hintergrundbild in fester Breite nutzen will/muss, kannst du das nicht einfach so flexibel machen (etwa joshuaink.com).
Du solltest besser wissen, dass du ein flexibles Layout willst, bevor du mit dem Design anfängst.

@markus:
tagesschau.de nutzt eben die Einheit em für die Breiten.

@Edoardo:
Nach meiner Erfahrung gibt es sehr wenige Leute, die sich ihre Leiste am rechten Bildschirmrand setzen. Ich ignoriere die einfach. Außerdem wäre es ja möglich, immer mit geöffneten Bookmarks oder RSS-Feeds auf der linken Seite zu surfen. Wenn du das alles einkalkulierst wird dein Design richtig schmal.

@Dirk:
Natürlich kann bei der Einheit em ein horizontaler Scrollbalken entstehen. Floats oder nicht.

Permanenter Link
Dirk Jesse

Dirk Jesse (Webkraut)
am 21.12.2005 - 16:19

@Nikolai
Ich hoffe, ich bekomme in den nächsten Tagen die neue YAML-Version fertig. Dort ist dann ganau diese Kombation für min- und max-width im Einsatz.

Horizontale Balken entstehen dabei extremem Zoom, wenn der Browser Texte nicht mehr umbrechen kann und diese aufgrund der großen Schrifgröße aus dem Layout ausbrechen.

Permanenter Link
Dirk Jesse

Dirk Jesse (Webkraut)
am 21.12.2005 - 16:20

Sorry, Schreibfehler: Horizontale Balken entstehen erst bei extremem Zoom ...

Permanenter Link

Die Kommentare sind geschlossen.