Damit Inhalte von den unterschiedlichsten Ausgabemedien wie z.b. Tablet-PCs und Smartphones dargestellt werden können, ist es wichtig, sie ihrer Auflösung entsprechend anzupassen. Einen möglichen Ansatz hierfür liefern Media Queries. Mit Media Queries können Sie die Darstellung, Menge und Reihenfolge der angezeigten Elemente einer Webseite von der Browserfensterbreite des Geräts abhängig machen, auf dem eine Webseite aufgerufen wird und somit den Ansatz eines responsiven Webdesigns verfolgen. Sie können also unterschiedliche Layouts generieren, ohne dabei auf JavaScript oder Änderungen im HTML-Code zurückgreifen zu müssen. Mit dem Pendant Media Types, kann man bereits seit geraumer Zeit individuelle Eigenschaften für spezielle Ausgabegeräte (screen, print, …) erstellen.

Funktionsweise von Media Queries

Um die Funktionsweise von Media Queries zu beschreiben, bieten die eingangs bereits erwähnten Media Types einen guten Einstiegspunkt. Wenn Sie bspw. separate Stylesheets für die Druckausgabe (bspw. print.css) erstellt haben, kennen Sie schon das Konzept, nach dem bestimmte Stylesheets unter bestimmten Bedingungen aufgerufen werden. Die aus CSS2 stammenden Media Types ermöglichen es also, die Ausgabe von Stylesheets bestimmten Medientypen wie einem Drucker (print), einem Braillegerät (braille) oder bspw. auch einem einem TV-Gerät (tv) zuzuordnen. Die hier im weiteren Verlauf des Artikels beschriebenen Media Queries entstammen CSS3; sie greifen dieses Konzept auf und bauen es weiter aus. Das heißt, es wird nicht nur nach dem Ausgabemedium entschieden, sondern anhand von Eigenschaften und Fähigkeiten von Endgeräten, wie beispielsweise der Breite und Höhe des Viewports.

Für einen Anwender, der – unabhängig davon, ob er einen Desktop-PC oder ein mobiles Endgerät verwendet – einen Browser nutzt, der Media Queries unterstützt, können Sie separate, für das jeweilige Ausgabemedium optimierte Gestaltungseigenschaften festlegen. Voraussetzung für Media Queries ist daher die strikte Trennung von Inhalt und Layout! Denn nur dann besitzt man die Möglichkeit, die Inhalte einer Webseite je nach Bedarf des Anwenders in Abhängigkeit seines Endgerätes, dass Design zu optimieren. Wäre dies nicht der Fall und man hätte bspw. Inline-Styles oder gar Tabellen-Layouts, würde man irgendwann an die Grenzen seiner Möglichkeiten stoßen und hätte nicht mehr die Freiheit mit CSS moderne Webseiten erstellen zu können.

Anlegen und Kombinieren von Media-Query-Regeln

Analog zum Vorgehen bei Media Types, gibt es auch bei Media Queries verschiedene Wege, diese zusätzlichen, für die entsprechenden Endgeräte angelegten Eigenschaften einzubinden. Hierfür kann das link-Element verwendet werden, wobei dort das media-Attribut dazu dient, das jeweilige Ausgabemedien für die referenzierte CSS-Datei zu bestimmen:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

Bei der Referenzierung mittels des link-Elementes kann man zudem aber auch weitere Eigenschaften als Merkmale miteinander kombinieren und somit die Bedinung die erfüllt werden muss, spezifizieren:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 950px)" />

Man kann aber auch mehrere Media Queries mit den jeweiligen Merkmalen miteinander kombinieren. Dies geschieht, wie im folgenden Beispiel, durch eine Trennung mittels Komma:

<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 950px),projection and (min-width: 1500px)" />

Bei wenig zusätzlichem Code können die notwendigen CSS-Eigenschaften, einfach an das Ende einer bereits vorhandenen CSS-Datei angelegt werden. Das Einfügen muss daher am Ende geschehen, weil zuvor für große Viewports definierte Eigenschaften von den Eigenschaften für kleine Viewports überschrieben werden müssen.

body {
...
}
 
@media screen and (max-width:750px) {
body { ... }
}

Aber damit nicht genug. Mit der Eigenschaft device-width können Sie auch gezielt die Breite von
Endgeräten ansprechen:

iPads (Portrait und Landscape):

@media only screen and (mindevice-width:768px) and (maxdevice-width:1024px) {...}

iPads (Landscape):

@media only screen and (mindevice-width:768px) and (maxdevice-width:1024px) and (orientation:
landscape) {...}

iPads (Portrait):

@media only screen and (mindevice-width:768px) and (maxdevice-width:1024px) and
(orientation:portrait) {...}

Desktops und Laptops:

@media only screen and (minwidth: 1224px){... }

Große Monitore:

@media only screen and (minwidth:1824px){... }

Da es bei mobilen Endgeräten wie Smartphones und Tablets mit der Portrait- und der Landscape-View zudem zwei unterschiedliche Ansichtsformate zur Darstellung der Inhalte gibt, können Sie mit orientation die Merkmale height und width miteinander vergleichen. Wenn height größer oder gleich width ist, besitzt die Darstellung den Wert portrait, andernfalls den Wert landscape. Erkannt wird die Ansicht am Gerät übrigens durch einen Bewegungssensor. Sollte die Gestaltung einer Webseite auf diesen beiden Ansichtsformaten große Unterschiede aufweisen, können Sie jedem Format folgendermaßen eine eigene CSS-Datei zuweisen:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Neben der Integration dieser Media-Query-Regeln ist es wichtig, dass Sie dem Viewport-Metatag innerhalb des head-Elementes eines HTML-Dokumentes initial weitere Eigenschaften zur optimierten Darstellung der Inhalte zuweisen. Damit können Sie die Darstellung und Skalierung der Inhalte auf Smartphones und Tablets gleichermaßen festlegen. Wenn Sie all diese oder zumindest einen Großteil dieser Regeln für das Anlegen von Regeln mittels Media Queries befolgen, können sie ab nun mit der Individualisierung der Styles für die entsprechenden Viewportgrößen beginnen. Unabhängig von den Möglichkeiten, gibt es aber auch bestimmte Fallstricke denen man sich vorher bewusst sein sollte, um nicht am Ende eines Projektes eine böse Überraschung zu erleben, die am Ende dazu führt, dass bestimmte Gestaltungsaspekte nicht realisiert werden können. Welche Probleme und Risiken hier auf den dafür Verantwortlichen warten können, zeigt der folgende Absatz.

Was gilt es beim Einsatz von Media Queries für ein responsives Design zu beachten

Aufgrund der möglichen unterschiedlichen Viewports der Benutzer muss ein auf Basis von Media Queries umgesetztes Design einer Webseite einige wichtige Aspekte berücksichtigen, die unabhängig vom Viewport eine weiterhin optimale Benutzerführung gewährleisten. Daher sollten Sie zumindest folgende Aspekte immer im Auge haben, um somit gegebenenfalls je nach Viewport neue CSS-Eigenschaften anlegen zu können:

• Anpassung der Schriftgrößen ( Da die Lesbarkeit von Texten auf unterschiedlichen Endgeräten nicht immer identisch ist, sollte man insbesondere auf kleineren Smartphone-Displays die vorher für einen Desktop-PC definierten Schriftgrößen, den Anforderungen entsprechend anpassen. )
• Darstellung von Links und Buttons ( Maße und Kontraste müssen nicht zuletzt aufgrund der Mobilität von Endgeräten größer sein. Gründe hierfür sind bspw. die unterschiedliche Fingergröße der User anstatt des stets gleich großen Mauszeigers und die Witterungsbedingungen wie Sonneneinstrahlung etc. )
• Größe und Ausrichtung von Bildern ( Kleinere Viewportgrößen ermöglichen schlecht die Darstellung großer Elemente wie bspw. Bilder oder Videos, daher Größenangaben relativ auszeichnen, dass Problem bei dieser Herangehensweise ist das sich diese ursprünglich große Bilddatei zwar visuell in den Maßen (Höhe und Breite) anpassen lässt, die zu ladende Dateigröße allerdings bleibt unabhängig vom Ausgabemedium gleich. Bei mobilen Geräten und den aktuellen Übertragungsraten können einige Hundert Kilobyte für solche Bilddateien das Ladeverhalten durchaus signifikant beeinflussen. Ein anderer Ansatz wäre es, für die Ausgabe verschiedener Bildergrößen in responsive Webdesigns den Adaptive Images-Ansatz zu verfolgen. Hier werden mit Hilfe von PHP und JavaScript automatisch verschiedene Bildgrößen für die verschiedenen Viewportgrößen erzeugt. )
• Ausrichtung und Position von Elementen ( So sollten Formular-Elemente auf mobilen Endgeräten eher unter-, als neben einander ausgerichtet werden. Bei der Darstellung von Tabellen, bietet es sich aufgrund der Platzverhältnisse an die Tabellenköpfe eher linksbündig auszurichten, anstatt wie gewohnt oberhalb der Zeilen. Denn so besitzen Sie die Möglichkeit mittels floating, die einzelnen Tabellenzellen direkt unter dem Tabellenkopf dieser Zeile abzubilden. )
• Reduzierung oder Vergrößerung des Whitespace ( Tablet vs. Smartphone )
• Aus- bzw. Einblenden von via Conditional Comments eingeblendeten Dateien ( IE 6 & 7 sind auf mobilen Endgeräten nicht vertreten. )

Wer sicher dieser Risiken bewusst wird, der wird über lang oder kurz nicht um die Diskussion herum kommen, welcher Möglichkeiten es für die ideale Vorgehensweise bei der Umsetzung eines responsiven Designs gibt. Ein möglicher Ansatz wäre es das mobile Design als Grundlage für die Gestaltung der anderen Darstellungsvarianten (Tablet, Desktop) heranzuziehen. Eine solche Vorgehensweise, auch “mobile first”, bringt eine vollkommen andere Herangehensweise für Webdesigner und Entwickler mit sich. Und das führt dazu, dass man aufgrund der kleineren Displays auf mobilen Endgeräten sehr viel weniger Platz zur Verfügung hat, womit man sich auf die wichtigsten inhaltlichen und funktionellen Features einer Webseite konzentrieren muss. Dazu sollte man sich u.a. unbedingt vor Beginn des Desingprozesses mit Fragen wie den folgenden: Was möchte ich mit der Webseite erreichen? Welche inhaltlichen und visuellen Elemente sind dafür dringend notwendig (und welche nicht)? Sollten diese Aspekte im vornherein geklärt worden sein, kann man dann mittels Media Queries und den entsprechenden CSS Eigenschaften die gewünschten responsiven Designs umsetzen.

Media Queries und die Browserwelt

Die Daseinsberechtigung einer CSS Eigenschaft richtet sich in erster Linie nach der Unterstützung durch die Browser. Diese ist bei Media Queries mittlerweile recht beachtlich, wobei Opera bereits seit Version 8 mit Media Queries umgehen kann. Firefox ist dazu seit Version 3.5 in der Lage. Da Safaris Rendering-Engine-Webkit außerdem in Googles Chrome zum Einsatz kommt, ist auch bei diesen beiden Browsern die Unterstützung gegeben. Aus dem Hause Microsoft, gibt es erst seit der aktuellen Version 9 Support für CSS Media Queries.