Liquid Layout mit CSS

von | 11. Juni 2007 | 2 Kommentare |

Tags: , ,

Werbung

von Jan Hegewald

Häufig verwenden Webseiten ein Layout, bei dem die Breite des Inhalts fest vorgegeben ist. Heute variiert aber die verfügbare Breite für die Darstellung von Webseiten von Anwender zu Anwender sehr stark. Ein Layout, das sich flexibel an den verfügbaren Platz anpasst, ist daher zeitgemäßer als feste Layouts. Lesen Sie, was bei der Erstellung eines solchen Liquid Layouts mit CSS zu beachten ist.

Warum feste Layouts nicht mehr zeitgemäß sind
Die Zeiten, in denen man davon ausgehen konnte, dass 80 % der Besucher einer Seite eine Bildschirmauflösung von 800×600 Pixeln nutzen und mit Vollbild surfen, sind vorbei. Noch nie war die Bandbreite der Geräte, auf denen ein Browser zum Surfen verfügbar ist, so groß. Wenn man heute eine Webseite entwirft, muss man sich darauf einstellen, dass diese einerseits auf Dual-Screen-21-Zoll-Displays mit insgesamt 3200 Pixeln Breite und andererseits auf PDAs mit einer Bildschirmbreite von 320 Pixeln angezeigt werden wird. Das kann nur zufrieden stellend funktionieren, wenn die Webseite nicht auf eine vorher definierte Breite festgelegt wird.

Sicherlich ist es nicht möglich ein anspruchsvolles Layout so flexibel zu gestalten, dass es alle Ansprüche erfüllt. Aber eines, dass den PDA-Benutzer zum ständigen horizontalen Scrollen zwingt und gleichzeitig dem Anwender, der sich einen großen Bildschirm gekauft hat, einen schmalen Webseiten-Streifen irgendwo auf der Anzeigefläche präsentiert und den restlichen Platz ungenutzt lässt, kann auf jeden Fall verbessert werden. So könnte es aussehen:

Schematische Darstellung

Die Beschriftungen in der Abbildung symbolisieren die IDs der einzelnen CSS-Layer, damit man sie im folgenden Quelltext wieder erkennt. Der Layer Navi, der den Layer Menu enthält, erstreckt sich über die gesamte Fensterbreite. Die Layer Menu und Container sind flexibel: sie sollen immer einen bestimmten Teil des Fensters einnehmen und sich damit dynamisch an die Fensterbreite anpassen. Im Layer Container sind noch zwei weitere Layer enthalten: Subnavi an der linken Seite soll immer eine feste Breite haben und der Layer Content nimmt den jeweils verbleibenden Platz innerhalb von Container ein. Um die einzelnen Layer beim Ausprobieren besser unterscheiden zu können, empfiehlt es sich ihnen mittels der CSS-Eigenschaft background-color unterschiedliche Hintergrundfarben zu geben. Wenn man die Layer entsprechend ihrer Namen verwendet, so hat man ein „alltagstaugliches“ Layout.
Doch zunächst brauchen wir ein Grundgerüst für dieses Layout in XHTML; das könnte so aussehen:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
   <body>
      <div id="navi">
           <div id="menu">
                <ul>
                    <li>Home</li>
                    <li>Impressum</li>
                </ul>
           </div>
      </div>
      <div id="container">
           <div id="subnavi">
                <ul>
                    <li>Produkt</li>
                    <li>Preis</li>
                </ul>
           </div>
           <div id="content">
                        Hier steht der ganze Text.
           </div>
      </div>
   </body>
</html>

Grundlagen: Prozente statt Pixel
Wie kann man ein flexibles Layout mit CSS schaffen? Der Schlüssel liegt in der Verwendung der relativen Einheit Prozent (%) statt der gebräuchlichen (mehr oder weniger) absoluten Einheiten Pixel (px) oder Point (pt) für Größenangaben.

Wie erwähnt, sollen die Layer Menu und Container eine flexible Breite bekommen und außerdem zentriert dargestellt werden. Die flexible Breite erreicht man, indem man für die Elemente die CSS-Eigenschaft width auf zum Beispiel 70 % setzt.

Eine zentrierte Darstellung erreicht man durch Vergabe des Wertes auto für die Eigenschaft margin, also den Außenabstand rechts und links. Wenn man Inline-CSS verwenden möchte, könnte das für den Layer Menu so aussehen:

      <div id="menu" style="margin:0 auto;width:70%">

Zusätzlich wird hier noch der Außenabstand oberhalb und unterhalb des Elementes auf 0 gesetzt. Dasselbe Style-Attribut muss auch für den Layer Container ergänzt werden.

Wenn man nun das Browserfenster in seiner Größe verändert, so passen die beiden Layer ihre Breite immer der aktuellen Fensterbreite an. Der zur Verfügung stehende Platz wird also stets optimal genutzt.

Trotz aller Flexibilität: die Lesbarkeit ist wichtig!
Nun hat die Anpassung der Layer an die aktuelle Fensterbreite aber nicht nur Vorteile. Betreibt der Benutzer tatsächlich zwei große Monitore im Dual-Screen-Betrieb und hat eine effektive Fensterbreite von 3200 Pixeln, so kann es passieren, dass der Text eines ganzen Absatzes locker in eine einzige Zeile passt. Dies kann einerseits das Gesamtlayout unschön verkürzen und andererseits behindern überlange Textzeilen den Lesefluss. Nicht umsonst werden Zeitungen im Spaltendruck gesetzt. Dabei sind die Zeilen so lang (bzw. kurz), dass der Lesefluss des Auges auf der Seite gut unterstützt wird.

Andersherum kann der Benutzer auch sein Fenster extrem schmal ziehen. Dann wiederum kann es passieren, dass eine horizontale Navigation im Layer Menu nicht mehr hineinpasst und das Layout zerstört oder dass Bilder im Inhaltsbereich überstehen.

Um dies zu verhindern, kann man in CSS sinnvolle Minimal- und Maximalwerte für die Breite eines Elementes definieren. Die entsprechenden Eigenschaften heißen min-width und max-width. Hier gibt man Grenzen für die Breite in absoluten Werten, also beispielsweise in Pixeln an. Diese muss man experimentell ermitteln, indem man das flexible Layout bei verschiedenen Fensterbreiten ausprobiert. Für das hier besprochene Beispiel sollen 500 Pixel als Minimalbreite und 1200 Pixel als maximale Breite verwendet werden. Damit ist das Layout wegen der 70 %-Breite auf Bildschirmbreiten zwischen etwa 700 und 1700 Pixeln flexibel.

Diese Eigenschaften werden für Menu und Container im oben eingefügten Style-Attribut ergänzt, so dass das Ergebnis für den Layer Menu so aussehen sollte:

      <div id="menu" style="margin:0 auto;width:70%;min-width:500px;max-width:1200px;">

Man sollte wissen, dass die beiden Eigenschaften zwar zum Standard CSS 2.0 gehören, der Internet Explorer sie aber erst seit Version 7.0 unterstützt. Alle älteren Microsoft-Browser ignorieren diese Eigenschaften einfach, so dass die Layer dann unter Umständen dennoch zu groß oder zu klein dargestellt werden. Nun kann man zwar davon ausgehen, dass der IE 7 sich vor allem dank Microsofts Auto Update rasch gegenüber dem IE 6 durchsetzen wird, noch ist es aber nicht soweit und man sollte sich bewusst sein, dass solch ein Layout in älteren Explorern eventuell nicht perfekt funktioniert. Firefox und Safari unterstützen diese Eigenschaften seit Version 1.0, Opera seit 7.0.

Kleine Schönheitskorrekturen
Dem Anspruch an Flexibilität genügt das Layout damit bereits. Um es auch wirklich verwendbar zu machen, soll jetzt noch die Subnavigation als Spalte links im Layer Container angeordnet werden.

Hierfür erhält das Layer Subnavi zunächst eine feste Breite von 140 Pixeln und wird mittels float:left so eingerichtet, dass rechts davon der Layer Content platziert wird und nicht darunter:

      <div id="subnavi" style="width:140px;float:left;">

Natürlich könnte man auch die Spalte der Subnavigation flexibel mit einer Breite von beispielsweise 15% anlegen. Häufig werden Menüs aber mit fester Breite gestaltet. In diesem Fall muss der Layer fest sein. Damit der Layer Content nicht unten in die Spalte der Subnavigation rutscht, wenn er länger als diese ist, muss noch ein Außenabstand definiert werden:

      <div id="content" style="margin:0 0 0 140px;">

