Responsive Webdesign wird gern verwechselt mit dem Design mobiler Websites. Das ist nicht völlig falsch, aber viel zu kurz gegriffen. Responsive Webdesign ist vielmehr eine Herangehensweise an die Website-Gestaltung, die theoretisch unabhängig von Geräten ist. Wer sich mit dem Thema bislang nicht beschäftigt hat, findet im Folgenden einen Einstieg.
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um die technische Umsetzung eines anpassungsfähigen Website-Layouts. 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 neueste Webstandards wie HTML5 und CSS3.
Grundlagen
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
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)
Die Zielsetzung
Mittlerweile muss beim Entwurf eines Designs für eine Webseite nicht mehr nur an Auflösungen zwischen 480×320 und 1900×1200 Pixeln gedacht, sondern darüber hinaus noch viel höhere Auflösungen vorgedacht werden. Es wird also von Webdesignern erwartet, dass Webseiten, die wir heute entwickeln, auch noch in 12 Monaten anspruchsvoll wirken. Und dass das zur Herausforderung werden kann, wissen wir alle längst seit dem Erscheinen von Geräten wie dem Macbook Pro Retina.
Das CSS3 Framework im MyOOS [Shopsystem] tritt mit keinem geringeren Anspruch an, als diese Probleme zu lösen.
Basis: Das Grid
Wie die größte Zahl aller Frameworks, nutzt auch CSS3 Framework im MyOOS [Shopsystem] das Prinzip der Grids. Wer bereits mit Bootstrap oder 960.gs gearbeitet hat, findet sich hier relativ schnell zurecht. Ein Grid-Element wird an die Auflösung des jeweiligen Gerätes angepasst. Diese werden hier als columns bezeichnet und können einem DIV als Klasse zugewiesen werden. Columns müssen immer von einem DIV mit der Klasse row umschlossen sein. Dieses bestimmt die maximale Breite der Summe aller Grid-Elemente innerhalb des Divs mit der Klasse row. Eine Seite oder ein row-Div bestehen aus bis zu 12 columns.
12 nützliche Tools für Responsive Webdesign
Die Autoren von Webdesignledger haben 12 nützlichsten Tools für Entwickler rausgesucht, die beim Gestalten von responsiven Webseiten helfen. Mit dabei sind vor allem Tools, die verschiedene Browser, Auflösungen und Geräte simulieren um eventuelle Schwachstellen im Design zu entdecken.
Weblinks
Offizielle Website des W3C zu CSS3 (englisch)
Offizielle Website des W3C zu HTML5 (englisch)