Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren

media-queries-kulturbanause

Das Web ist längst mobil geworden und moderne Websites müssen nicht nur auf dem Monitor, sondern auch auf unzähligen Ausgabemedien eine Top-Figur machen. Zwar rufen die meisten User Websites noch über einen Computer auf, aber die Zugriffe über mobile Endgeräte wie iPad, Smartphones und portable Spielekonsolen steigt stetig an. Wie soll man da eine Website für all diese Geräte optimieren können? Mit CSS Media Queries ist das gar nicht so schwierig.
In diesem Beitrag möchte ich Euch die Vor- und Nachteile dieser Technik erklären und an einem praktischen Beispiel zeigen wie schnell Ihr auch Eure Website für Smartphones und Tablet PCs optimieren könnt.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Video: Media Queries und Breakpoints

Neben einer Erklärung in Textform habe ich auch ein Video zu diesem Thema erstellt. In diesem Screencast zeige ich euch wie Ihr mit Hilfe von Media Queries das Layout einer Website in Grenzbereichen umstrukturiert. Dabei setzen wir Media Queries sowohl in der klassischen Variante (max-width) als auch nach dem Mobile-First-Prinzip (min-width) ein und lernen darüber hinaus die technischen Hintergründe der CSS-Technologie kennen. Der Screencast ist eine Lektion aus meinem Video-Training Responsive Webdesign.

Von CSS2 Media Types zu CSS3 Media Queries

Media Queries bieten die Möglichkeit CSS-Inhalte für bestimmte Medien auszugeben. Sie haben also eine ähnliche Funktion wie das media-Attribut (auch als media-type bezeichnet) mit dem Ihr bestimmen könnt für welches Ausgabemedium, z.B. den Monitor oder Drucker, ein Stylesheet verwendet werden soll.

Die bisherige Einbindung eines Stylesheets unter Berücksichtigung des Media-Types sieht so aus:

<!-- Attribut "Screen" für die Bildschirmansicht -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

<!-- Attribut "Print" für die Druckausgabe -->
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>

Ihr könnt auch bestimmte Bereiche innerhalb des CSS-Dokuments entsprechend kennzeichnen. In diesem Beispiel wird nur die Bildschirmansicht berücksichtigt.

@media screen {
  h1 { background:red; }
}

CSS3 Media Queries gehen hier noch einen Schritt weiter. Neben der Art des Ausgabemediums könnt Ihr auch festlegen für welche Auflösung, Bildschirmgröße, Ausrichtung oder Farbdarstellung ein Stylesheet gelten soll. Dabei habt Ihr nach wie vor die Wahl ob Ihr Media Queries bei der Einbindung des CSS-Dokuments verwendet, oder ob Ihr bestimmte Abschnitte innerhalb der CSS-Datei definiert. Auf die Unterschiede beider Varianten gehe ich später noch einmal im Detail ein.

Wenn Ihr die entsprechenden Rahmenbedingungen kennt, so könnt Ihr also beispielsweise ganz gezielt ein Stylesheet für die Darstellung der Website auf dem iPad im Querformat erstellen. Oder Ihr optimiert die Website für alle modernen Smartphones (iOS, Android). Oder für Bildschirme mit stark reduzierter Farbdarstellung, oder oder oder ...

Media Queries auf kulturbanause blog
Optimierte Darstellungs-Varianten meines Blogs mit Media-Queries

Welche Werte könnt Ihr mit Media Queries abfragen?

Mit Media Queries lassen sich erstaunlich viele Eigenschaften abfragen. Damit die späteren Beispiele leichter verständlich sind möchte ich hier einmal einige Optionen auflisten. Diese fünf Eigenschaften sind die wichtigsten wenn es um das Ansprechen mobiler Endgeräten geht.

