Montag,
20. Februar 2006

Mathias Schäfer hat sich Ende Januar im SelfHTML Weblog in einem sehr umfangreichen, in die Tiefe gehenden und interessanten Artikel “Grundlagen für Spaltenlayouts mit CSS” mit der Erstellung flexibler Layouts mit Hilfe von float-Umgebungen beschäftigt. Ein Ansatz, der auch hinter dem YAML-Framework steht. Allerdings klingt in seinem Fazit wenig Überzeugung in Bezug auf CSS-Spaltenlayout durch - besonders im Vergleich zu Tabellenlayouts. Daher möchte ich mit einigen Gedanken die Diskussion anregen.

Die vorgestellten Grundlagentechniken haben sich als essentiell bei komplexem CSS-Layout erwiesen. Sie ermöglichen eine flexible Mehrspaltigkeit und eine entsprechende gestalterische Freiheit, wie sie bei Tabellenlayouts selbstverständlich ist, früheren CSS-Layouttechniken aber fehlte. Verschachtelte float-Umgebungen werden damit zu einem mächtigen Werkzeug.

Gleichzeitig fällt auf, dass der Aufwand vergleichsweise gigantisch ist, von Browserfehlern ganz abgesehen.

Auch an anderen Stellen im Web habe ich bei der Diskussion pro/contra Tabellen- oder CSS-Spalten das Argument vernommen, dass vergleichbare CSS-Layout um ein vielfaches komplizierter seien. Ganz zu schweigen von den vielen erforderlichen Browser-Hacks, um den IE auf Linie zu halten.

Doch was ist dran an diesem Argument?

 

Eines ist klar. Die Layout-Gestaltung mit fließenden und flexiblen Containern erfordert ein Umdenken in der Art und Weise, wie Webseiten gestaltet werden. Doch flexible, floatende Boxen sind keine Erfindung des 21. Jahrhunderts. Bereits auf meinem alten Amiga 500 konnte ich grafische Benutzeroberflächen auf vergleichbare Art und Weise gestalten. Sicher, man muss sich in das Thema hinein denken. Aber ist das Lernen nicht was Gutes? Markupfreie Clearing-Methoden sind keine vom Teufel hergebrachten Hacks sondern die konsequente Anwendung der Möglichkeiten von CSS2. Die IE braucht bei dieser Art der Layoutgestaltung ein paar echte CSS-Hacks, allerdings sind diese mittlerweile sehr gut dokumentiert. Und für das reine Layout sind weit weniger Kniffe erforderlich als man denkt. Der Großteil der im YAML-Framework dokumentierten und beseitigten IE-Bugs tritt bei einem Tabellenlayout ebenso auf und hat daher nichts mit der Verwendung von floats zu tun.

Mathias Schäfer kommt zu Beginn seines Fazits selbst zu dem Schluss:

... Verschachtelte float-Umgebungen werden damit zu einem mächtigen Werkzeug.

Doch wie wertvoll ist diese Erkenntnis, wenn man nicht bereit ist, die Möglichkeiten der neuen Technik auszuloten? Es klingt als seien float-Layouts nur Papiertiger, denn bereits im nächsten Absatz ist zu lesen:

Gleichzeitig fällt auf, dass der Aufwand vergleichsweise gigantisch ist, von Browserfehlern ganz abgesehen. Zwar hat das reine CSS-Layout mit seiner konsequenten Trennung von Inhalt und Präsentation gewisse eigentümliche Vorteile. In erster Linie ging es aber darum, »lediglich« das Verhalten einer einfachen Layouttabelle mit CSS nachzuempfinden. Wenn man die komplexe Theorie und die Schwierigkeiten der Praxis betrachtet, so ist die übliche Umsetzung <table id=“layouttabelle”><tr><td id=“links”>links</td><td id=“rechts”>rechts</td></table> bei weitem einfacher zu verstehen und zu implementieren.

Diese Argumentation ist, wie ich finde, genau der falsche Weg. Wozu eigentlich der Aufwand, die technischen Details von float-Layouts so detailliert zu erklären wenn anschließend doch die Layouttabelle als der Heilsbringer gepriesen wird? Fungiert hier das erforderliche Wissen als Abschreckung?

