Vorheriger Artikel Nächster Artikel

Responsive Webdesign: Mit CSS3-Mediaqueries Webseiten flexibel aufbauen

Aus dem
t3n Magazin Nr. 25

09/2011 - 11/2011

Vorbei die Zeiten, in denen sich auf Webseiten nur innerhalb einer verbindlich maximalen Standardbreite austoben durften. Smartphones und fordern aufgrund ihrer physikalischen Größe Tribut. Doch wie erreicht man, dass Webseiten überall gut aussehen? „Reaktionsfähiges Webdesign“ passt Inhalte automatisch der zur Verfügung stehenden Darstellungsgröße an.

Responsive Webdesign: Mit CSS3-Mediaqueries Webseiten flexibel aufbauen
Responsive Web Design

Das Anforderungsprofil einer Webseite kann man schnell auf einen Nenner bringen: Der Anwender sollte eine Seite jederzeit erreichen und benutzen können – egal ob am großen Bildschirm daheim, am Laptop im Café oder auf dem in der U-Bahn. Es geht darum, Inhalte bereitzustellen, die der User ohne Mühe immer und überall konsumieren kann.

Das ist auch im Sinne eines jeden Webseitenbetreibers, denn schließlich möchte man keinen Besucher ausschließen, nur weil dieser zufällig gerade per Smartphone im Web unterwegs ist. Betrachtet man die Desktop-Version für große Monitore als gesetzt, hat ein Webentwickler drei Möglichkeiten, eine mobile Variante bereitzustellen:

  • Er liefert die Webseite eins zu eins mit der vollen Gesamtbreite (gewöhnlich ab 900 oder gar 1100 Pixel) auch an Smartphones aus. Der Benutzer muss bei dieser Variante oft zoomen, um Texte lesen zu können, Bilder anzuschauen oder um einen Überblick zu erhalten, welche Bereiche der Webseite er sich näher ansehen möchte.
  • Der Webentwickler liefert zusätzlich zur Desktop-Version eine mobile Variante einer Webseite aus – mit eigenem Design und möglicherweise sogar eigenen Inhalten. Der Benutzer erhält eine grafisch reduzierte Variante, kann schnell durch die Inhalte surfen, hat aber auch keinen Zugriff auf die Inhalte der Desktop-Version.
  • Die Webseite passt sich automatisch der Darstellungsgröße des Browsers an. Bei großen Bildschirmen geizt man nicht mit Platz und die Inhaltselemente zeigen eine große Typographie und viel Whitespace. Bei kleinen Bildschirmen arrangieren sich die Elemente der Webseite hingegen so, dass die Darstellung auch bei Platzmangel überzeugen kann – ohne dass der Benutzer zoomen muss.

Letzteres klingt doch mal richtig gut, oder? Responsive Web Design macht es möglich. Mit den neuen Möglichkeiten von HTML5, und JavaScript können Webentwickler vorgeben, wie sich die Webseite der Darstellungsgröße anpasst und nicht, wie sich der Benutzer an die Webseite anpassen muss, um die Inhalte zu konsumieren. Das funktioniert unter anderen dank CSS3-Mediaqueries.

CSS3-Mediaqueries

el sendero del cacao
Die Seite „El Sendero del Cacao“ passt sich der Browserbreite an.

Mit den CSS3-Mediaqueries kann man ein HTML-Element je nach Eigenschaft des darzustellenden Browsers ein anderes Aussehen verpassen. So könnte man die Seite auf einem Desktop-Rechner mit großem Bildschirm mehrspaltig nebeneinander zeigen. Neben der breiten Inhaltsspalte hätten dann noch zwei oder sogar drei Randspalten mit Zusatzinformationen Platz. Auf Smartphones hingegen müsste man den Inhalt linear, also unter- und nacheinander aufreihen, damit der Anwender den Inhalt einfacher lesen kann. Bei identischem HTML können Webentwickler so ein wenig mit CSS nachhelfen. Ein Konstrukt mit Mediaqueries könnte so aussehen:

Mediaqueries innerhalb einer CSS-Datei

@media screen and (max-width: 768px) and (orientation: portrait) {
	.meinElement {
		background-color: #c22;
	}
}

Zur Erklärung: Man gibt dem Element mit der CSS-Klasse „meinElement“ eine rote Hintergrundfarbe, wenn der Bildschirm eine Breite von 768 Pixeln nicht überschreitet und im Falle eines mobilen Gerätes im Hochformat gehalten wird.

Ein knappes Dutzend Eigenschaften [1] wie width/height, device-width/device-height oder sogar device-aspect-ratio kann man mit den Mediaqueries zwar nicht ausgeben, aber sich je nach Unterstützung durch den jeweiligen Browser zur Nutze machen.

So kann man also zuvor definierte Eigenschaften eines HTML-Elements in CSS für Auflösungen unter einer bestimmten Breite (max-width für den Browser und max-device-width für das Gerät insgesamt) oder über einer bestimmten Breite (min-width/min-device-width) überschreiben.

Die Mediaqueries kann man auf unterschiedliche Art und Weise einbinden, um sie zu nutzen. Als gesonderte Stylesheet im HTML:

<link rel="stylesheet" href="bigscreen.css" media="screen and (min-width: 1024px)">

als @import-Regel innerhalb eines Stylesheets:

@import url("bigscreen.css") screen and (min-width: 1024px);

oder eben auch als Block um CSS-Definition, wie im oberen Beispiel zu „.meinElement“.

Damit die Mediaqueries überhaupt greifen, und da das ständige rein- und rauszoomen den Lesefluss schnell trüben kann, gilt es, die Verkleinerung zu unterbinden. Vom iPhone kennt man dieses Verhalten: Der Browser zeigt eine große Webseite verkleinert auf dem Display an, mit einem Doppeltip auf das Display oder einer Wischgeste kann man einen Bereich vergrößern. Dazu hat Apple ein HTML-Meta-Element für den <head> einer Seite eingeführt, das sich mittlerweile zum de-facto-Standard gemausert hat:

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

Mit ihm setzt man den Zoom-Level auf 1.0 (100%) und gibt an, dass der Darstellungsbereich des Browsers genau so breit sein soll wie die Bildschirmbreite. Dass ist wichtig, denn auch ein iPhone mit der Bildschirmbreite von 768 Pixeln soll genau 768 Pixel darstellen. Das verhindert – Unterstütztung des Browsers vorausgesetzt – das Rein- und Rauszoomen und damit die lästige Arbeit beim Surfen.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von Muhammed am 17.04.2012 (16:03 Uhr)

    Kleiner Tipp: Responsive CSS3 Slider von Ian Hansson. Sehr gut gelungen, wie ich finde, und es kommt ohne Javascript aus. Funktioniert auf allen modernen Browsern prima.

    http://csscience.com/responsiveslidercss3/

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Tablets
Die Basics des Responsive Webdesign in 9 schicken GIFs
Die Basics des Responsive Webdesign in 9 schicken GIFs

Wir zeigen euch die wichtigsten Prinzipien des Responsive Webdesign – in neun schicken GIFs aus der Feder des Designers Sandijs Ruluks von Froont. » weiterlesen

Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]
Responsive Webdesign: Browserunterstützung und Tools [t3n-Video-Workshop]

Heute führen wir auf t3n.de die Video-Serie weiter, in der wir euch in Zusammenarbeit mit Galileo Press Video-Workshops zu verschiedenen Themen für Webentwickler und Digitalarbeiter präsentieren. » weiterlesen

40 kostenlose WordPress-Themes für Responsive Design
40 kostenlose WordPress-Themes für Responsive Design

Das Angebot an kostenlosen Templates für die eigene Website wächst stetig. Auch die Auswahl an Wordpress-Themes, die Responsive Webdesign unterstützen, ist inzwischen beachtlich. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 38 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen