Das ganz normale Chaos, täglich frisch auf den Tisch. Direkt aus der hintersten Provinz in die Metropolen von Groß-Blogistan.


Responsive Web Design

Fri, 20 May 2011 11:24:38 +0200

Ein ganz und gar neuer Name für eine ganz und gar alte Sache: Responsive Web Design. Was ist das? Nun, im Grunde nichts Anderes als das, was das W3C schon immer predigt: Webseiten sollten unabhängig vom Medium sein. Also, egal, auf welchem Medium die Seite dargestellt wird, die Seite sollte benutzbar sein. Und wenn sie auch noch ästhetisch gut präsentiert wird, um so besser.

Wenn man von den vielen vielen möglichen Medien mal Alle bis auf graphische Browser ausklammert, dann bleibt von der Medienunabhängigkeit immer noch die Unabhängigkeit von einem konkreten Monitor übrig. Der für das Webdesign wesentliche Unterschied der Monitore ist hier einmal die horizontale und vertikale Auflösung (also, wie viele Pixel hat der Monitor horizontal und vertikal), wie groß ist ein Pixel, und ist der Bildschirm im Hoch- oder Querformat (portrait oder landscape). Ob Röhrenmonitor, Plasma oder LCD spielt für das Webdesign eher keine Rolle.

Medienunabhängigkeit auf diese Monitore bezogen bedeutet also, dass die Seite auf allen denkbaren oder zumindest auf allen gängigen verschiedenen Bildschirmen (gut) nutzbar sein sollte. Bei Standardmonitoren hat sich heute eine Auflösung etabliert, die man als bezeichnet: 1920x1080 Pixel. Allerdings sagt diese Auflösung immer noch Nichts über die tatsächliche Größe der dargestellten Seite aus. Denn ein Fernseher mit über 1m Bilddiagonale hat genau so eine Full HD Auflösung wie der kleine Monitor. Nur sind auf letzterem die Pixel eben wesentlich kleiner. Also 10 Pixel Breite bedeutet noch lange nicht, sagen wir mal, 10mm Breite.

Bei Notebooks ist eher noch die Half HD Auflösung von 1280x720 Pixeln üblich. Aber die möglichen Auflösungen gehen noch viel weiter. Im Profibereich sind Bildschirme mit Auflösungen von 2048 Pixeln Breite und mehr gar nicht so selten. Und auf großen Installationen für öffentliche Präsentationen, wo viele Monitore zu einem großen zusammengeschaltet werden, kann die Auflösung geradezu gigantisch werden. Auf der andren Seite gibt es immer mehr mobile Geräte, die naturgemäß eine viel kleinere Auflösung haben. So hat das iPhone beispielsweise eine Auflösung von 320x480 Pixeln (im Hochformat). Und kleinere Smartphones haben eine noch kleinere Auflösung. Und es bringt auch Nichts, die Auflösung dieser Geräte immer höher zu schrauben, denn wenn erst mal die 8px "große" Schrift auf die Fläche einer Stecknadelspitze passt, kann man ganz bestimmt gar Nichts mehr lesen.

Eine alte, aber leider äußerst selten angewandte Technik im Webdesign war schon lange das sogenannte Fluid Layout. Hier werden die Größenangaben für die Geometrie der diversen Seitenbestandteile in Prozent der verfügbaren Fläche angegeben. Theoretisch füllt solch eine Seite also jeden Bildschirm aus, egal, welche Auflösung dieser hat. Verwandt damit ist das Elastic Layout, bei dem die Größenangaben abhängig von der Schriftgröße angegeben werden. Das macht durchaus Sinn, denn ein Problem des Fluid Layouts ist, dass die Textzeilen bei sehr großen Bildschirmen sehr lang werden, und damit schwer lesbar. Das kann bei einem Elastic Layout nicht passieren. Dafür kann dieses wiederum durchaus mal nicht zum Bildschirm passen. Rorkvell setzt z.B. eine Mixtur aus Beiden ein: Der Navigationscontainer ist elastic, der Rest ist fluid. Im Großen und Ganzen funktioniert das passabel.

Solche Layouts stoßen aber bei der großen Bandbreite an möglichen Auflösungen an Grenzen. So wurde z.B. der Navigationscontainer hier bei Rorkvell bei sehr kleinen Bildschirmen derartig groß (relativ zur Gesamtfläche gesehen), dass der eigentliche Inhalt praktisch nicht mehr darstellbar war. Zum Teil habe ich das Problem schon immer ein Wenig entschärft, dass ich die Zeichengröße abhängig von der Viewportgröße leicht nach unten oder oben korrigiert habe. Aber das löst das Problem nicht, es entschärft es nur leicht. Dieses neumodische Responsive Design geht nun einen kleinen Schritt weiter: Auch die Seitengeometrie wird abhängig von der Bildschirmfläche (resp. Viewportfläche) angepasst. Ich habe das heute mal bei Rorkvell nachgezogen. Da diese Anpassung auf den CSS media Queries beruht, wird das wohl auf älteren Browsern nicht funktionieren. Auf einem IE6 wird die Seite also jetzt vermutlich schrottig aussehen. Aber gut, ich muss mit dieser Seite ja auch kein Geld verdienen.

