Beispiel gefällig? Im Weblog von Dirk Jesse, seines Zeichens Browserbug-König von Deutschland und feuriger Verfechter des flexiblen Layouts, gibt es einen interessanten Artikel, bei dem die Aspekte von flexiblen Layouts in den Kommentaren heftig diskutiert werden.

Unabhängig von der Emotionalität der Diskussion erscheint es jedoch ab und zu sinnvoll, einen Schritt zurückzutreten und die verschiedenen Layout-Modelle in Ruhe zu besprechen. Damit auch Anfänger etwas von der Diskussion haben. Und damit in einem sachlichen Ton die Vor- und Nachteile aufgezeigt werden können.

Fixes Layout

(Beispiel: Spiegel Online)

Auch bekannt als »festes Layout« oder »pixelbasiertes Layout«. Es ist die einfachste Form, ein Screendesign in CSS zu gießen, und dennoch kann man einiges falsch machen! Zunächst das Grundprinzip: Alle Breitenangaben von Layoutelementen wie Kästen, Spalten, horizontalen Abständen und Wrappern werden mit Pixelwerten beschrieben, damit das dargestellte Bild im Browser exakt dem entspricht, was der Screenentwurf vorgibt.

Wieso nur die Breitenangaben? Nun, der CSS-Profi meidet traditionell Höhenangaben, wo immer es geht. Denn wo HTML-Text dargestellt wird, kann dieser auch mitsamt der Zeilenhöhe vom Nutzer vergrößert werden; und durch die festen Spaltenbreiten verschiebt sich damit zusätzlich der Zeilenumbruch. Die Textelemente benötigen also in der Höhe mehr Platz und sollten nicht durch höhenbeschränkte Boxen aufgehalten werden! Also: die Höhe von Elementen lieber offen lassen!

Das mit der layoutzerstörenden Textskalierung ist allerdings nur die halbe, fast schon veraltete Wahrheit. Denn inzwischen arbeiten drei der vier großen Browser per default mit der Pagezoom-Technik, wo nicht nur die Schriftgröße verändert wird, sondern die gesamte Seite und alle Elemente mitskalieren – in der Breite wie auch in der Höhe. Das hat natürlich Vorteile (die Proportionen des Layouts bleiben unangetastet) und Nachteile (unnötig hoher Platzverbrauch beim Skalieren). Dennoch geht der Trend klar in diese Richtung – und das sollte man immer im Hinterkopf behalten.

Zwei klare Schwächen des fixen Layouts können nicht unerwähnt bleiben: Die Darstellung auf sehr breiten und sehr schmalen Viewports. Ersteres ist eigentlich halb so wild – man sollte allerdings in aller Regel sein Layout horizontal zentrieren, da sonst die freie Fläche neben dem eigentlichen Inhalt arg leer wirkt. Nutzer von kleinen Bildschirmen (z. B. vom EEE-PC) haben hingegen stärker zu leiden, denn sie müssen unter Umständen mit horizontalen Scrollbalken leben. Die Wahl der richtigen Breite bleibt also ein Kompromiss, der sich zwar seit geraumer Zeit bei etwa 950-980 Pixeln eingependelt hat, aber dadurch nicht weniger kompromissig geworden ist.

Flexibles Layout

(Beispiel: Amazon)

Häufig auch als »flüssiges« oder »liquides« Layout bezeichnet. Diese Layoutmethode existiert genauso lange wie das Web selber. Von Haus aus sind nämlich sämtliche Block-Elemente von HTML mit einer flexiblen Breite versehen, die sich stets soweit ausdehnt, wie Platz vorhanden ist. Einen unsichtbaren, begrenzenden Kasten als »virtuelle Papierseite« zu verwenden war erst mit den total neumodischen HTML-Tabellen möglich, die gegen 1995 langsam in Mode kamen. Von CSS und Pixelwerten war damals noch keine Rede. Doch zu dieser Zeit kam eben auch das Marketing ins Web und damit die Werbeagenturen und Grafikdesigner. Und der große Traum der durchgestalteten Pixelperfektion führte beinahe zu einem Aussterben des flexiblen Layouts, zumindest was große und professionell gestaltete Angebote anging.

Denn der große Nachteil der flexiblen Layouts ist der Kontrollverlust über die Proportionen des Designs: Man kann überhaupt nicht bestimmen, wie breit die Spalten sind, die der Nutzer zu lesen hat. »Irgendwo zwischen 800 und 1600 Pixeln« ist für einen Gestalter leider keine befriedigende Aussage – schon gar nicht, wenn dieser vorher 15 Jahre lang Printbroschüren gestaltet hatte.

Viel wichtiger sind jedoch die Vorteile! Es gibt kein mediengerechteres Format als das flexible Layout, denn schließlich ist das Web deswegen so großartig, weil es sich eben seinem Ausgabemedium anpassen kann. Auf kleinen Bildschirmen muss man ein wenig stärker vertikal scrollen (was aber ungleich leichter fällt als in horizontaler Richtung), dafür gewinnt man auf breiten Viewports eine Menge Platz und Übersicht. Darüber hinaus kann man auf halbwegs vernünftigen Browsern eine maximale Gesamtbreite festlegen, damit die zu lesenden Textzeilen nicht gar so lang werden. Und natürlich ist man frei, Spalten mit flexibler Breite zu kombinieren mit fixen Spalten. Und wenn man clever mit CSS-Hintergrundbildern umgehen kann, lassen sich in vielen Fällen die unterschiedlichen Proportionen mit visuellen Tricks ausgleichen und damit die Situation entschärfen (Schönes Beispiel: @media 2006)

