Inhalt
Flexible Layout
Bild Quelle: webdesign.tutsplus.com
Die Zeiten in den denen man fixe Vorgaben von Höhe und Breite eines Layouts zur Hand hatte sind vorbei. Das traditionelle "fold", die imaginäre Linie des Inhalts welchen man ohne scrollen sieht hat keine fixe Grösse mehr. Die Zeiten in denen man das Layout für eine Auflösung zwischen 1024x768 und 1280 x 700 auslegte sind vorbei. Die Dimensionen der Bildschirmgrössen gehen von kleinen iphone Screens über PDA, Pad's, Netbooks bis hin zu riesen Bildschirmen. Flexible Layouts die sich der Auflösung anpassen sind gefragt. Je nachdem sollen Spalten untereinander oder nebeneinander erscheinen oder gefaltet werden, Hintergrundbilder angezeigt oder ausgeblendet werden um bei Mobilen Geräten Performance zu sparen. Sogenannte Fluid Grid Layouts wie zum Beispiel das Golden Grid System oder auch das alt bekannte Yaml CSS Framework helfen den Webdesigner die Herausforderung flixible Webseiten zu gestelaten.
Media Queries
Das Zauberwort heisst Media Queries, damit lassen sich Spalten je nach Grösse des Screens oder des Bildschirms verschieden darstellen. Ein kleines Beispiel, @media all and (min-width:500px) { … } die Regel in der Klammer gilt für alle Anzeigen welche mindestens 500px breit sind.
