Home / Heftarchiv / 2012 / Ausgabe 19 2012 /

Media Queries – flexibles Layout für alle Bildschirme

‹ zur Übersicht Heftarchiv Ausgabe 19 2012

12.09.2012

Media Queries – flexibles Layout für alle Bildschirme

Techniktipp

 

Maria Kern,

Flash und Frontend Developer bei Netz98 New Media, Mainz

www.netz98.de

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.


Anzeige



Kommentare via facebook (beta)Was ist das?

TOP-THEMEN

Zanox

Justus folgt auf Tweraser

Philipp Justus tritt als Managing Director bei Google die Nachfolge von Stefan Tweraser an. mehr
Coca Cola

Marken auf Facebook

INTERNET WORLD Business hat eine Reihe besonders witziger Facebook-Posts zusammengestellt. mehr
iStockphoto/Taphouse Studios

Die Fail-Galerie

Die schlechtesten Profi-Videos des vergangenen Jahres wurden für den "Silbernen Sellerie" nominiert. mehr

Newsletter

Zweimal täglich das Neueste aus Online-Marketing, E-Commerce, Online-Recht und Technik sowie topaktuelle Personalien. Jetzt kostenlos bestellen!



Umfrage

Für den Deutschen Webvideopreis 2013 wurden sechs Profi-Videos in der Kategorie "Fail" nominiert. Welches Werbe-Video hat Ihrer Meinung nach den "Silbernen Sellerie" verdient?

Welches Video sollte den Deutschen Webvideopreis bekommen?

Top 10 Artikel

Ausgabe 10 2013

Internet World Business

Ausgabe 10/2013

HbbTV: Top oder Flop?

Sevenone Media hat die Nutzer des interaktiven Fernsehens direkt auf dem Screen befragt weiterlesen
Fotolia.com/momius

Was ist was in der Wolke?

Public Cloud, Private Cloud, Hybrid Cloud: Thomas Wittbecker erklärt, was dahinter steckt. mehr
Fotolia.de/Adam Radosavljevic

Facebook ist mobil - und Sie?

Jasper Krog und Christian Rottmann erklären, was einen guten mobilen Facebook-Auftritt ausmacht. mehr
Fotolia.de/mypic4u

Anleitung zum Unglücklichsein

Gerald Hensel erklärt, welche Fehler Marken und Agenturen häufig beim Marketing auf Facebook machen. mehr