Das YAML-Framework ist keineswegs dazu konzipiert, nur das Verhalten einer Layouttabelle nachzuempfinden. Gleichwohl ist es in der Lage, ein Spaltenlayout darzustellen. Aber es kann eben - im Gegensatz zur Layouttabelle -  noch viel mehr. Die freie Anordnung der einzelnen Spalten, der vom Browser selbstständig gesteuerte Textfluss und die Möglichkeit des einfachen Abschaltens bzw. Umgestaltens einzelner Container sind wichtige Vorteile, die eine medienübergreifende Nutzung der Inhalte erst sinnvoll ermöglichen. Flexible Boxengeometrien ermöglichen eine Anpassung an unterschiedlichste Auflösungen. Die Linearisierung und das Abschalten der Spalten ermöglichen eine optimale Aufbereitung der Inhalte für den Druck, PDAs, Textbrowser oder Screenreader.

Layouttabellen scheitern bereits an der Linearisierung im Internet Explorer. Dies ist durch keinen CSS-Hack zu beheben. Trotzdem wird der Nutzen von float-Layouts aufgrund der für die browserunabhängig korrekte Bildschirmdarstellung erforderlichen Hacks angezweifelt und die vergleichsweise “einfache” Implementation der Layouttabelle gepriesen. Darstellungsprobleme im IE allein sind für mich jedoch kein stichhaltiges Argument, denn sie lassen sich beheben - siehe YAML bzw. tausende tabellenlose, rein CSS-basierte Websites im Netz.

Ist es also wirklich sinnvoll, die Flexibilität und Nutzungsqualität eines Layouts für den User zugunsten des bequemeren Lebens des Webdesigners zu beschränken und auch im Jahre 2006 noch Layouttabellen zu empfehlen? Wäre es nicht viel interessanter und wichtiger, die medienübergreifenden Vorteile rein CSS-basierter Layouts effektiver zu nutzen?  Haben nicht letzlich sowohl Webdesigner als auch der spätere Webseitenbesucher mehr davon?

Jens Grochtdreis hat sich ebenfalls einen interessanten Beitrag zu diesem Thema veröffentlicht. Er stellt die Frage, ob Spaltenlayouts überhaupt das erstrebenswerte Ziel CSS-basierter Layouts sein sollten. Schließlich ist das Grundelement von CSS-Layouts, der DIV-Container, eine Box und keine Spalte.

Meiner Meinung nach sind Mehrspalten-Layouts für viele Layout-Aufgaben eine gute, wenn nicht sogar optimale Lösung. Zeitungen und Zeitschriften würden heute sicher anders aussehen, wenn Spalten für den Textsatz nicht klare Vorteile hätten. Webseiten müssen im Gegensatz zu Printmedien zusätzlich in verschiedensten Auflösungen - vom PDA bis zum 20’’ TFT benutzbar sein. Die Mehrspaltigkeit ermöglicht hierbei in Verbindung mit flexiblen Schriftgrößen eine gute Skalierung der Inhalte und verbessert in der Regel auflösungsunabhängig die Lesbarkeit. Für Standardaufgaben sind Spaltenlayouts daher auch in Zukunft die Grundlage der meisten Standardlayouts.

Nachtrag, um Mißverständissen vorzubeugen: Ich schätze Mathias Arbeit bei der Erläuterung der vielschichtigen Zusammenhänge von CSS-Layouts sehr hoch ein. Er hat YAML zuvor sorgfältig analysiert und geht bei seinen Erläuterungen teilweise viel tiefer ins Detail als ich bei YAML. Was mir letztlich in diesem Grundsatzartikel fehlt ist, dass der Lohn dieser Mühe für den Leser nicht deutlich wird. Ich halte es für ungünstig pro CSS-Designs zu argumentieren, solange es “nur” darum geht, das Verhalten von Layouttabellen 1:1 nachzubilden. Natürlich ist in diesem Fall der Aufwand vergleichseise hoch. Beide Ansätze werden verwendet, um Spaltenlayouts zu erzeugen. Nur können eben Tabellen nur Spalten und CSS-Layout neben Spalten noch eine ganze Menge mehr. Meine Kritik richtet sich daher in erster Linie an den, meiner Meinun nach, unpassenden Vergleich.


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.