Responsive Webdesign

Responsive Webdesign ist die neue Bezeichnung für das Thema automatische Anpassung von Webseite auf unterschiedliche Bildschirmgrössen und Hardwaretypen.

Ein gelungenes Beispiel ist die Seite http://www.css-tricks.com. Beim Verkleinern des Browserfensters zeigt sich der Frosch und die Navigation in unterschiedlicher Art und an unterschiedlichen Positionen und Farben.

Wir haben bei unserem Kunden http://www.testareal.ch auch bereits Responsive Webdesign umgesetzt. Wenn das Browserfenster kleiner als 800px wird, wird der fixed Balken oben aufgehoben und wird zu absolute. Das bedeutet, dass die Navigation auf kleinen Bildschirmen und Auflösungen auch weggescrollt werden kann.

Das Thema unterschiedliche Auflösungen war vor 10 Jahren schon präsent und ist mit der Einführung von CSS wieder etwas verschwunden. Nun ist es aufgrund der neuen CSS Möglichkeit @media wieder aufgetaucht und macht so auch viel mehr Sinn und gibt auch neue Möglichkeiten als früher. Auch das Skalieren von Hintergrundbildern mit 100% und visibility:hidden geht in das Thema Responsive Webdesign.

Gerade bei Iphones ist "position: fixed" leider nicht geeignet, da beim Zoomen fixed bleibt und somit unerwünschte Anzeigeeffekte entstehen, da sich die fixed Bereiche nicht Zoomen lassen. Diesem Problem kann mit responsive Webdesign begegnet werden. Generell empfehlen wir für Iphone auf fixed ganz zu verzichten.

Autor: Matthias Gally, Dipl. Wirtschaftsinformatiker UniZH
Datum: 24.02.2012

Ergänzung: 11.04.2013
Erfolgreich umgesetztes Responsive Design Beispiel: http://www.optik-schneider-basel.ch