Responsive Web Layouts mit CSS und so

Responsive Web Layouts passen sich dynamisch an das Ausgabemedium an. Im Gegensatz zu den rein an der Bildschirmbreite angelehten Skaliermethoden verwenden moderne sites flexible grids und Bildgrößen die die Seite dem Medium entsprechend aufbauen bzw. reduzieren.

Da es mittlerweile neben dem Standardbrowser verschiedenste Ausgabemedien gibt und mobile Endgeräte fast von selbst ins Internet gehen ist eine Anpassung an folgende Medien ratsam:

  1. Standardbrowser ca. 1292 Pixel
  2. Notebooks und Ipads ca. 1025 Pixel
  3. Handys und Smartphones ca. 480 Pixel

Eine Media query fragt nun die Auflösung ab und lädt dann das entsprechende Layout.

Hier ein paar Beispiele:

http://designmodo.com/responsive-design-examples/

http://designmodo.com/minimal-responsive-web-designs/

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

Und Anleitungen auch auf deutsch:

http://www.drweb.de/magazin/media-queries-mobile-version-von-websites-mit-css3-erstellen/

http://www.yaml.de/resources.html

 

Februar 7, 2012 | Kategorie Allgemein, über webdesign | Kommentieren  

Get Adobe Flash playerPlugin by wpburn.com wordpress themes