Diese Einstellung legt fest, dass der Layer Content einen linken Außenabstand von 140 Pixeln hat und somit nicht unter die Subnavigation fließt.
Eine letzte Einstellung entfernt noch die störenden Abstände um die Aufzählungen in den Menüs. Mit der Eigenschaft margin:0 wird bei den beiden Aufzählungen der Außenabstand reduziert:

      <ul style="margin:0">

Der fertige Quellcode sieht damit so aus:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
   <body>
      <div id="navi">
           <div id="menu" style="margin:0 auto;width:70%;min-width:500px;max-width:1200px;">
                <ul style="margin:0">
                    <li>Home</li>
                    <li>Impressum</li>
                </ul>
           </div>
      </div>
      <div id="container" style="margin:0 auto;width:70%;min-width:500px;max-width:1200px;">
           <div id="subnavi" style="width:140px;float:left;">
                <ul style="margin:0">
                    <li>Produkt</li>
                    <li>Preis</li>
                </ul>
           </div>
           <div id="content" style="margin:0 0 0 140px;">
                Hier steht der ganze Text
           </div>
      </div>
   </body>
</html>

Um eine Trennung von Inhalt und Layout zu erreichen, sollte man die Inline-Style-Definitionen in externe CSS-Dateien auslagern und dazu am besten gleich die vordefinierten IDs oder eigene Klassen verwenden. Dann hat man schon ein ganz brauchbares Grunddesign. Darauf aufbauend kann man den Layer Navi für grafische Elemente oder eine Hintergrundfarbe verwenden; die Menüs können verschönert werden und so weiter. Außerdem fehlt der Head-Bereich im XHTML noch.

Das Layoutbeispiel ist natürlich nicht perfekt. Tatsächlich werden nämlich nicht alle Fensterbreiten abgedeckt, die anfangs aufgezählt wurden. Das ist insbesondere dann schwierig, wenn man ein horizontales Menü verwenden möchte, das in der Regel eine gewisse minimale Breite erfordert. Das Layout ist aber in einem sinnvollen Bereich flexibel und nutzt die vorhandene Bildschirmbreite wesentlich effizienter als feste Designs.

Nicht alles geht mit Liquid Layouts
Trotz aller Vorteile einer flexiblen Gestaltung gibt es jede Menge Layouts, die auf eine feste Breite, meist 800 Pixel, optimiert sind. Woran liegt das?

Liquid Layouts sind zwar sehr flexibel, aber nicht immer ist das gewollt. Wenn die Webseite pixelgenau ein bestimmtes Design umsetzen muss, bleibt wenig Raum für eine Größenanpassung einzelner Elemente. Dies kann ein – zugegebenermaßen schwacher – Grund für ein festes Layout sein. Bekanntlich genügt gelungenes Design dem Grundsatz “form follows function“ und nicht andersherum.

Seiten, die aus vielen festen Spalten bestehen, sind ein besserer Grund dafür, Designs fester Breite zu verwenden. Bei Nachrichtenseiten wie etwa Spiegel Online ist das der Fall. Hier darf die Breite einer Spalte aus ganz praktischen Gründen nicht variieren, damit ganz verschiedene Elemente bündig untereinander in einer Spalte angeordnet werden können.

Im Allgemeinen wird sich ein Besucher aber wahrscheinlich weniger über ein bis ins letzte Detail festgelegtes Design freuen als über eine Webseite, die er auf seinem Bildschirm optimal lesen kann. Dass Letzteres gar nicht so kompliziert ist, hat das obige Beispiel gezeigt. ™

Erstveröffentlichung 11.06.2007

Weitere Beiträge:

Über Gastautor

DrWeb.de ist die "Grande Dame" des deutschen Bloggings und seit nunmehr 14 Jahren im Internet aktiv. Das beliebte Magazin richtet sich dabei an Webworker, Selbstständige, IT-Entscheider, Seitenbetreiber sowie Marketing-Verantwortliche und bietet einen Überblick im undurchdringlichen Dschungel zahlreicher "Geld verdienen im Internet" Konzepte. Werden Sie jetzt Gastautor und profitieren Sie von der großen Reichweite und den Markennamen DrWeb.de.
Alle Beiträge von Gastautor ansehen →

, ,

Hinterlasse eine Antwort

Bitte bei weiteren Kommentaren per Email benarichtigen! Auch möglich: Abo ohne Kommentar.

Spam protection by WP Captcha-Free