Benjamin Wiesrecker

Vor allem bei besonders kleinen oder großen Displays stößt man schnell an Grenzen, wenn man Layouts ausschließlich auf Basis eines flexiblen Gestaltungsrasters realisiert: Lässt man beispielsweise einen Text auf einem 24 Zoll Monitor über die komplette Breite des Anzeigenbereichs fließen, wird dieser unleserlich, da das Auge bei einer Zeilenlänge von mehr als achtzig Zeichen schnell den Fokus verliert (vgl. Kupferschmid 2009, S. 67). Ähnlich schwierig kann sich die Darstellung auf besonders kleinen Displays gestalten (vgl. Holst 2010).

Abhilfe verschaffen Media Queries: Diese ermöglichen es, das Layout an bestimmten Umbruchstellen (engl. breakpoints) zu beeinflussen. Die Umbruchstellen richten sich nach zuvor definierten Medienmerkmalen, wie beispielsweise der Größe des Fensters, der Ausrichtung des Gerätes oder der Pixeldichte des Displays (vgl. Zillgens 2013, S. 15–47; Maurice 2012a, S. 215–230).

Allerdings stellt die Realisierung des Layouts für verschiedenste Bildschirmgrößen mit nur einer einzigen HTML-Codestruktur eine große Herausforderung im Responsive Webdesign dar. Bereits in fest definierten Layouts statischer Webseiten bereiten die Positionierung und das korrekte Floaten der Elemente mitunter Probleme. Sollen sich die Seitenelemente nun darüber hinaus an bestimmten Umbruchpunkten verschieben, in ihrer Ausrichtung ändern, verkleinern oder vergrößern, so kann dies – vor allem bei komplexeren Seiten – einen erheblichen Aufwand darstellen [à Kriterium 13]. Hier kann es erforderlich sein, neben dem klassischen CSS Floating auf Tabellen oder sogar externe JavaScript Bibliotheken zurückzugreifen. Abhilfe verspricht künftig das CSS Flexible Box Layout Module, das jedoch bislang nicht die erforderliche Browserunterstützung vorweisen kann (vgl. W3C 2014b; Zillgens 2013, S. 287–295). Generell ist anzumerken, dass Media Queries von Microsofts Internet Explorer erst seit Version neun unterstützt werden (vgl. Hellwig 2011) [vgl. Kriterium 12].

Medientypen

Neben den Medienmerkmalen umfassen Media Queries die sog. Medientypen. Mit Hilfe der Medientypen können spezifisch für bestimmte Gerätetypen CSS-Anweisungen festgelegt werden. So wäre es beispielsweise denkbar, dass Texte auf einem Monitor (Media Type screen) in einer anderen Schriftgröße dargestellt werden als beim Ausdrucken der Seite (Media Type print):

Es gibt zahlreiche weitere Medientypen, wie beispielsweise braille für Spezialausgabegeräte blinder Menschen oder projection für die Datenprojektion mit Beamern. Der Medientyp aural, der für die synthetische Sprachausgabe vorgesehen ist, wird ab CSS 3 durch speech ersetzt. Weitere Medientypen sind: All, embossed, handheld, tty und tv.

Der Medientyp kann durch ein Keyword (not oder only) ergänzt werden. Folgender Syntax ist dabei einzuhalten:

Not negiert die Abfrage, während only in der Praxis verwendet wird, um die nachfolgenden Style Sheets vor älteren Browsern zu verbergen (vgl. W3C 2012a, 2011a, 2011c).

Breite und Höhe in Zusammenhang mit Media Queries

Das für Responsive Webdesign wichtigste Medienmerkmal width bezieht sich auf die Breite des Layout Viewports. Wie viele der Medienmerkmale kann auch width mit dem Präfix max- oder min– kombiniert werden. Hierdurch lassen sich die zuvor genannten Umbruchstellen festlegen, an denen Websitebetreiber wesentliche Elemente des Layouts so verändern können, dass sie sich optimal an die Gegebenheiten der jeweiligen Gerätekategorie anpassen:

