Was wurde in den letzten Wochen nicht alles geschrieben über fixe, elastische und fluide Layouts. Und über ihre Vor- und Nachteile.
Ein Layout soll folgende Erwartungen erfüllen:
- Bei Textvergrößerung soll es nicht kaputt gehen
- Die Laufweite der Zeilen soll nicht zu lang sein
- Horizontales Scrollen ist nicht erlaubt
- Es soll an den Seiten kein Platz „verschwendet“ werden
Fixe Layouts erfüllen die Punkte 2 und 3, elastische die Punkte 1, 2 und 4. Fluide Layouts sind 1-, 3- und 4-kompatibel.
Was liegt da näher als die Stärken von zwei Layouts zu verbinden. Namentlich sind das fluide und elastische Ansätze. Die Lösung erhebt keinen Anspruch auf Vollständigkeit, zeigt aber, dass man auch Wege abseits der klassischen Layout-Dreifaltigkeit gehen kann.
Auf der Beispielseite sieht man den einfachen, beispielhaften Seitenaufbau:
<div id="container"><div id="content">…</div><div id="aside">…</div></div>
Mit Text-Formatierung und ähnlichem wollen wir uns nicht länger aufhalten, deshalb binden wir die YUI-Grids- und -Base-CSS-Dateien ein, die eine Basisformatierung ermöglichen. (Für solche Beispiele optimal.)
Wir beginnen indem wir dem Container eine Breite in em zuweisen, in diesem Fall 45em (was hier willkürlich ist).
Inhalte und Seitenleiste definieren wir in Prozenten. Im Beispiel für die Inhaltsspalte 61% und für die Seitenleiste 35% und floaten beide Container nach links bzw. rechts.
Das ist so weit nicht aufregend, wir haben damit ein elastisches Layout gebaut und auch noch nicht das horizontale Scrollen vermieden. Das tun wir indem wir die (maximale) Breite des Containers begrenzen, in diesem Fall auf 100%. (Für den entsprechenden IE6-Hack sind Sie selbst verantwortlich, ich werde dafür keine Haftung übernehmen ;))
#container {text-align:left;width:45em;margin:0 auto;max-width: 100%;}#content {float: left;width: 61%;background-color:#ee9;}#aside {float: right;width: 35%;background-color:#99e;}#content, #aside {border: 1px solid #333;}
Bis der Container so breit ist wie das Fenster haben wir effektiv ein elastisches Layout, danach ist es ein fluides und die Schriftart wird nur mehr vergrößert.
Diese Layout-Art funktioniert in allen Browsern mit Textvergrößerung oder funktionierender Zoomfunktion (also Opera, getestet in 9.5, und nicht im IE7 – der das einmal Gerenderte fast wie ein Bild vergrößert).
Kommentare (Abonnieren)
Siegfried
1. Juli 2008, 07:28 UhrFixe Layouts erfüllen nicht Punkt 3. Und Punkt 2 auch nur unter Umständen resp. begrenzt.
2: Laufweite des Textes begrenzt. Wenn der Text verkleinert wird, wird bei einem fixen Layout die Laufweite des Textes größer. Die Laufweite wird damit nur durch die minimale Schriftgröße nach oben begrenzt. Auf der anderen Seite wird die Laufweite bei Textvergrößerung kleiner. So lange, bis Punkt 1 (Bei Textvergrößerung soll das Layout nicht kaputt gehen) zum tragen kommt.
3: Kein horizontales Scrollen. Das erfüllt ein fixes Layout nur auf Monitoren mit einer bestimmten Mindestbreite. Heutzutage sind die meisten Webweiten für eine Breite von 1024px entworfen. Bislang ging der Trend zu immer höheren Auflösungen. Aber spätestens seit dem Erfolg des eeePC mit seinen 800px horizontal ist das anders. Ein fixes Layout für 1024px Breite muss auf so einem PC horizontal gescrollt werden.
Und noch eines generell: Nicht alle Punkte lassen sich gleichzeitig verwirklichen. In der Regel wird man wohl einen dieser Punkte “opfern” müssen. Bei Deiner Seite muss ich beispielsweise horizontal scrollen, da kleine Schriften nicht (mehr) lesen kann und daher auf 150% vergrößern muss. Dennoch bleibt Deine Seite immerhin benutzbar. Ein fixes Layout erfüllt hingegen praktisch gar keinen Deiner 4 Punkte. Bei Textvergrößerung geht es kaputt, bei Textverkleinerung wird die Laufweite zu groß, bei kleinen Bildschirmen muss man horizontal scrollen, und bei großen Bildschirmen wird jede Menge Platz verschwendet. Ein komplett fixes Layout ist also der denkbar schlechteste Ansatz.
Eric Eggert
1. Juli 2008, 08:12 UhrHallo Siegfried,
ja, eigentlich hast du recht. Ich betrachte das Fixe Layout allerdings in der Auflösung für das es erstellt wurde und bin nicht so kritisch :) Der Anwendungsfall „Textverkleinerung“ kommt doch eher selten vor, da Schriften meist zu klein statt zu groß sind.
Danke für deinen Kommentar.
Matthias Mees
1. Juli 2008, 09:54 UhrAngesehen davon, dass ich persönlcih eine max-width von 100% fürchterlich finde und eher 95% wählen würde: Hat es einen tieferen Sinn, dass Du dem Ganzen keine min-width zuweist?
Eric Eggert
1. Juli 2008, 12:48 UhrMatthias: Was wäre denn da eine sinnvolle Min-Width? ob 95 oder 100% ist für die Demo der Technik nun wirklich nicht entscheidend, oder?
macx
1. Juli 2008, 14:53 UhrHmmm… wenn ich in der Zwischenzeit nichts geändert habe, ist technikwuerze.de genau so umgesetzt – seit einer gefühlten Ewigkeit.
Perun
1. Juli 2008, 15:22 Uhr“… Horizontales Scrollen ist nicht erlaubt …”
Ich finde das man dies sehr häufig zu starr und zu dogmatisch sieht. In letzter Zeit kommt mir in der ganzen Layoutdisskusion ein bisschen zu viel dogmatische Sichweise rein.
Sicherlich, horizontales Scrollen sollte man nach Möglichkeit vermieden. Da gebe ich dir Recht.
Wenn allerdings der Nutzer den Text um 150% vergrößert, so dass die rechte Spalte mit der Werbung aus dem Viewport gerät wüsste ich jetzt auf Anhieb nicht wo das Usability-Problem sein sollte.
Eric Eggert
1. Juli 2008, 15:54 UhrHinweis: Im Artikel steht NICHT „revolutionär neu“, „perfekte Lösung“ und „muss man immer so machen“. Und damit ist das Experiment „Kommentare“ auch auf dieser Webseite gescheitert.