Responsive Web bzw. Adaptive Web – Darstellung, so wie Sie sie brauchen
Responsive Web (manchmal auch Adaptive Web genannt) wird wohl eines der Trend-Themen des Jahres 2012 und darüber hinaus – und das aus gutem Grund! Denn es bietet die Möglichkeit Webseiten-Design und Aufbau für alle Geräte wieder zu vereinigen, nachdem jahrelang entweder Sonderlösungen oder Optimierung auf eine Art Geräte im Vordergrund standen.
HTML5 und CSS3 erweitern die Möglichkeiten der Web-Entwickler stark. Das Problem der letzten Jahre, wodurch auch getrennte mobilen Webseiten häufig erst entstanden, sind die Vielzahlen der Bildschirmgrößen der Endnutzer einer Webseite. Von veralteten Röhrenmonitoren, über Netbooks mit ihren sehr kleinen Bildschirmen und Smartphones bis hin zu den großen Displays, wie sie Gamer verwenden, ist alles im Web vertreten – und eine Webseite muss auf all diesen Geräten gut aussehen. Kein einfaches Unterfangen, da der Unterschied mehr als die doppelte Pixelanzahl – und somit der doppelte digitale Platz sein kann. (An diesem Beispiel wird es schön verdeutlicht: Responsive Design, Responsively Illustrated, einfach mal das Browserfenster schmäler ziehen). Zusätzlich entfernen sich Smartphones immer mehr von der traditionellen Definition eines Pixels aufgrund einer höheren Pixeldichte auf gleicher physikalischen Fläche (so hat das iPhone mit Retina Display zum Beispiel pro dargestelltem Pixel zwei Hardware-Pixel, also tatsächlich vorhandene Pixel).
(Grafik übernommen von http://phone-size.com/)
Um dem Problem der unterschiedlichen Pixelgrößen zumindest am Desktop zu begegnen wurden im Laufe der Jahre viele sog. Grid-Systeme entwickelt, die Webseiten einen immer gleich breiten Aufbau geben sollten und meistens eine standardisierte Breite von 960 Pixeln aufweisen, die auf den meisten Monitoren gut dargestellt wird (so auch unsere Webseite hier). Ist die Bildschirmauflösung jedoch kleiner, so muss der Nutzer seitlich scrollen – ist er wesentlich größer, sind am Rand meistens breite einfarbige, ungenutzte Flächen dargestellt. Ein Kompromiss, der am Desktop relativ gut funktioniert, jedoch auf mobilen Endgeräten nicht ideal ist – doch lange Zeit der beste Weg war, gerade in Verbindung mit einer separaten mobilen Ansicht.
Nun ist es aber mit CSS3 möglich das Design für die Webseite aufgrund der Größe des Browser-Fensters zu verändern, d.h. je nach Größe des Displays Elemente anders anzuordnen oder zu verschieben damit sie immer genug Platz haben und der vorhandene Platz optimal ausgenutzt wird. Dies gelingt durch den Einsatz relativer Größen für die Elemente, welche bei weniger Platz also weniger Pixel einnehmen (z.B. ein Element das 50% der Breite des Displays einnehmen soll) und gesonderter Positionierungen für unterschiedlich große Displays, den sogenannten media queries (z.b. nebeneinander angeordnete Elemente am Monitor und untereinander auf einem Smartphone).
Der Vorteil hiervon ist leicht ersichtlich: Habe ich ein sehr großes Display, kann der Inhalt in mehreren Spalten nebeneinander anzeigt werden und so der gesamte Platz ausgenutzt werden. Bei kleinen Displays erscheinen die Spalten untereinander und der Inhalt nutzt die geringe Breite optimal aus. Auch können Bilder und Grafiken in jeweils optimaler Größe geliefert werden um so die geladene Dateimenge auf mobilen Geräten zu verringern und Elementen nur auf bestimmten Geräten angezeigt werden. Dadurch reagiert der Inhalt und das Aussehen also automatisch auf die Gegebenheiten des Geräts – und passt sich von selbst an.
Unterm Stich erlaubt die Kombination aus Responsive Design und media queries die Erstellung einer Webseite, die für das jeweiligen Anzeigegeräte angepasst ist ohne für jedes Gerät eine eigene Webseite erstellen zu müssen. Jedoch ist hierfür sowohl bei Designern als auch bei Webentwicklern ein Umdenken von Nöten: Von fixen Größen hin zu Designs, die perfekt de Fläche ausfüllen und somit die Notwendigkeit von getrennten mobilen Webseiten für viele Zwecke in Frage stellen. Trotz diesem benötigten Aufwands gehen wir davon aus, dass immer mehr neue Webseiten in 2012 diesen Schritt gehen werden.
Hier finden Sie Beispiele von Webseiten, die aktuell bereits auf Responsive Design setzen:
- 10 Beautiful examples of responsive Web design
- mediaqueri.es
- 24 Excellent Examples of Responsive Web Design
Das Internet ist ständiger Veränderung unterworfen und gerade in den Möglichkeiten für Webseiten gibt es Verbesserungen und damit auch neue Begrifflichkeit, welche für viele Benutzer des Internet unwichtig sind, jedoch für Entscheidungsträger beim Aufbau einer neuen Webpräsenz von immenser Wichtigkeit sein können.
Doch nicht immer ist nun bekannt, wie eine gewisse Funktion die gewünscht wird heißt – oder es werden Buzz-Words in den Anforderungen aufgenommen, die letztendlich gar nicht gemeint oder relevant sind. Damit Ihnen dies nicht passiert, erklären wir ein paar der wichtigsten aktuellen Begriffe.