Das fluid-Projekt – works well in a crowded area™

 Das fluid-Projekt fasst einige Tricks zusammen, auf die ich während der Arbeit an der Site des Fotografen Michael Eckstein gestoßen bin.
Fluid bedeutet in diesem Zusammenhang: Bei einer Fenstergrößenänderung skalieren alle Elemente einer Website mit, wobei Schriftgrößen nicht bzw. anders verändert werden. Hierbei gehe ich von einer Maximalgröße der Seite aus, für die alle Bilder angelegt werden.
Die Nutzer kleinerer Bildschirme können dann ein verkleinertes Abbild der Site sehen, ohne auf Lesekomfort durch Skalieren der Schrift verzichten zu müssen.
Auf der oben genannten Site könnt ihr sehen, wie das dann aussieht (einfach mal das Browserfenster verkleinern/vergrößern).
Hier die Leute, die mit ihren Blogs und Tutorials geholfen haben, das ganze zu verstehen:

• Ethan Marcotte, The unstoppable Robot Ninja und sein Artikel Fluid Images

• Vom gleichen Autor auf A list apart der Artikel Fluid Grids

Proportionen

Es geht also darum, ausgehend von einem fixen Layout alle Maße als Proportionen der Gesamtgröße anzugeben.
Ein Beispiel: Das Grundlayout sei 1000px x 500px groß, der Header 1000px x 100px. Jetzt rechnen wir die Grundmaße auf em um,

width = 1000px / 16(px pro em) = 62.5em
height = 500px / 16 = 31.25em

und im fixen Layout sieht der Stil für den wrapper im CSS danach so aus:

div #wrapper {
  width = 62.5em;
  height= 31.25em;
}

Um das skalierbar zu machen, ändern wir die Definition in

div #wrapper {
  max-width = 62.5em;
  max-height= 31.25em;
  width = 100%;
  height= 50%;
}

Und nun die Maße für den header umrechnen und ins CSS einfügen:

div#header {
  width = 100%; /* einfach: genauso breit wie wrapper */ 
  height = 20%; /* 100px / 500px = 0.2 × 100 = 20 */ 
}

Jedes weitere Element wird also so berechnet:

Breite = (EigeneBreite / GesamtBreite × 100)in %  
Höhe = (EigeneHoehe / GesamtHoehe × 100)in %

Soviel zur Containerberechnung. Damit werden nun zwar die div's wunderbar skaliert, aber eingefügte Bilder würden starr ihre Größe behalten und sich ganz und gar nicht fluid verhalten. Das ändern wir durch folgende CSS-Ergänzung:

img {
  width = 100%; 
  height = 100%; 
}

Das geht aber nur unter einer Bedingung:

Alle Bilder (img) müssen in div's der gewünschten Größe plaziert werden!

Diese Skalierung funktioniert bei sehr bild-lastigen Layouts wie dem oben erwähnten genauso gut wie bei spalten-orientierten Designs. Hier sei auf die 9er-Teilung im AListApart-Artikel verwiesen (nicht zu verwechseln mit der 9er-Teilung ;O), mit der man das Grundgerüst für solche Sites erstellen kann.