Die Änderung ist übrigens ganz minimal. Im Grunde habe ich zwei kleine Änderungen vorgenommen. So wird die Breite des Navigationscontainers nun erst ab einem Viewport von 640 Pixel Breite vorgegeben, ebenso float: left. Zum Zweiten wird der linke Rand des Hauptcontainers nun erst ab einer Breite von 640 Pixeln gesetzt. Also: Auf kleinen Bildschirmen sind jetzt Navigation und Inhalt übereinander, auf größeren wie gehabt nebeneinander. Die Änderung war minimal. Wenn ich demnächst auf html5 umsteige, werde ich das noch mal überarbeiten.


1 Kommentare

  1. Mon, 23 May 2011 10:48:41 +0200

    Da ich mit leichtem Erschrecken festgestellt habe, dass mein unwichtiger kleiner Beitrag zu "Responsive Web Design" bei Google an erster Stelle steht, sollte ich wohl noch ein klein Wenig hinzufügen, damit besser klar wird, worum es eigentlich geht.

    Am Besten lässt sich sowohl Motivation als auch Herangehensweise demonstrieren an Ethan Marcottes Beispielseite. Eine nette kleine Seite mit ein paar Bilder, etwas Text und einer Navigation. Im Großen und Ganzen eine recht typische Seite. Auf einem üblichen Monitor fullscreen dargestellt lässt sich nichts Besonderes erkennen. Interessant wird es, wenn man die Größe des Fensters verändert. Hier zeigen sich die Vorzüge des fluid layouts: Die Seite sieht auch bei anderen Fenstergrößen gut aus. Und wer jetzt meint, es sei doch selbstverständlich, dass man eine Seite fullscreen ansieht: Es gibt auch andere Monitore. Nicht Jeder hat einen FullHD Bildschirm. Manche haben mehr, viele haben weniger. Auf einem iPhone ist es nun mal nicht möglich, die Seite in FullHD darzustellen. Es geht physisch einfach nicht. Aber diese Seite kann man ziemlich weit verkleinern, und sie sieht immer noch gut aus.

    Aber wenn man das Fenster immer schmaler macht, zeigt sich irgendwann die Grenze dieses Layouts. In dieser Beispielseite wird das Menue bei sehr schmalem Fenster nun in den Text hinein geschrieben. das sieht nicht gut aus. Das Durcheinander von Menue und Text ist nun schwer auseinander zu halten. Und genau hier, an den Grenzen des fluid Layouts, kommt nun das responsive Layout zur Anwendung: Wenn das Fenster derartig schmal wird, wird die Seitengeometrie geändert. Das heisst im einfachsten Fall, dass das Navigationsmenue eben nicht mehr neben, sondern über dem Inhalt dargestellt wird. Das ist eine Darstellung, die dem Standard bei Smartphones entspricht.

    Das fluid Layout kann man in der gleichen Weise auch hier bei Rorkvell beobachten. Eine Seite mit Bildern ist z.B. mein Beitrag Ein heller Stern mit 2 Bildern unseres neugeborenen Fohlens. Auf einem Standardmonitor in fullscreen dargestellt wird man hier nichts Besonderes sehen können. Wenn das Fenster verkleinert wird, werden auch die Bilder verkleinert, genau wie der Rest der Seite. Nur der Navigationscontainer bleibt gleich groß. Für dieses Verhalten habe ich mich entschieden, weil die Navigationstexte immer nutzbar sein sollen. Und hier kann man jetzt seit Neuestem auch das sogenannte responsive Layout in Funktion sehen: Wenn das Fenster noch weiter verkleinert wird, dann wird nun der Navigationscontainer über dem Text dargestellt, und der Text hat mehr Platz. Das fluid Layout habe ich hier schon etliche Jahre so implementiert, die responsive Ergänzung ist neu.

    Was ich aber auch schon seit Jahren so habe, und worauf ich schon ein bisschen stolz bin: Wenn das Fenster sehr groß wird, passt sich hier im Blog der Text auch an den neuen Platz an. das Problem ist ja, dass auf sehr großem Platz die Zeilen sehr lang werden können. Sehr lange Zeilen sind schwer lesbar. Das ist eines der Hauptargumente gegen fluid Layout. Aber hier wird bei größeren Fenstern einfach auf eine Mehrspalten-Darstellung umgeschaltet. Das betrifft auch die Bilder. Das kann man auf der Seite mit den 2 Pferdebildern recht gut sehen. Je nach Fenstergröße werden 1 oder 2 Spalten genutzt. dadurch werden die Zeilen nicht so lang, und der Text bleibt lesbar. Bei noch größeren Fenstern kann evtl. auch auf eine 3- oder gar 4-spaltige Darstellung umgeschaltet werden.

    Erreicht habe ich das einfach über die css Spaltenangaben. Dabei habe ich aber nicht die Anzahl der Spalten vorgegeben, sondern stattdessen ihre Breite, und zwar in em (Zeichenbreite). Diese Angabe in Zeichenbreite entspricht genau dem Zweck der Spalten, die Zeilenlänge nicht länger als soundsoviel Zeichen werden zu lassen. Wenn nun das Fenster groß genug wird, 2 Spalten von der gewünschten Breite darzustellen, wird der Browser genau das machen, er wird den Text in 2 Spalten umbrechen. Das ist genau das gewünschte Verhalten.