Responsive Webdesign

Responsive Webdesign

Zu deutsch “reagierendes” Webdesign also ein Design das sich seiner “Umgebung” (der Monitorauflösung) anpassen kann. Es gibt schon länger die so genannten “Liquid Designs”. Hier wird nicht mit festen Pixeln gearbeitet sondern mit Prozentangaben. Das hat immer ganz gut Funktioniert wenn die Auflösung nicht zu klein/groß wird. Irgendwann sieht das Layout einfach schlecht aus.

Einen Schritt zurück - warum überhaut die ganze Überlegung?

Als Webdesigner haben wir es schon immer mit verschiedenen Browsern und Auflösungen zu tun vor ein paar Jahren haben alle für eine Standart Auflösung von 800x600 px designt und heute für 1024x748 px oder sogar für eine Breite von 1200. Die meisten Webseiten sind doch für eine bestimmte Breite gemacht oder man arbeitet mit Hintergrundgrafiken die sich der Breite anpassen - der Inhalt ändert sich meist nicht.

In den nächsten Jahren werden die mobilen Geräte den PC Markt überholt haben. Für uns Webdesigner eine Herausforderungen. Webseiten müssen in Zukunft auf Smartpones (horizontal und vertikal!), Spielkonsolen, TV, ipad, Computermonitore mit großen und kleinen Auflösungen funktionieren. Und wer weiss was noch kommen wird. (Denken wir auch mal an die Eingabemedien wie Maus, Tastatur, Gamecontrolers, Touchscreens.)

Wenn wir nun für jeglichen noch erdenklichen Viewport designen müssten führt das zu einen großen Anzahl von CSS Dateien oder subdomains. (mobil.meineseite.de, ipad.meineseite.de usw..)

Eine weiter Überlegung ist könnten wir nicht mehrere Spalten haben?

Also auf dem Iphone haben wir eine Spalte, am Screen mit 1024 px drei Spalten und bei größeren Auflösungen vier Spalten. Die Navigation könnte am Monitor links sitzen am iphone oben.

Also wer sich schon gefreut hat das der IE6 langsam ausstirbt und dachte das Webdesigner-leben wird ein bisschen einfacher (so wie ich) - hmm ... Pech es wird noch wesentlich schwerer werden.  

Es gibt aber Hoffnung und die heisst: “media queries”

Wer schon mal print.css gemacht hat der weiß ungefähr was das ist “media queries” gehen aber noch weiter wir können damit genau bestimmen wie unsere Inhalte bei verschiedenen Auflösungen also auch Geräten gerendert werden. Der W3C hat diese als Teil der CSS3 Spezifikationen mit aufgenommen. Sie werden von webkit browsern unterstützt also iphone und android.

Zum Ausprobieren:
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html


Mehr zu lesen:
http://www.alistapart.com/articles/responsive-web-design/

Neuen Kommentar schreiben