Web-Design für alle Browser

Der eigentliche Zweck von Design ist die Verbesserung der Kommunikation durch das Ansprechen des Besuchers und die Erhöhung der Lesbarkeit des Inhalts durch visuelle Hilfen wie zum Beispiel Überschriften, die sich vom Fließtext abheben.

Der Schlüssel für gutes Design besteht in der erfolgreichen Anordnung und Proportionierung der einzelnen Elemente. Für die meisten Designer bedeutet dies die Kontrolle über die exakte Position und Größe jedes einzelnen Elements auf einer Seite. Aber in Wirklichkeit ist es die Beziehung der Elemente untereinander, die maßgeblich ist, nicht deren absolute Größe oder Position. Größe und Position sind nur Werkzeuge, die der Designer nutzt um dem Besucher diese Beziehungen zu vermitteln.

Man kann leicht zeigen, dass gutes Design nicht von der absoluten Größe und Position abhängt: Man muss nur einmal ein gelungenes Seitenlayout von einem beliebigen Medium proportional vergrößern oder verkleinern. Ein gutes Basis-Design funktioniert bei jeder Größe, vom kleinen Vorschaubildchen bis zum Posterformat oder noch größer. Die meisten guten Layouts werden sogar eine nichtproportionale Größenänderung verkraften, ohne ihre Wirkung einzubüßen. Diese Demonstration funktioniert deshalb fast immer, weil es die Abfolge und die relative Größe der Elemente auf einer Seite sind, die für den Erfolg des Layouts verantwortlich sind, und nicht ihre exakte Größe oder Platzierung auf der Seite.

Theoretisch sollte es nicht allzu schwierig sein, dieses Konzept auch auf das Design von Webseiten zu übertragen. Statt die Seite der Größe der verschiedenen Browser-Fenster anzupassen (Zoom), sorgt der Browser für einen neuen Fluss von Text und Bildern. Diese Neuanordnung behält die Reihenfolge und die relative Größe der Seiten-Elemente bei, wodurch die wichtigsten Layoutmerkmale gewahrt bleiben. Wenn man den Seiten-Elementen erlaubt, sich innerhalb des Browser-Fensters neu anzuordnen, bringt das zwar einige Herausforderungen mit sich, es eröffnen sich jedoch auch viele neue Design-Möglichkeiten.

Dies ist keineswegs nur ein Gedankenspiel, sondern ein vielfach erprobter und bewährter Ansatz für das Web-Design, der als Liquid Layout bezeichnet wird. Der erfolgreiche Einsatz eines solchen Layouts erfordert Voraussicht und Planung, vor allem aber die Bereitschaft, sich vom Anspruch der vollständigen Kontrolle über die Position jedes Seiten-Elements zu verabschieden, um stattdessen dem Seitenlayout eine flexible Anpassung zu erlauben. Dies bedeutet, das Layout eher unter den Aspekten Struktur und Fluss zu betrachten und die wichtigsten Beziehungen zwischen den Seiten-Elementen festzulegen, statt nach pixelgenauer Kontrolle zu streben (Die Parallelen zu strukturellem Markup und CSS-Styles sind nicht zufällig.).

Ein flexiblerer Ansatz für das Design von Webseiten bringt viele Vorteile mit sich. Sobald man einmal akzeptiert hat, dass das Seitenlayout aus einem dynamischen Design besteht, das fließt und sich unterschiedlichen Browser-Fenstern anpasst, merkt man sehr schnell, dass eine Webseite nicht in jedem Browser-Fenster identisch angezeigt werden muss, um gut auszusehen. So kann man die Bandbreite der akzeptablen Darstellungsweisen positiv nutzen und Seiten erstellen, die im Ziel-Browser gut wirken und gleichzeitig in allen Browsern gut lesbar bleiben.

Je toleranter ein Seitenlayout gegenüber unterschiedlichen Browsern ist, desto weniger wird man auf Code-Hacks und andere Methoden zurückgreifen müssen um mit den Browser-Inkompatibilitäten zurechtzukommen. (Auch wenn man solche Tricks wohl nicht völlig vermeiden kann, lässt sich der Code dennoch mit jedem Hack weniger schneller entwickeln und einfacher verwalten.) Und nicht zuletzt dürfte die Benutzung von Liquid Layouts bessere Programmierpraktiken fördern, namentlich strukturelles Markup in Kombination mit CSS-Styles.