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

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 CSS3 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.

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 ...

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.

• W3C - Official Specs

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

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 jetzt die iPad-Version optimieren. Dazu füge ich unterhalb meines bisherigen CSS-Codes den entsprechenden Media Querie 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. Diese Werte könnt Ihr der Liste am Ende dieses Tutorials entnehmen.

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 (inkl. Smartphones mit Android etc.)

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%;
}
}

Zoom deaktivieren, Skalierung festlegen

Smartphones ermöglichen es dem User in der Website zu zoomen. Das macht nur dann Sinn wenn die Dektop-Version auf dem Handy angezeigt wird. Bei einer optimierten Version ist der Zoom eher störend (dieser Punkt wird kontrovers diskutiert). Über einen <meta>-Tag kann der Zoom deaktiviert werden.
Darüber hinaus kann (und sollte) die minimale und maximale Skalierung festgelegt werden.

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

Das war auch schon alles. Ein deaktivierter Zoom behebt übrigens auch den iOS-Skalierungs-Bug. Bei diesem Fehler werden Bilder nicht korrekt umgerechnet, wenn das Gerät gedreht wird.

Demo-Seite anzeigen

Nach exakt diesem Prinzip habe ich auch die Anpassung an die verschiedenen Endgeräte für meine eigene Seite umgesetzt. Ich habe mich auch dafür entschieden den Viewport (width) und nicht die Größe des Endgeräts abzufragen (device-width). Außerdem verwende ich eigene Abmessungen und nutze nicht exakt die iPad und iPhone-Werte. Aber das ist alles Geschmacksache und abhängig vom Projekt.
Da in den Kommentaren zum Relaunch meiner Seite von Lukas die Frage gestellt wurde wie ich die verschiedenen Anpassungen umgesetzt habe, hoffe ich sehr die Frage mit diesem Artikel nun beantwortet zu haben.

Und das sind die wichtigsten Formate

Damit Ihr nicht lange suchen müsst findet Ihr hier die Media Queries der wichtigsten Endgeräte.

Wenn Ihr diese Liste ergänzen könnt (Android, Windows Phone, Nokia, etc.) dann schreibt doch bitte einen Kommentar.

iPhone / iPod Touch

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

iPhone mit Retina Display

@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { }

iPad

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {}
oder:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {}

Browser-Unterstützung

Der native 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. Das insbesondere ältere Browser die Technik nicht interpretieren können halte ich aber für nicht sonderlich schlimm. Wenn Ihr Media Queries für die Anpassung an mobile Endgeräte einsetzt, könnt Ihr nämlich auf einen sehr umfangreichen Support bei den mobilen Browsern zurückgreifen.
Solltet Ihr dennoch für einen veralteten Desktop-Browser Media Queries einsetzen müssen, so hilft Euch sicher folgendes jQuery-Plugin um die Technik per JavaScript nachzurüsten.

Media Queries für hochauflösende Displays (iPad 3, iPhone 4 & Co.)

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 (die da vielleicht bald kommen) angeht, so schaut euch auch folgenden Artikel an:

• Websites und Bilder für High-Resolution-Displays optimieren