width
Viewport-Breite (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media handheld and (min-width: 20em) { ... }
height
Viewport-Höhe (z.B.: Der zur Verfügung stehende Platz innerhalb des Browserfensters)
Beispiel: @media screen and (max-height: 700px) { … }
device-width
Breite des Mediums (Smartphone-Bildschirm, Monitorgröße etc. )
Beispiel: @media screen and (device-width: 800px) { … }
device-height
Höhe des Mediums (Smartphone-Bildschirm, Monitorgröße etc.)
Beispiel: @media screen and (device-height: 400px) { … }
orientation
Beschreibt ob ein Gerät im Querformat (landscape) oder im Hochformat gehalten wird (portrait).
Beispiel: media all and (orientation:portrait) { … }

Wenn Ihr es ganz genau wissen wollt, so findet Ihr die oben genannten Beispiele sowie alle zur Verfügung stehenden Eigenschaften und den sehr komplexen Syntax auf der Website des W3C.

Wie können Media Queries verwendet werden?

Wie ich zu Beginn bereits erklärt habe könnt Ihr Media Queries auf zwei Arten verwenden.
Zunächst könnt Ihr direkt bei der Verknüpfung des CSS-Dokuments im <head> Eurer Website die entsprechenden Angaben machen und somit verschiedene Stylesheets für verschiedene Endgeräte einbinden.

Wenn Ihr also eine CSS-Datei für die Desktop-Version Eurer Website anlegen möchtet und eine für die iPhone-Version, dann kann das Ganze so aussehen.

<link type="text/css" rel="stylesheet" media="screen" href="style.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />

Zur Info: Smartphones und Tablet-PCs melden sich als screen bei einer Website an. Der Media-Type handheld ist für diese Geräte also nicht geeignet.

Alternativ könnt Ihr auch bestimmte Bereiche innerhalb eines CSS-Dokuments mit Media Queries ansprechen. Im folgenden Beispiel wird der body auf dem iPhone rot eingefärbt.

only screen and (max-device-width: 480px) {
  body {background:red;}
}  

Ich persönlich empfehle die zweite Variante da Ihr nur ein CSS-Dokument laden müsst. Somit vermindert Ihr HTTP-Requests und beschleunigt die Ladezeiten Eurer Website.

Die Website für iPhone und iPad optimieren

Nun möchte ich Euch gerne anhand eines Beispiels zeigen wie Ihr mithilfe von Media Queries eine simple Website für die Desktop-Darstellung, für das iPad und für das iPhone optimieren könnt.
In diesem Beispiel erstellen wir eine sehr simple Website mit einem Header, einem Content-Bereich sowie zwei Sidebars. In der Desktop-Version befinden sich beide Sidebars nebeneinander. In der iPad-Version steht in der Breite zu wenig Platz zur Verfügung, daher rutscht die eine Sidebar unter den Content. In der iPhone-Version werden dann alle Inhalte untereinander dargestellt.

Ich erkläre Schritt für Schritt wie ich vorgegangen bin. Das fertige Beispiel findet Ihr hier.

Demo-Seite anzeigen

Anordnung der Inhalte für die Desktop-, iPad- und iPhone-Version
Anordnung der Inhalte für die Desktop-, iPad- und iPhone-Version

HTML-Grundgerüst

Der HTML-Aufbau des Beispiels ist denkbar einfach. Innerhalb eines umschließenden <div> habe ich den Header, den Content und die Sidebar eingebunden. Ganz unten seht Ihr noch einen Div mit Inline-CSS. Dieser dient dazu die späteren CSS-floats wieder aufzuheben. Die Lösung mit Inline-CSS dient nur der Übersichtlichkeit des Beispiels und ist kein guter Code!

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Websites mit CSS3 Media Queries für iPhone, iPad, Android &amp; Co. optimieren</title>
</head>

<body>

<div id="container">
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="sidebar1">sidebar 1</div>
  <div id="sidebar2">sidebar 2</div>
  <div style="clear:both;"></div>
</div>

</body>
</html>

CSS-Code der Desktop-Anzeige

Wir beschäftigen uns zunächst mit der Desktop-Anzeige der Website. Den nachfolgenden CSS-Code habe ich im <head> des Dokuments eingebunden. Ich verwende zunächst einen CSS-Reset und weise anschließend den Seitenelementen Ihre Grundeigenschaften zu.

Auffällig ist vielleicht, dass ich dem #container eine feste Breite zugewiesen habe. Innerhalb des Containers habe ich dann alle Elemente mit %-Breiten definiert. Diese Technik hat für mich den Vorteil, dass ich in der Desktop-Version mit festen Werten arbeiten kann. In den späteren mobilen Versionen ändere ich dann die Breite des Containers und passe das Verhältnis der Inhalte aneinander an.

Die Angabe von Prozentwerten ist wichtig um nicht nur iPhones und iPads anzusprechen sondern auch andere Smartphones und Tablets die mit sehr ähnlichen Abmessungen arbeiten. Die Angabe fixer Pixelwerte kann leicht zu Fehldarstellungen auf diversen Geräten führen und wir können ja nicht alles testen und anpassen.

* {
	margin:0;
	padding:0;
	color:white;
}

#container {
	margin:30px auto;
	width:960px;
}