Analog zu width, ist height die Höhe des Viewports. Device-width und device-height hingegen beziehen sich auf die vom Hersteller festgelegte logische Breite bzw. Höhe des Bildschirms. Diese entspricht jedoch nicht zwangsläufig der physikalischen Auflösung – denn, wie bereits in Abschnitt 9.1 aufgezeigt, unterscheiden sich die Auflösungen heutiger Displays untereinander enorm. Je höher die Pixeldichte auf einem Gerät ist, desto kleiner ist jeder einzelne physikalische Pixel. Standard PC-Monitore weisen i.d.R. eine Auflösung im Bereich von etwa hundert PPI auf. Ein Website-Button, der auf solchen Monitoren in normaler Größe erscheint, hätte auf dem 442 PPI Samsung Galaxy S5 nur ein Viertel der Größe – denn die Pixeldichte liegt bei dem Smartphone mehr als vier mal höher als bei klassischen PC-Monitoren (vgl. Wroblewski 2011, S. 110–111).

Damit Grafiken und Websites nun nicht zu klein dargestellt werden, legen die Hersteller eine eigene logische Auflösung fest, die immer seltener der physikalischen Auflösung entspricht. In Fachartikel wird in diesem Zusammenhang oft von „CSS-Pixeln“ oder „Dots“ gesprochen. Microsoft führte den Begriff device-independent pixel (dip) ein und Google erwähnt im Zusammenhang mit Android die Einheit density-independent pixel (dp). In jedem dieser Fälle entsprechen die logischen Pixel nicht mehr zwangsläufig den physikalischen Pixeln. Beim iPhone 4 beispielsweise liegt die physikalische Auflösung bei 640×960 Pixel, während device-width und device-height vom Hersteller auf 320×480 logische Pixel festgelegt wurden. In diesem Zusammenhang gewinnt das Medienmerkmal resolution an Bedeutung (vgl. JavascriptKit.com 2013; W3C 2012c; Android.com 2014; Microsoft.com 2014b; Koch 2010; Palmer 2009).

Resolution und Webkits Pixel-Ratio

Mittels des Merkmals resolution wird die Auflösung und damit die Dichtigkeit der Bildpunkte (dots) auf einem Ausgabemedium beschrieben. Auch dieses Merkmal kann mit den Präfixen min– bzw. max– kombiniert werden. Zulässige Einheiten sind dots per inch (dpi) oder dots per centimeter (dpcm) – also Bildpunkte pro Zoll bzw. Zentimeter. Künftig (ab CSS 3) wird auch der Wert dots per pixel (dppx) unterstützt.

Zum selben Zweck und ungeachtet des bereits von der W3C verabschiedeten resolution Merkmals führte die Open Source Browser Engine WebKit das Merkmal pixel-ratio ein. Hierbei erfolgt die Angabe standardmäßig in dots per pixel. Das Merkmal ist jedoch nicht Teil der offiziellen W3C Empfehlung. Da Googles Chrome-Browser die offizielle Angabe resolution jedoch noch nicht unterstützt, sollten Websitebetreiber zum gegenwärtigen Zeitpunkt beide Angaben parallel verwenden:

Auch resolution bezieht sich nicht auf die tatsächlichen, physikalischen Größen, sondern auf die entsprechenden CSS-Größen. Ein Inch entspricht in CSS stets 96 Pixeln, 192dpi (96*2) entsprechen damit einem device-pixel-ratio von 2dppx (vgl. W3C 2012b, 2012c, 2013a).

Orientation

Das orientation Merkmal gibt an, ob der Viewport aktuell im landscape (Viewport ist breiter als hoch) oder im portrait Modus (Viewport ist höher als breit) dargestellt wird:

Dabei wird die tatsächliche Ausrichtung des Gerätes, die mittels entsprechender Sensor-Schnittstellen ausgelesen werden könnte, nicht berücksichtigt. So kann beispielsweise durch das Öffnen der Touch-Tastatur der Viewport in seiner Größe so verändert werden, dass er vom portrait in den landscape Modus wechselt (vgl. W3C 2012c).

Weitere Medienmerkmale von Media Queries