Eine komplexe Website (oder gar eine Webapplikation) mit flexibler Breite umzusetzen, ist eine echte Herausforderung – gerade wenn man viel mit Formularen und/oder Bildern arbeiten muss. Wenn man außerdem noch großen Wert auf stimmige Proportionen legt, wird es fast unmöglich. Doch wenn der Fokus des Projektes sowieso mehr auf der Benutzbarkeit als auf dem Design liegt, und man vielleicht aufgrund von User Generated Content sowieso nicht sicher vorhersagen kann, wieviel Inhalt in welcher Weise strukturiert auf der Seite erscheinen wird, lohnt es sich, darüber nachzudenken. Platz sparen und Inhalte mediengerecht aufbereiten – das sind die Hauptargumente für ein flexibles Layout.

Zoomlayout

(Beispiel: IKEA)

Auch bekannt als »elastisches Layout«. Ende 2003 wurde dieses Layout-Modell erstmal einem größeren Kreis von Webdesignern bekannt – Auslöser war ein Beitrag zum »CSS Zen Garden«-Projekt: Der Elastic Lawn So etwas kannte man bis dato nicht: Ein Layout, das beim Verändern des Schriftgrades komplett proportional mitwächst! (Zu dieser Zeit war Opera der einzige Browser, der eine Pagezoom-Funktion mitlieferte und seiner Zeit damit weit voraus.)

Der Trick bei der Sache: Man missbraucht eine Maßeinheit, die eigentlich für Schriftgrade gedacht war, für die Zuweisung aller Höhen und Breitenangaben. Statt px also em. Wenn man es konsequent macht, dann bleiben die Proportionen des Layouts komplett identisch zur 100%-Darstellung. Wenn man aber clever ist und ein wenig Platz sparen will, kann man bei den Höhenangaben und auch bei einigen horizontalen Abständen wieder traditionelle Pixelwerte setzen – dann stimmen zwar beim Zoomen die Proportionen nicht mehr, aber dafür passt ein wenig mehr Inhalt ins Browserfenster.

Der Nachteil: em-basierte Layouts können kniffelig sein, da sich die zu verwendenden Werte in geschachtelten Elementen leider vererben. Somit muss man immer genau wissen, welche intern berechnete Schriftgröße einem Element aktuell zugewiesen ist, und daraus dann die gewünschte Breite errechnen. Das führt oft zu krummen Kommawerten, wenn man exakt arbeiten möchte – und das will man natürlich.

Flexible Zoomlayouts

(Beispiel: Vitamin)

Oder doch besser »Zoomlayout mit Breitenbegrenzung«? Eine offizielle oder eingebürgerte Bezeichnung hat diese kombinierte Layoutform noch nicht, obwohl sie meines Erachtens technisch am interessantesten ist! Es handelt sich dabei um eine Kombination aus Zoom- und flexiblem Layout, und kann auf unterschiedliche Weise gebildet werden. Die einfachste Variante dürfte so gehen: Man geht von einem flexiblen Layout aus und baut dieses ganz traditionell mit Prozentangaben auf. Es gibt jedoch einen äußeren Rahmen um das gesamte Layout herum, dessen Breite mit em beschrieben wird, der aber auch eine maximale Breite in Prozent und vielleicht eine minimale Breite in Pixeln besitzt. Da alle inneren Breitenangaben in Prozent von dem äußeren Rahmen abhängen, reagieren sie ebenfalls auf die Skalierung des Schriftgrades.

Man erschlägt mit diesem Modell eine ganze Reihe von Problemen, und pickt sich die Vorteile aller drei vorangegangenen Modelle heraus:

• In der 100%-Ansicht kann so eine Seite genauso exakt und proportional aussehen sein wie ein Pixellayout.
• Die Seite kann in allen Browsern schön gezoomt werden, auch wenn die Pagezoom-Technik noch nicht nativ eingebaut ist.
• Die Seite ragt niemals horizontal über den Rand hinaus, sondern nutzt bei hoher Textskalierung optimal den verfügbaren Platz des Viewports.

Was nimmt man also?

Wenn man es so im Überblick sieht, müssten also alle Websites als flexible Zoomlayouts umgesetzt werden, richtig? Dazu kann man nur mit einem Jein antworten, denn selbstverständlich spricht auch vieles für ein reinrassiges flexibles Layout, wo auch bei normaler Schriftgröße der Viewport optimal ausgenutzt wird. Und wenn es schnell gehen soll, hackt man natürlich einfach die Pixelwerte aus dem Photoshop in sein CSS und vertraut auf moderne Browser mit Zoomfunktion – oftmals einfach die pragmatischste Lösung und durchaus legitim im ausgehenden Jahr 2008.

Doch ein wenig idealistisch sollten wir zum Schluss natürlich trotzdem sein. Wer es sich vom Aufwand her leisten kann, sollte in jedem Falle überlegen, entweder ein »richtiges« flexibles Layout zu wählen, oder – wenn die korrekten Proportionen in der 100%-Ansicht eine wichtige Rolle spielen – ein flexibles Layout mit Zoom-Komponente und einer Ausgangsbreite von unter 1000 Pixeln. Die Mehrarbeit wird vielleicht dem Kunden nicht direkt auffallen. Und auch der einzelne Besucher wird dem Webdesigner nicht sofort die Füße küssen. Aber das sind wir ja gewohnt: Große Sorgfalt im Verborgenen, dafür ein gutes Gefühl im Herzen, und eine positive Reputation in der Zunft – dafür kann man doch auch mal den Taschenrechner bemühen und ein paar em-Werte ausrechnen.