Responsive Design

Responsive Webdesign bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau, insbesondere die Strukturierung der einzelnen Elemente wie z. B. Navigationen und Texte, von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt. Technische Basis sind neuste Webstandards wie HTML5 und CSS3.

Grundlagen

Da die Auflösung des Displays auf Laptop, PC, Tablet-Computer, Smartphone oder Fernseher erheblich variieren können, ist das Erscheinungsbild und die Bedienung einer Webseite abhängig vom Endgerät. Webseiten, die unter den Gesichtspunkten von responsivem Design bereitgestellt werden, berücksichtigten die jeweiligen Anforderungen des Gerätes und optimieren die Darstellung und Navigationselemente automatisch für das jeweilige Endgerät.

Kriterium für das angepasste Erscheinungsbild ist in der Regel die Anzahl der Pixel die der Browser in der der Breite zur Verfügung hat.

Geräteanforderungen

Größe des Gerätes selbst
Bildschirmauflösung
Betrachtungswinkel (vertikal bzw. horizontal) z.B. Landscape-Mode
Eingabemöglichkeiten (Tastatur, Fingergeste (Touch), Sprache)

Technik

Eine für responsives Webdesign wesentliche Voraussetzung sind sog. Media Queries(CSS3), die die Website für bestimmte Bildschirmauflösungen umstrukturieren.

Beispiel Media Query

<head>
 <link rel="stylesheet" type="text/css"
 media="all and (max-device-width: 480px)" href="css/smartphones.css" />
</head>

Hier wird das Stylesheet: smartphones.css geladen, wenn die maximale Bildschirmauflösung des betrachtenden Gerätes 480px nicht überschreitet. In der Datei smartphones.css können Entwickler nun spezielle Anpassungen für entsprechende Geräte programmieren. Geräte mit einer höheren Auflösung bleiben davon unberührt. Sie bekommen die Website also z.B. in voller Größe angezeigt.

Mögliche Probleme

Ältere Browser können CSS3 und insbesondere Media-Queries nicht interpretieren. In solchen Fällen kann Abhilfe durch sog. Browserhacks geleistet werden.

Weblinks

Quelle: Wikipedia (http://de.wikipedia.org/wiki/Responsive_Design)