Als responsives Webdesign wird ein Design bezeichnet, welches mit seinen flexiblen Inhalten auf den Nutzer reagiert.
So kann eine Website auf beliebigen Endgeräten stets das beste Nutzererlebnis sichern. Außerdem zählt responsive Webdesign bestimmt zu den spannendsten und heißesten Themen heutzutage.
Da dieses Verfahren auf fluid Grids und flexiblen Layous basiert, passt sich das Layout automatisch an die verfügbare Bildschirmauflösung an. Demensprechend wird auch der Inhalt samt den Texten, Slider, Bilder und Videos nach der Bildschirmauflösung positioniert und skaliert. Da es also auf die technischen Gegebenheiten des jeweiligen Endgeräts reagiert, liefert das responsive Webdesign auch ein dementsprechend angepasstes Layout. Das Thema hat erst seit der Unterstützung und Implementierung des CSS3 Media Queries richtig eingeschlagen, da mithilfe diesen Verfahrens beispielsweise die Auflösung des Endgeräts vorbestimmt werden kann. Somit wird dem entsprechenden Endgerät ein vordefinierter, spezifischer CSS-Code mitgeteilt, welcher in der Lage ist ein Layout zu erzeugen, welches auf die Gegebenheiten exakt abgestimmt ist.
Responsive Webdesign reagiert „automatisch“ auf Displaygrößen
Media Queries können mit bestimmten Features gekoppelt sehr dezidiert zum Aufruf angepasster Stylesheets genutzt werden. Es liegt in der Hand des Designers, wie weit er mit der Anpassung gehen will. Mit media=”screen and (max-device-width: 480px)” würde ein Stylesheet geladen werden können, das perfekt für Geräte agepasst ist, die eine maximale Breite von 480 Pixeln anzeigen können.
- Auf folgende Features kann mittels Media Queries zugegriffen werden:
- width / height
- device-width / device-height
- aspect-ratio / device-aspect-ratio
- color-index / color
- orientation
- resolution
- scan
- grid
Bestimmt fragen Sie sich aber auch, wozu das Ganze? Es ist nämlich so, dass sich in den letzten Jahren vo allem zwei Trends stark hervorgehoben haben, die in Sache Webdesign ständig neue Herausforderungen darstellen. Einerseits werden bei Desktop Monitoren die Auflösungen immer größer – in einigen Fällen erreicht die Content-Breite sogar Werte von 1280 Pixel. Anderseits wird die Internetnutzung auf mobilen Endgeräten zum Alltag, und somit nimmt auch die Vielfalt an verschiedenen Bildschirmauflösungen ständig zu. Die Bildschirmauflösungen bei mobilen Endgeräten haben eine Bandbreite von 240 x 320 Pixel bis hin zu 1024 x 768 Pixel. Dann ist es auch selbstverständlich, dass eine Website auf einem älteren 240 x 320 Pixel Endgerät anders als auf einem 1920 x 1080 Pixel Monitor aussieht.
Wer eine Website mit responsive Webdesign umsetzen will, muss sich etwas umgewöhnen, da bislang Websites für unterschiedliche Geräte in der Regel getrennt voneinander entwickeltwurden. Responsive Webdesign hingegen will sich an alle möglichen Bildschirmauflösungen und Formate so geschickt anpassen, dass das nicht notwendig ist.
Obwohl man dabei nichts als Chaos im Sinn hat, versucht responsive Webdesign in die Design-Darstellungen von verschiedenen Geräten und Bildschirmauflösungen Ordnung einzubringen. Es hat immerhin auch den Vorteil, dass dabei eine Website nicht auf verschiedene Geräte einzeln optimiert werden muss, sondern nur auf die jeweilige Bildschirmauflösung. Stellen Sie sich beispielsweise einen 4-spaltigen Content-Layout vor, welcher auf einem Desktop Monitor als solcher auch angezeigt wird. Dieser gleiche Content wird auf einem mobilen Endgerät zum Beispiel in einem 1- oder 2-spaltigen Layout verpackt und angezeigt. So kann eine Website idealerweise für möglichst viele Bildschirmauflösungen optimiert werden, und sowohl für Desktop Monitoren und Notebooks als auch für portable Endgeräte zugänglich gemacht werden. Um dies zu erreichen, sollten feste Schriftgrößen und feste Layout-Grids möglichst vermieden werden.
Jetzt kling es auch sinnvoll, warum responsive Webdesign heutzutage so wichtig ist. Auf einem Endgerät vermittelt es das Gefühl, dass eine bestimmte Website eine native Applikation sei, ohne dabei das Endgerät spezifisch optimieren zu müssen.