praegnanz.de büro für intervernetzte medien

Gerrit, 09.10.2008

Pixel, Zoom und Flüssigkeit – Layout-Modelle im Überblick

Erstaunlich, worüber sich Webdesigner streiten können, und mit welcher Leidenschaft sie es tun! Selbst für viele Zunftmitglieder ist es nicht wirklich zu verstehen, wie sehr die Frage nach dem richtigen Layout-Modell die Gemüter bewegt.

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.

22 Kommentare

  1. Christian am 9. Oktober 2008 #

    »Nun, der CSS-Profi meidet traditionell Höhenangaben, wo immer es geht.«

    Stimmt!

  2. Tobias am 9. Oktober 2008 #

    Schön zusammengefasst.

    Ich sehe die Pagezoom-Technik ja eher als Rückschritt an. Zwar liefert sie bei vielen Webseiten ein besseres Ergebnis als die bisherige Technik, sie nimmt dem Entwickler aber leider auch die Möglichkeit auf die Zoomfunktion Einfluss zu nehmen. Es wird gnadenlos alles vergrößert.

    Dem Taschenrechner bei den Em-Werten kann man durch ein geschickt aufgebautes CSS Layout in vielen Fällen auch aus dem Weg gehen.

  3. MiSc am 9. Oktober 2008 #

    Schöne Zusammenfassung, war wieder mal Zeit!

  4. Gerrit am 9. Oktober 2008 #

    @Christian: Jaja, ich weiß. Scheiß-Konzeptlayouts. Einer der Gründe, warum ich ein Redesign brauche. In das Layout reinzutexten ist keine gute Idee.

  5. Christian am 9. Oktober 2008 #

    @Gerrit Aber warum nimmst du nicht wenigstens min-height für solche Sachen? Wenns dann mal eine Box zu sehr füllt, dann ist dein Layout zwar nicht mehr komplett synchron, aber wenigstens fließt dir dein Text nicht sonstwohin.

    Oder mach wenigstens overflow: hidden; aber das ist doch unfein…

  6. Simon Wehr am 9. Oktober 2008 #

    @ grüne Kästen am Rand:
    da macht Dir die Anzeige im Übrigen weit mehr kaputt, als der Textüberlauf!

  7. Simon Wehr am 9. Oktober 2008 #

    … die Anzeige, die jetzt wundersamerweise auf einmal verschwunden ist, meinte ich.
    (Und wieder den Screenshot vergessen, aber wahrscheinlich hats der Gerrit grad umgebaut, der alte Fuchs!)

  8. Gerrit am 9. Oktober 2008 #

    Die Anzeige erscheint unregelmäßig, da habe ich keinen Einfluss drauf. Mir ist schon klar, dass das alles nicht perfekt ist. Deswegen verweise ich auf den geplanten Relaunch, der irgendwann einmal kommen wird.

  9. Christoph am 9. Oktober 2008 #

    @christian
    An dieser Stelle gings wohl nicht :-)

    Kompliment, eine sehr gute Übersicht!
    Und du hast es sogar geschafft, ohne emotionale Verfechterei für die eine oder andere Technik, allen Varianten ihre Vorteile abzugewinnen.

    Die oben angesprochene höchst emotionale und einseitige Diskussion, die ja auch in versch. anderen Blogs ihre Fortsetzung fand, ging mir schon langsam auf den Keks.

    Es ist nun mal so, dass alle Layouttechniken ihre Stärken und Schwächen haben, und es ist durchaus eine Stärke, wenn die Umsetzung kostengünstig zu realisieren ist.

    Man darf auch nicht vergessen, dass die heute zur Verfügung stehenden CSS-Techniken zur Umsetzung mehrspaltiger flexibler Layouts, nicht viel mehr als umständliche Krücken sind. Es geht zwar irgendwie, aber elegant ist anders. Die aktuelle CSS2.1-Version ist halt nie für solch komplexe Dinge konzipiert worden.

    Bis also CSS3 vernünftige Spaltenlösungen bietet, wird das fixe Layout eine kostengünstige sinnvolle Alternative bleiben.

  10. Matthias Mauch am 10. Oktober 2008 #

    Mal einen Ansatzpunkt dazu.

    IE seit Version 5 bietet über die »Extras – Internetoptionen – Eingabehilfen« die Möglichkeit fixe Größen in »px« relativ gut umzusetzen.

    FF hat seit der 1.5 Version keine Möglichkeit mehr, auf »em«-Werte zu reagieren. Wurde einfach aus den Schriftgrößen entfernt. Er nutzt wie Safari und andere »Geckos« als default 16px für Schriftgrößen.

    Opera und Konqueror nutzen Systemeinstellungen, genauso wie der IE. Also die einzigen Browser, die Webseiten auch bei großer Schriftart im Betriebssystem richtig anzeigen (Sehschwäche).

    Meiner Meinung nach sollte sich eine Webseite dem Benutzer anpassen und nicht der Benutzer der Webseite. Mobile Phone, PDA, Kleinbildschirme (9-13 Zoll) oder 800er Auflösungen sollten ohne Scrollen zugänglich sein.

    Somit kommt eigentlich nur das flexible Layout für mich in Frage.

  11. Jörg am 11. Oktober 2008 #

    Flexibles Layout vs. Zoomlayout. Separat über einen Styleswitcher rechts in der Meta-Navigation bzw. im Firefox über Ansicht/Webseiten-Stil vom Nutzer wählbar.

    Unter www.vvo-online.de

    Bei diesem Projekt sind wir zu Beginn von einem flexiblen Layout ausgegangen, welches am Ende aber dem Kunden nicht so recht gefallen wollte. Auf seinem Breitbild TFT … So haben wir die Website um ein Zoomlayout erweitert und das flexible Layout via »Alternate Stylesheet« dennoch verfügbar gemacht.

  12. Eike am 11. Oktober 2008 #

    Der Anfänger freut sich und empfiehlt den Artikel gerne weiter. :-) Danke!

  13. Lars am 14. Oktober 2008 #

    Selbst wenn die neuen Explorer und Füchse die komplette Seite skalieren und nicht nur die Schriften – was passiert bei Nicht-Zoom-Layouts, wenn im OS bereits ein deutlich höherer Schriftgrad eingestellt ist als normal? Dann bringt die komplette Skalierung »mit alles« doch nichts und das elastische Layout ist demzufolge eigentlich doch die beste Wahl. Oder habe ich da einen Denkfehler?

  14. Gerrit am 15. Oktober 2008 #

    @Lars: Probiere das doch mal für uns aus! Ich bin nicht sicher, ob der Browser den Default-Schriftgrad des Betriebssystems erkennt und seine EM-Werte daran anpasst.

  15. Marcus am 22. Oktober 2008 #

    Das Problem sind doch die Entwickler vom Internet Explorer. Bis zur Version 7 war das ein Egoladen…
    Jetzt mit dem IE 7 /8 hat man zwar etliche Funktionen vom Opera und Firefox (mal wieder) abgekupfert, aber sich endlich an die Standards besser gehalten.

    Warum kann man sich nicht an die Vorgaben des W3C Konsortium halten? Ist das so schwer? – Nein, man kocht sein eigenes Süppchen.

    Leider nutzen auch noch so ca. 20 – 30% den alten und unsicheren IE 6. Das Problemkind oder noch schlimmer IE 5.5. Meist aber dienstlich vorgesetzt.

    Wie verhält sich eigentlich Google’s Chrome?

  16. GE am 1. November 2008 #

    Generell könnte ich mir vorstellen, dass das Verhalten von Internetseiten in der Zukunft immer weniger vom Webdesigner beeinflussbar sein wird.

    Schon heute wird die Vorgabe einer fixen Breite von den Browsern mittels Seitenzoom ausser Kraft gesetzt. Welcher Webdesigner hätte denn vor ein paar Jahren schon gedacht, dass die Browser aus seinem fixen Layout ganz einfach mittels Seitenzoom ein elastisches machen??? ;-)

    Vielleicht wird ja in nicht allzu ferner Zukunft auch ein elastisches Layout durch die Browser ignoriert werden. Es wird dann 2 Buttons geben, gleichberechtigt und friedlich nebeneinander auf der Oberfläche des Browsers, Textzoom und Seitenzoom. Wo man draufdrückt, das passiert, unabhängig davon, was im CSS steht, keine Überraschungen mehr.

    Dann entscheidet endlich der Nutzer selbst, wie sich die Seite verhält, ob nur der Text grösser wird oder die ganze Seite, unabhängig davon, was der Webdesigner vorgibt. Wir Webdesigner bestimmen dann nur noch, wie die Seite beim Aufruf unter den Standardeinstellungen aussieht, fixe Breite oder bildschirmfüllend / liquid.

  17. Werner am 18. März 2009 #

    Sehr interessant.
    Die flexibelen Zoomlayouts liefern mir genau das was ich wollte.
    Jetzt muß ich nur noch die Zeit für ein Re-Design finden.

    Ein Problem das nicht nur ich zu haben schein :-)

    MfG Werner

  18. Barney am 24. April 2009 #

    Das Problem ist jedoch das es oftmals in jedem Browser anders aussieht. Zu Zeiten wo jedes Jahr ein neuer IE kommt ist das schon ziemlich nervig die »Hacks« hierfür an alle Browser anzupassen.

  19. webdesign portfolio am 10. Mai 2009 #

    @Matthias: das stimmt so nicht ganz, wird in der css dem body eine schriftgröße zugewiesen nimmt er diese auch als standardwert und vergrössert dann nur die bereiche welche variabel sind.

    generell glaube ich nicht daran das wir als webdesigner nicht mehr die kontrolle behalten, wir müssen nur immer mehr nachlegen und uns damit abfinden das es tag für tag weniger 4:3 bildschirme gibt, und dafür jeden tag immer mehr browser, immer mehr user mit sehschwäche und immer mehr möglichkeiten websites zu gestalten und durch benutzerfreundlichkeiten und barrierefreiheit aufzuwerten ,)

  20. mike1965 am 12. Mai 2009 #

    meine website lief bis vor ein paar tagen auf firefox optimal doch hier muss irgendein bugfix neu geladen worden sein. wer hat auch probleme mit der darstellung in firefox

  21. Minn Kota am 30. Mai 2009 #

    Schöne Zusammenfassung, war wieder mal Zeit!

  22. Haarentfernung am 15. Juli 2009 #

    Sehr schöne Übersicht und Interessante Layout’s.
    Danke für die Zusammenstellung.

Kommentar schreiben

Nutzt Textile zum Strukturieren eures Textes.
SEO-Beiträge werden gelöscht, auch bei thematisch passendem Spam.