Flexibel

Weil ich immer wieder im Internet entsprechende Seiten finde, weil ich immer wieder Diskussionen darüber finde, und um zu erklären, warum hier bei Rorkvell Vieles genau so ist, wie es eben ist, hier mal zwei neue Screenshots mit Anmerkungen.

Wie ich anderweitig schon mal geschrieben habe, nutze ich seit Kurzen als Feedreader Firefos Sage. Das bedeutet, dass ich im Browserfenster eine Sidebar habe. Ein Feedreader ist nicht die einzige Möglichkeit einer Sidebar, es gibt viele solche Möglichkeiten. Eine Webseite sollte auch mit Sidebar so aussehen, als ob das genau so sein soll. Also kein horizontaler Scrollbar. Die Seite sollte sich einfach dem verfügbaren Platz anpassen.

Und hier die gleiche Seite (auch die gleiche Stelle) im gleichen Browser auf dem gleichen Bildschirm, ebenfalls Fullscreen, aber diesmal ohne die Sidebar. Auch hier sollte eine Seite ordentlich aussehen. Und die Seite sollte nach wie vor den verfügbaren Platz gut und sinnvoll ausfüllen. Wie man sieht, funktioniert das.

Bei solchen flexiblen Designs gibt es ein Problem: Die Zeilenlänge. Sehr lange Zeilen sind nicht gut lesbar. Aus diesem Grund haben Zeitungen beispielsweise ein Mehrspalten-Layout. Damit werden die Zeilen lesbar kurz. Ohne weitere Anpassungen wären die Zeilen bei einem flexiblen Design zu lang, speziell auf großen Bildschirmen. Aber es gibt zwei sehr einfache Gegenmaßnamen. Die erste ist ganz einfach und funktioniert sogar im IE: Das body Element bekommt links und rechts ein prozentuales Padding. Damit wächst der gesamte Inhalt der Seite horizontal nicht so schnell wie der Bildschirm resp. der Viewport (Fenster). Das bewirkt ausserdem so ganz nebenbei ausgewogenere Proportionen auf verschiedenen Bildschirmgrößen.

Die zweite Maßname funktioniert nur bei modernen Browsern: Automatisches Mehrspaltenlayout. Wie man sieht, wird der Text in der Version mit Sidebar, also bei schmalerem Fenster, einspaltig präsentiert. Die Zeilenlänge ist in Ordnung so. Auf der breiten Version wird der Text hingegen in zwei Spalten präsentiert. Wie geht das? Nun, mit einer CSS3 Eigenschaft: Column-width.

Die Zeilen mit -moz... und -webkit... sind einfach Duplikate für die entsprechenden Browser, solange diese die standard-Versionen noch nicht unterstützen. Die ersten beiden Zeilen sind die, auf die es ankommt. Wie man sieht, habe ich lediglich zwei Dinge festgelegt: Die Spaltenbreite und den Platz zwischen den Spalten. Insbesondere habe ich nicht die Anzahl der Spalten festgelegt. Das ist wichtig. Denn so kann der Browser sich die benötigte Anzahl Spalten aus der Fensterbreite und der gegebenen Spaltenbreite selber errechnen. So kommt es, dass die Anzahl der Spalten je nach verfügbarem Platz variiert.

Ausserdem kann man sehen, dass ich die Spaltenbreite nicht in Pixel und nicht in Prozent, sondern in em angegeben habe. Warum? Nun, für die Zeilenlänge gilt, optimal lesbar sind ungefähr 30 Zeichen. Die optimale Zeilenlänge bemisst sich also weder in Pixeln, noch in Centimetern, sondern in Zeichen. Das habe ich logischerweise auch genau so umgesetzt. Damit hängt die Anzahl der Spalten nicht nur von der Fensterbreite ab, sondern auch von der Schriftgröße. Ich habe mir, da ich schlecht sehe, die Schrift größer gestellt. Andere arbeiten eher mit der voreingestellten Schriftgröße. So werden Manche auf dieser Seite durchaus 3 Spalten zu sehen bekommen. Aber das ist genau so auch gewollt.

Ein flexibles Design ist gar nicht so schwer. Um das Ganze in den Griff zu bekommen, sollte man einfache Strukturen wählen. Und nicht Alles festlegen, sondern Vieles dem Browser und/oder dem Menschen vor dem Bildschirm überlassen.