Fluid CSS Layouts

Mit der ersten CSS-Angabe im HTML-Head beschreiben wir, dass generell 80 Prozent der Fensterbreite als Seitenbreite verwendet wird. Um die Flexibilität einzuschränken, ist die Vergabe einer Mindest- und Maximalbreite sinnvoll. Konkret bedeutet dies, sollten die 80 Prozent eine Breite von 500 Pixel unterschreiten, wird die Breite nicht weiter verkleinert. Sollten die 80 Prozent 1200 Pixel überschreiten, wird die Breite nicht mehr vergrößert.
Dies ist sinnvoll angesichts der Tatsache, dass wir Usern mit Doppelmonitoren und Breitenauflösung von über 3000 Pixeln ebenso unsere Informationen anbieten wollen, wie dem Smartphone-User mit nur 320 Pixeln Darstellungsbreite.

Grafiken in fluid layouts

In erster Linie hat man es mit zwei Anforderungen zu tun, die Grafiken müssen entweder skalier- oder wiederholbar sein.

Grundsätzlich wird auf einer Webseite zwischen zwei Bildtypen unterschieden: Layout- und Inhaltsgrafik. Dem Layout werden alle grafischen Elemente zugeordnet, die keinen direkten Beitrag zum Inhalt liefern. Inhaltsgrafiken hingegen werden direkt mit dem img-Tag ins HTML-Gerüst eingebettet.

Fluid Layoutgrafiken

Hier ist es nicht möglich, technisch sinnvoll zu skalieren. Per CSS eingebettete Grafiken müssen demnach auf der x-Achse [ und ggf. auch auf der y-Achse ] wiederholbar sein oder ein entsprechendes Ende aufweisen. Angenommen wir haben eine Hintergrundgrafik für den Header, die auf der x- und der y-Achse wiederholbar ist, wird diese mit folgender CSS-Angabe eingebunden "background-repeat: repeat;" [vgl. dieser nicht wirklich schöne Header]. Ohne Wiederholung sieht die Grafik wie im Footer aus.

Fluid Inhaltsgrafiken

Inhaltsgrafiken lassen sich mit entsprechend prozentualer Angabe für die Breite leicht skalieren. Dabei muss darauf geachtet werden, dass sich der Wert nach der Größe des Elternelements richtet und das Bild in ausreichender Auflösung vorhanden sein muss, um bei sehr großen Monitoren Verpixelungen zu vermeiden. Hierbei empfiehlt es sich, die Grafiken als Vorschaubild anzubieten.
Sollten Bilder nicht skaliert werden, muss bedacht werden das größere Bilder potenziell das Layout durchbrechen.

Den Preis für eine solche gute unverpixelte Darstellung am Großmonitor zahlt aber der Smartphone-Surfer, der auch für die kleine Darstellung die große Datenmenge herunterladen muss.

Fluid Texte

Bei aller Liebe für schönes Layout darf der Text nicht vergessen werden. Gerade bei fluid layouts und großen Anzeigegeräten läuft dieser ohne entsprechende Angaben unangenehm weit. Als Zeilenlänge für Fließtexte gilt die Faustregel 60-80 Zeichen, da das Auge sonst während des Lesens und beim Zeilensprung Orientierungsprobleme bekommt. Aber die Zeilen dürfen auch nicht zu kurz geraten, denn häufiges Springen der Augen beeinträchtigt die Lesbarkeit des Textes. Am Besten ist hier ein Experimentieren des Mindest- und Maximalbreite um sinnvolle Zeilenlängen zu erhalten.
Es bietet sich hier eine Kombination aus fluiden und statischen bzw. elastischen Layout an. Zusätzlich bietet der CSS3 Standard ein Multi-column Layout an. Damit lassen sich etwa Texte wie in Zeitungen darstellen. Siehe oben die letzte CSS Anweisung.