Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
3.0.Layout    3.5.Responsive UI

3.5.Responsive UI

Responsive Web Design beschreibt das Ziel, die Darstellung einer Website anpassungsfähig für unterschiedliche Ausgabegeräte aufzubauen - und zwar mit einem übergreifenden Quellcode.

Um verschiedene Geräteklassen mit verschiedenen Auflösungen und Bildschirmgrößen möglichst optimal bedienen zu können, werden verschiedene Viewports definiert, ab einer bestimmten Größe (Fensterbreite) wird somit eine andere Media-Query innerhalb des CSS aktiviert. Wenn die zur Fensterbreite passende Media-Query aktiviert wird, kann das Aussehen der Seitenelemente angepasst werden. Neben der Größe können somit auch weitere Eigenschaften wie zum Beispiel die Farbe verändert werden. Wichtig: Im Rahmen dieses Styleguides wird die klare Empfehlung gegeben mindestens die Viewports „Desktop“ und „Smartphone“ zu bedienen. Ebenso ist darauf zu achten, dass Anwendungen durch den zunehmenden Einsatz von Tablets generell für Touch-Medien geeignet sein müssen. Generell sollen die dargestellen Inhalte für die mobile Nutzung nicht beschnitten werden. Dennoch erfolgt in der Konzeption für die Smartphone-Ansicht eine Konzentration auf das absolut Wesentliche: Was sind die wichtigsten Inhalte und Funktionen einer Seite und auf welche Elemente kann - im mobilen Anwendungsfall - verzichtet werden? Gleiches gilt für die Darstellung - auch hier liegt der Fokus auf Klarheit und Eindeutigkeit. Diesem Ansatz folgend, wird häufig vom sogenannten Content First-Paradigma gesprochen: Der Inhalt und dessen Darstellung stehen im Vordergrund. Sind sie nicht relevant für den Nutzer, verlieren sie an Bedeutung - und je nach Ansicht ggf. sogar an Sichtbarkeit. Mit Content First einher geht also immer auch eine Starke Nutzerzentrierung.

Some Image
Abbildung

Die Daimler Unternehmenswebsite auf verschieden Ausgabegeräten.