‹ zur Übersicht Heftarchiv Ausgabe 19 2012
Media Queries – flexibles Layout für alle Bildschirme
Techniktipp
Idealerweise sollten die Webseiten eines Unternehmens immer optimal bedienbar sein – sei es vom stationären PC, vom Tablet Computer oder vom Smartphone aus. Neben der Möglichkeit, zusätzlich zur Web- Präsenz eine mobile App zu entwickeln, gibt es noch eine wesentlich kostengünstigere und oft sinnvollere Lösung: die sogenannten Media Queries.
Mit der Stylesheet-Version CSS3 sind die Media Queries als Erweiterung der Media Types integriert. Konnte man mit den Media Types bereits separate Stylesheets für verschiedene Ausgabemedien definieren, berücksichtigen die Media Queries nun auch bestimmte Merkmale des Mediums. So kann man verschiedene Eigenschaften wie die Größe des Browser-Fensters in Pixeln, die Ausrichtung des Geräts und die Bildschirmauflösung abfragen. Anhand der Größe des Browser-Fensters lässt sich ziemlich genau abschätzen, ob es sich bei dem Gerät um ein Smartphone, ein Tablet oder einen Desktop-Monitor handelt. Anschließend werden Regeln definiert, mit denen man für jeden Nutzer eine optimale Bedienbarkeit garantiert.
Bei diesen Regeln geht es keinesfalls darum, dem Smartphone-Nutzer Teile des Inhalts vorzuenthalten. Vielmehr soll er einfacher durch die Seite navigieren, ohne Zoomen Buttons und Links anklicken sowie alle Texte bequem lesen können. Deshalb besteht die wichtigste Aufgabe darin, die Anordnung der Inhalte auf der Seite über das Stylesheet zu überarbeiten. Eine gute Methode, um etwa Navigationselemente lesbar und klickbar zu machen, ist, die auf dem Desktop-Bildschirm horizontal angeordneten Links auf kleineren Screens untereinander zu positionieren. Allerdings nimmt die Navigation dadurch einen großen Teil des Bildschirms ein und schiebt den Inhalt so aus dem sichtbaren Bereich. Eine charmante Lösung dieses Problems: die Navigation auf einem kleinen Gerät in ein Ausklapp-Menü umbauen.
Im E-Commerce ist es denkbar, durch eine Art Landing Page auch die User mobiler Geräte für einen Shop zu begeistern. Hier könnten einige Produkte zum Beispiel in einer Galerie visuell dargestellt werden und schließlich auf den eigentlichen Shop führen. Auch Tools wie ein Store Locator lassen sich sehr gut für kleinere Bildschirme benutzerfreundlich optimieren.