Responsive Webdesign mit Mediaqueries

von Michael Schumacher

Responsive Webdesign mit Mediaqueries

Schöne heile Welt, so will es uns die neue HTML5-Welt glauben lassen, in der wir leben. Unzählige Möglichkeiten zeigen sich auf und man kann optimistisch in die Zukunft schauen. Doch nicht nur die Webtechnologien entwickeln sich weiter, sondern auch die Geräte, mit denen das Web genutzt wird. Smartphones, Tablets und sogar TV-Geräte – das sind sie also, die neuen Gegenspieler/Herausforderer des Webentwicklers.

Jedes dieser neuen Geräte kommt mit einer anderen Größe/Auflösung daher und als sei das nicht alles schon problematisch genug, kann man einige von ihnen sogar drehen, was die Anzahl der theoretischen Auflösungsvarianten fast verdoppelt. Doch der Webentwickler hat ein gutes Werkzeug, um sich dieser Herausforderung zu stellen. Das Responsive Webdesign.

Das Responsive Webdesign versucht dabei, den Inhalt an die Darstellungsgröße des Gerätes anzupassen und so den verfügbaren Platz möglichst gut auszunutzen. Große Typografien oder großzügige Flächen (White-Spaces) sehen auf dem Desktop zwar gut aus, den Smartphone-User hindern sie jedoch daran, an die Informationen der Seite zu gelangen. Nerviges Zoomen und wischen ist das Ergebnis.

TESTCASE auf leguano labs ausprobieren

Ein Weg des Responsive Webdesigns sind die s.g. Mediaqueries, die eine Erweiterung der „Media Types“ aus CSS 2.1 darstellen.

Mittels der Media-Types konnte überprüft werden, ob der Besucher an einem Monitor liest, das Dokument druckt oder sich vom Screenreader vorlesen lässt – also das Medium abgefragt werden.

<link rel='stylesheet' media='screen' href='screen.css'>
<link rel='stylesheet' media='print' href='print.css'>
<link rel='stylesheet' media='aural' href='speak.css'>

Mit html5/css3 wird dieses Konzept nun weiter aufgebohrt und um weitere abfragbare Eigenschaften erweitert, die sogar kombinierbar mit den Media-Types sind. Die bekannten Attribute wie z.B. „screen“ können nun um eine richtige Abfrage (Query) erweitert werden. Somit kann überprüft werden, ob z.B. der Monitor eine gewisse Mindestgröße besitzt.

Beispiel Einbindung CSS-Datei in die HTML-Datei:

<link rel='stylesheet' href='screen-standard.css' media='screen and (min-width: 1024px)'>
<link rel='stylesheet' href='screen-small.css' media='screen and (max-width: 480px)'>

Oder innerhalb einer CSS-Datei:

@media screen and (max-width: 800px){
   h1{
       color:red;
   }
}

Da die heutigen mobilen Browser über intelligente Zoomfunktionen verfügen, wird eine Seite meist verkleinert dargestellt, was die Mediaquery bezüglich auf die Mindestbreite aushebelt. Dies unterbindet man mittels eines Meta-Tags im Header der Seite:

<meta name='viewport' content='initial-scale=1.0, width=device-width'>

Damit verhindert man zum einen das Zoomen (initial-scale=1.0) zum anderen zeigt das Gerät genauso viele Pixel an, wie es physikalisch besitzt (width=device-width).

Im Normalfall würde man also das Standard-Layout präsentieren und je nach Gerätegröße zusätzliches CSS nachladen, das dann Elemente nachträglich z.B. verkleinert, anders anordnet und anpasst.

TESTCASE ausprobieren

Mittels dieser Technik lässt sich eine Website leicht anpassen und für die jeweiligen Geräte ein optimiertes Layout präsentieren ohne, dass der HTML-Code geändert werden muss.

Fazit

Mediaqueries lassen sich durchaus ohne Risiko heute schon einsetzen. Browser die Mediaqueries nicht unterstützen, ignorieren diese einfach und bekommen das Standardlayout präsentiert. Moderne Geräte wie IPhone, IPad oder andere Mobilgeräte haben jedoch meist die aktuellste Browsergeneration an Board, so dass der Mehrwert gewiss ist.

Mediaqueries sind ein wichtiger Schritt in Richtung Responsive Webdesign, der Weisheit letzter Schluss sind sie jedoch auch nicht. So können z.B. Übertragungsraten oder Leitungsgeschwindigkeit mit ihnen nicht abgefragt werden, was dazu führt, dass der Besucher mit UMTS genauso die schwergewichtigen Bilder erhält, wie der, der am heimischen PC mit einer guten DSL-Leitung sitzt. Diesem Problem geht ein anderes Paradigma nach, das „Mobil First Prinzip“, aber dazu später […].

Zurück