#header {
	width:100%;
	background:#80c9e3;
	margin-bottom: 2%;
	height:150px;
}

#content {
	float:left;
	width:56%;
	margin-right:2%;
	background:#3f90ae;
	height:800px;
}

#sidebar1 {
	float:left;
	width:20%;
	margin-right:2%;
	background:#2e6a80;
	height:800px;
}

#sidebar2 {
	float:left;
	width:20%;
	background:#153a48;
	height:800px;
}

CSS-Code der iPad-Version

Wenn die Desktop-Version der Website steht, können wir mit Media-Queries die iPad-Version optimieren. Dazu füge ich unterhalb meines bisherigen CSS-Codes den entsprechenden Media Query ein und überschreibe alle Eigenschaften die ich verändern möchte. Um das iPad gezielt ansprechen zu können müsst Ihr natürlich wissen welche Abmessungen das Gerät bzw. der Bildschirm hat.

Bitte beachtet, dass ich in diesem Beispiel die Eigenschaft width anstelle von device-width verwende. Das hat für mich den Vorteil, dass ich das Verhalten meiner Website testen kann indem ich die Größe des Browserfensters verändere. device-width wirkt sich auf die Größe des Bildschirms aus - das Beispiel wäre dann also nur auf einem iPad sichtbar.

Ich spreche also zunächst alle Viewports bis zu einer Breite von 1024 Pixeln an und vergebe anschließend einige neue Eigenschaften. Der Content wird breiter und Sidebar 2 erhält eine Breite von 100%.

@media only screen and (max-width: 1024px) {

#container { width:100%; }

#content { width:78%; }

#sidebar1 {
	width:20%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
}

} 

CSS-Code der iPhone-Version

Die Smartphones lassen sich nach dem gleichen Prinzip ansprechen. Auch hier müsst Ihr lediglich die Abmessungen kennen und anschließend den CSS-Code anpassen.
Die iPhone-Version dieses Beispiels sieht wie folgt aus, und wird unterhalb des iPad-Codes eingebunden:

@media only screen and (max-width: 480px) {

#content {
	width:100%;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar1 {
	width:100%;
	height:200px;
	margin-right:0;
	margin-bottom:2%;
}

#sidebar2 {
	width:100%;
	height:200px;
	margin-top:2%;
}
}

meta-viewport

Wenn ihr die Beispiel-Website nun am Computer testet funktioniert alles wie gewünscht. Auf einem echten mobilen Endgerät ist das allerdings noch nicht der Fall, denn hier arbeitet eine Technik namens Layout-Viewport im Hintergrund. Damit Tablets, Smartphones & Co. unsere Media Queries korrekt interpretieren, muss folgende Zeile Code in den <head> der Website eingebunden werden.

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />  

Mit diesem Befehl wird der automatische Layout-Viewport überschrieben. Der Viewport auf mobilen Endgeräten ist nun immer exakt so breit wie das Display.

Demo-Seite anzeigen

Zoom deaktivieren?

Über den meta-viewport ist es auch möglich den Zoom zu deaktivieren. Früher war das eine beliebte Methode um den sog. iOS-Skalierungs-Bug zu beheben. Bei diesem Fehler werden Bilder nicht korrekt umgerechnet, wenn das Gerät gedreht wird. Heute sollte der Zoom in responsive Websites nicht mehr deaktiviert werden.

Wichtige Hinweise zu diesem Beispiel

Das hier gezeigte Beispiel zeigt die elementare Funktionsweise von Media Queries. Moderne Websites sind nach dem mobile First-Prinzip aufgebaut und orientieren sich nicht wie hier gezeigt an exakten Displaygrößen. Wenn ihr euch näher mit dem Thema beschäftigen möchtet, lest folgenden Artikel: Mobile First + Progressive Enhancement

Browser-Unterstützung für Media Queries

Der Browser-Support für Media Queries beschränkt sich auf die folgenden Browser-Versionen: Chrome, Safari 3+, Firefox 3.5+, Opera 7+, Internet Explorer 9. Wenn ihr mobile First arbeitet, oder ältere Browser berücksichtigen müsst empfehle ich euch das Polyfill respond.js.

Media Queries für hochauflösende Displays

Wenn ihr euch noch weiter mit Media Queries beschäftigen wollt, insbesondere was die Optimierung einer Website für das Retina-Display von Apple und andere hochauflösende Displays angeht, so schaut euch auch folgenden Artikel an: