Responsive Webdesign
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalterischen und technischen Ansatz zur Erstellung anpassungsfähiger Websites. Daher wird anstelle von „responsiv“ häufig auch von einem „adaptiven Layout“ gesprochen. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird. Dies betrifft insbesondere die Anordnung und Darstellung einzelner Elemente, wie beispielsweise Navigationen, Seitenspalten und Texte. Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript.
Inhaltsverzeichnis |
Grundlagen [Bearbeiten]
Die Größe und Auflösung der Displays auf Laptops, Desktop-PCs, Tablets, Smartphones, E-Book-Readern und TV-Geräten können erheblich variieren. Aus diesem Grund sind das Erscheinungsbild und die Bedienung einer Webseite stark abhängig vom Endgerät. Webseiten, die mit einem reaktionsfähigem Design ausgestattet sind, berücksichtigen die unterschiedlichen Anforderungen der Endgeräte. Ziel dieser Praxis ist, dass Websites ihre Darstellung so anpassen, dass sie sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren. Kriterium für das angepasste Erscheinungsbild ist in der Regel, aber nicht nur, die Anzahl der Pixel, die der Browser in der Breite zur Verfügung hat.
Technik [Bearbeiten]
Eine für responsives Webdesign wesentliche Voraussetzung sind sogenannte Media Queries, ein CSS3-Konzept, welches unterschiedliche Designs in Abhängigkeit von bestimmten Eigenschaften des Ausgabemediums erlaubt.
Beispielsweise können folgende Eigenschaften als Kriterien herangezogen werden:
- Größe des Gerätes selbst
- Bildschirmauflösung
- Orientierung (Hoch- oder Querformat)
- Eingabemöglichkeiten (Tastatur, Fingergeste [Touch], Sprache)
<head> <link rel="stylesheet" type="text/css" href="css/all.css" /> <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 Bildschirmbreite des betrachtenden Gerätes 480 Pixel nicht überschreitet. In dieser Ressource können Entwickler nun spezielle Anpassungen für entsprechende Geräte vornehmen. Geräte mit einer höheren Auflösung bleiben davon unberührt. Sie bekommen die Website also beispielsweise in voller Größe angezeigt, da sie die Festlegungen aus dem Stylesheet all.css anwenden.
Ältere Browser können CSS3 und insbesondere Media-Queries nicht interpretieren. In solchen Fällen kann durch sogenannte Browserhacks Abhilfe geleistet werden:
- HTML5 für Internet Explorer unter Version 9[1]
Literatur [Bearbeiten]
- Christoph Zillgens: Responsive Webdesign – Reaktionsfähige Websites gestalten und umsetzen. 1. Auflage. Carl Hanser Verlag, 2012, ISBN 978-3446430150.
- Ajax Hacks: Tips and Tools for Creating Responsive Web Sites. London 2006. ISBN 0-596-10169-4
- CSS3: HTML5 and CSS3: Develop with Tomorrow’s Standards Today (Pragmatic Programmers) ISBN 1-934356-68-9
- Ethan Marcotte: Responsive Webdesign. A Book Apart, New York 2011 ISBN 978-0-9844425-7-7
- Smashing Magazine: The Mobile Book. Smashing Media 2012
Weblinks [Bearbeiten]
- Gute Beispiele von Webseiten, die in Responsive Webdesign umgesetzt sind, listet Media Queries auf. (englisch)
- Offizielle Website des W3C zu CSS3 (englisch)
- Offizielle Website des W3C zu HTML5 (englisch)
- Grundlagen zum Thema HTML5 und CSS3
- Tool um die Darstellung von Webseiten auf iPhone und iPad zu simulieren
