Webseiten kann man grob in zwei Kategorien einteilen: Die Seiten mit fester Breite und die mit flexibler, sich der Fenstergrösse anpassenden Breite.
Fest vs. flexibel
Feste Breiten sind dabei wesentlich häufiger zu finden, da diese das pixelgenaue Designen und Gestalten erlauben. Die Seite sieht bei allen Besuchern gleich aus, unabhängig von der gewählten Monitorauflösung und Fenstergrösse. Flexible Layouts findet man daher häufig bei inhaltslastigen Seiten mit wenigen grafischen Elementen. Eben bei Internetseiten bei denen die optimale Platzausnutzung wichtiger ist als die konsistente Darstellung eines einheitlichen Designs. Gutes Beispiel hierfür ist www.amazon.de.
Aber gerade feste Layouts schränken die Webdesigner mehr und mehr ein. Die Verbreitung von großformatigen Bildschirmen nimmt zu und sogar Auflösungen von 2560×1600 Bildpunkten und mehr sind mitlerweile nicht mehr exotisch. Internetseiten mit festen Größen müssen sich aber an dem kleinsten gemeinsammen Nenner orientieren. Als Standard gilt hierfür mittlerweile eine Auflösung von 1024×768. Aber wenn man bei einer Breite noch eventuelle Scrollbalken und Browserrahmen abzieht, bleibt ein sicherer Wert von normalerweise 950px – 984px Breite für eine Internetseite übrig. Bei grossen Displays wirkt diese dann ganz schön verloren…
Hat man also nur die Wahl zwischen zwei Übeln?
Nein, sogenannte “semi- flexible” Layouts kommen immer mehr in Mode. Die Seite skaliert in ihrer Grösse mit, allerdings nur innerhalb eines festen Bereiches. Z.B. zwischen 780px – 1200px. Damit nutzt die Seite die volle Breite bei einer Auflösung von 1280x1024px (<- vermutlich der nächste Standard) aus, wird aber bei höheren Aulösungen nicht grösser. Bei kleineren Auflösungen verkleinert sich das Layout mit, so dass bei einer Auflösung von 800x600px keine Scrollbalken zu sehen sind.
Technisch läßt sich dies, zumindest in aktuellen Browsern, recht einfach umsetzen. Einem DIV Container muss per CSS nur eine maximale und eine minimale Weite zugeteilt werden. Hat man beispielsweise im HTML Code einen Container mit dem Klassen Namen “content” definiert und dazu folgende Klasse in der CSS Datei hinterlegt:
.content {
min-width: 780px;
max-width: 1200px;
background-color: red;
height: 200px;
}
bekommt man eine rote Box die bis zu einer Grösse von 1200px mit skaliert, aber nicht grösser wird und auf der anderen Seite bis zu 780px klein wird, aber eben nicht kleiner.
Hier das Live Beispiel
Und hier noch ein paar gute Beispiele aus dem “realen Leben”:
Made by Sofa
socialcast.com
Fazit
Zwar macht diese Technik etwas mehr Optimierungsaufwand nötig als bei nur einer festen Breite, schließlich muss man für 2-3 Auflösungen optimieren. Der Spielraum von einigen hundert Pixeln lässt aber noch genug Platz für die Gestaltung mit Bildern und Grafiken, ohne die konsistente Darstellung zu gefährden. Hinzu kommt, dass Nutzer mit einer höheren Auflösung einen tatsächlichen Mehrwert haben und Besucher mit einer niedriegeren Auflösungen nicht ausgeschlossen oder durch Scrollbalken “diskriminiert” werden.
Alles in allem zumindest eine Alternative die sich stärker am Nutzer orientiert und einen Kompromiss bietet, wenn das nächste Mal die Frage “fest oder flexibel” ansteht.