Responsive Webdesign – Nutzerfreundlichkeit

Responsive Webdesign

Responsive Webdesign

Bei dem Responsive Webdesign handelt es sich um ein technisches und gestalterisches Paradigma (Muster oder auch Beispiel) zum Aufbau von Webseiten. Es wird in Deutschland auch Responsives Webedesign genannt und hat sich aus dem englischen Begriff Responsive für reagierend abgeleitet.

Damit diese auf die Eigenschaften des jeweils verwendeten Endgerätes, besonders Tabletcomputer und Smartphones, reagieren können. Der Aufbau der Grafik einer Responsiven Webseite erfolgt aufgrund der Anforderungen des jeweiligen Gerätes mit dem die Internetseite angesehen wird. Dies betrifft ganz besonders die Anordnung und die Darstellung von einzelnen Elemente, wie zum Beispiel Navigation, Texte und Seitenspalten, jedoch auch die Verwendung verschiedener Eingabemethoden von der Maus (überfahren, klicken) oder das Touchscreen (wischen, tippen).

Die technische Grundlage dafür sind die neueren Webstandards HTML5, JavaScript und CSS3.

Gestaltung von Responsive Webdesign

Die Auflösung und Größe von Displays auf Desktop-PCs, Smartphones, Tablets, Laptops, Fernsehgeräten und E-Book-Readern können sehr häufig variieren. Das ist der Grund, warum das Erscheinungsbild und die Bedienung einer Webseite stark abhängig sind vom Endgerät. Für die Grafiker liegt eine Anforderung in der konzeptionellen Abtrennung zum herkömmlichen Printdesign: Wo es früher einmal gelernt war und noch gewohnt war, dass das Ausgabemedium eine genaue und unveränderbare Größe hatte, muss jetzt hingenommen werden, dass die starren Gestaltungen für eine Webseite alles andere als mehr übertragbar sind.

Die Webseiten, die mit einem reaktionsfähigen Design ausgestattet sind, beachten die verschiedenen Anforderungen der Endgeräte. Das Ziel dieser Vorgehensweise ist es, dass die Webseiten ihre Darstellung so anpassen, dass diese sich jedem Betrachter so übersichtlich und benutzerfreundlich wie möglich präsentieren zu können. Das Kriterium für das entsprechende Erscheinungsbild sind neben der Größe des Anzeigegerätes, wie zum Beispiel verfügbare Eingabemethoden (Maus, Touchscreen) oder die Bandbreite der Verbindung zum Internet.

Besonders die Blockelemente müssen verschiedentlich behandelt werden. Wenn das Gestaltungsraster mehrere Spalten nutzt, so können diese wechselhaft an die Breite des jeweiligen Viewports angepasst werden. Bei kleinen Auflösungen, falls eine Darstellung nebeneinander alles andere als mehr passt, untereinander verschoben oder auch alternativ positioniert werden.

Die Bilder sollten maximal auf ihr umgebendes Element, aber generell nicht über ihr native Größe, skaliert werden. Die Texturen für die Hintergründe können versteckt überfließen. Die Hintergründe mit dem Motiv werden bei kleinen Darstellungen zudem weggelassen. Die Logos können wie auch die Bilder verkleinert oder bei großen und detailreichen Grafiken durch ein kleines Signet ersetzt werden. Die vertikale Menüleisten benötigen häufig viel Breite und können als Liste um positioniert, auch eingeklappt und erst auf Scrollposition oder Klick eingeblendet werden. Das Element als Text darf nur wenig kleiner skaliert werden, um die Lesbarkeit zu erhalten. Da der Text jedoch automatisch umbricht, ist eine besondere Anpassung nicht nötig.

Abtrennung zur mobilen Webseite

Der große Unterschied zwischen einer mobilen Webseite und einem Responsive Design besteht in der Zahl der Templates. Aus geschichtlicher Sicht bildet die Desktop-Version die normale Ansicht der Webseite. Dieser wird nach der üblichen Methode ein zusätzliches, unabhängiges Template für mobile Endgeräte hinzugefügt.

Beim Responsive Webdesign wird lediglich eine einzige Version der Webseite aufgebaut. Diese passt sich von alleine der verfügbaren Umgebung an. Vor allem sichtbar wird dies bei dem Layout, das sich nach der Breite des Browser-Fenster entsprechend verändert. Die Entscheidung für ein solches reagierendes Webdesign oder lediglich ein separates mobiles Template hängen vom Zweck und Sinn der Webseite ab.

Unser Tipp: Besonders die langen Ladezeiten von Webseiten ist ein großes Thema beim Responsive Webdesign. Weil auf mobilen Geräten zu viele integrierte Bilder oder Scripts zu einem sehr langsamen Hochladen der Webseite in den Browser führen. Es ist wichtig, dass alle Dateien so klein wie möglich sind und diese abzuspeichern.

Fazit: Das Responsive Webdesign ist wichtig für den Aufbau und die Gestaltung einer Webseite. Wichtig ist das die Webseite auf allen mobilen Endgeräten, wie Tablets oder Smartphones erreichbar ist und gut lesbar. Die Bilder und der Text muss angepasst werden auf die verschiedene Geräte, wie Desktop PCs oder Tablets. Die Anzahl der Templates ist ein wesentlicher Unterschied beim Responsive Design und den mobilen Webseiten.

Was hältst Du vom dieser Art Design? Was ist Dir bei der Benutzerfreundlichkeit von Webseiten am wichtigsten?

Lese Dir gerne auch den Artikel mobile Website zu diesem Thema durch.