Responsives Webdesign

Webseiten-Layouts welche auf das Verhalten des Nutzers reagieren werden als responsive Webdesigns bezeichnet.

Responsives Webdesign wird zunehmend eine Rolle spielen. Die Vielfalt unterschiedlicher Endgeräte, ob Smartphone, Home-PC oder der Fernseher mit Internetanschluss fordert ein Umdenken bei der Gestaltung, damit dem Nutzer stets das gleiche positive Erlebnis beim Besuch des Internetauftritts geboten werden kann.

Basierend auf fluid Grids und flexiblen Layouts, passt sich das Webseiten-Layout automatisch an die verfügbare Bildschirmauflösung an. Dementsprechend wird auch der Inhalt samt den Texten, Slider, Bilder und Videos nach der Bildschirmauflösung positioniert und skaliert. Die Reaktion auf die technischen Gegebenheiten des jeweiligen Endgeräts resultiert in einem jeweils angepassten Layout. Seit der Unterstützung und Implementierung des CSS3 Media Queries (Cascading Style Sheets zur Definition des Layouts in einer Webseite) kann den Anforderungen nun besser gerecht werden und das Thema gewinnt zunehmend an Fahrt bei Webseitenbetreibern. Mit dem Verfahren kann beispielsweise die Auflösung des Endgeräts vorbestimmt werden. 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/Bildschirmauflösungen

Die sog. Media Queries können mit bestimmten Features gekoppelt sehr dezidiert zum Aufruf angepasster Stylesheets genutzt werden. Der Webdesigner bestimmt dabei, wie weit er mit der Anpassung gehen will. Ob nur eine Skalierung von Elementen stattfinden soll, oder sich beispielsweise auch die Anfordnung von Elementen, orientiert nach unterschiedlichen Bildschirmauflösungen, zur besseren Übersichtlichkeit und Benutzerführung, ändern soll sind dabei Fragen die der Webdesigner sich stellt. Mit media=”screen and (max-device-width: 480px)” würde ein Stylesheet geladen werden können, das perfekt für Geräte angepasst ist, die eine maximale Breite von 480 Pixeln anzeigen können. Dies wäre z. B. typisch für die Anzeige in Smartphones/Handys.

Mit den Media Queries kann auf folgende Eigenschaften zugegriffen werden:

• width / height
• device-width / device-height
• aspect-ratio / device-aspect-ratio
• color-index / color
• orientation
• resolution
• scan
• grid

Wenn Sie sich die Frage stellen ob das für eine von Ihnen betriebene Website überhaupt notwendig ist, sollten Sie in einem ersten Schritt Ihre Besucherstatistik auswerten. Dort sehen Sie in d er Regel, mit welchen Geräten Ihre Seiten aufgerufen werde, welche Bildschirmauflösungen verwendet werden und welche Betriebssysteme bei den Nutzer zum Einsatz kommen. In den letzten Jahren sind vor Allem bei Desktop Monitoren die Auflösungen immer größer geworden - in einigen Fällen erreicht die Content-Breite sogar Werte von 1280 Pixel. Vor wenigen Jahren wurden Webseiten noch auf eine Auflösung von 800 Pixeln in der Breite optimiert. 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.

Alles ein riesen Aufwand?

Anders wie bisher, wird mit responsiven Layouts umgangen, eine eigene Version der Website für unterschiedliche Ausgaben zu erstellen. Die Entwicklung unterschiedlicher Zweige, die oftmals auch getrennt voneinander gepflegt wurden entfällt. Responsive Webdesign hingegen will sich an alle möglichen Bildschirmauflösungen und Formate so geschickt anpassen, dass die Darstellung der Inhalte, auf gleicher Basis, für unterschiedliche Anforderungen möglich ist.

Die Website wird dabei nicht auf verschiedene Endgeräte optimiert, sondern nur auf die zu erwartenden Bildschirmauflösungen. 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 komprimiert und angezeigt. So kann eine Website idealerweise für möglichst viele Bildschirmauflösungen optimiert werden, und sowohl für Desktop Monitore und Notebooks als auch für portable Endgeräte zugänglich gemacht werden. Um dieses Verhalten überhaupt erst zu ermöglichen, müssen verschiedene Einstellungen in den CSS Definitionen berücksichtigt werden. Das Verwenden fester Schriftgrößen und fester Layout-Grids sollte beispielsweise möglichst vermieden werden, da dies die dynamische Anpassbarkeit sehr einschränkt.

Webseiten mit sauberen CSS Grundlagen lassen sich oftmals mit überschaubarem Aufwand schon ein ganzes Stück in Richtung responsive Webdesign bringen. Nicht immer ist es auch notwendig, mit Umstellungen unter Zwang durchzuführen - prüfen Sie Ihre Website einfach selbst einmal auf unterschiedlichen Endgeräten und stellen Sie sich kritisch die Frage, ob die Seiten für den Nutzer bequem und mit Spaß bedienbar sind.