Was bedeutet Responsive Webdesign

Verständlich erklärt

veröffentlicht am: 24.05.13, Autor: Peter Scheel

Einfach erklärt: was bedeutet responsive webdesign

Der Begriff Responsive Webdesign hat zwar (leider) Hype-Charakter, zeigt aber auch, wo meines Erachtens die Webentwicklung hingehen muss und wird: "think global", d.h. Webseiten werden nicht mehr nur alleine für einen Desktop-PC oder das Smartphone entwickelt, sondern man muss mit etwas mehr Abstand und Weitblick an die Sache herangehen. Doch fangen wir am besten ganz vorne an:

Ergonomie

Ziel einer jeden Website sollte es sein, die Inhalte und somit das Erscheinungsbild für jeden Benutzer optimal und so ergonomisch wie möglich darzustellen. Die Darstellung und somit der Seitenaufbau hängen hierbei stark vom verwendeten Gerätetyp (Smartphone, Tablet, Laptop, Desktop-PC) und dessen Anzeige- und Navigationsmöglichkeiten ab. Die wichtigsten Kriterien sind hierbei die Auflösung (Pixel) des verwendeten Displays, als auch die Möglichkeiten die der Benutzer zur Navigation und Dateneingabe hat (Tastatur, Maus, Touchoberfläche, Fingergesten, etc. Siehe auch: Mouseover bei mobilen Geräten).

Adaptives Webdesign

Responsive Webdesign - im Deutschen wird anstelle dieser Begriffes auch häufig "adaptives Webdesign" verwendet - versucht diesem Rechnung zu tragen: Wie durch Zauberhand werden Inhalte einer Website verschoben, verkleinert, ausgeblendet, verändert, oder gar nicht mehr dargestellt - und dies abhängig vom darstellenden Endgerätetyp. Doch im Unterschied zu früher üblichen Techniken wird beim Responsive Webdesign nur eine Datenquelle benutzt. Wie kann man sich das vorstellen?

Ein vereinfachtes Beispiel

Stellen Sie sich vor, Sie wollten 3 unterschiedlich große Briefe mit gleichem Inhalt verschicken. Die Empfänger sind Herr Smartphone, Frau Tablet und Familie Desktop. Alle 3 bevorzugen unterschiedliche Briefgrößen. Herr Smartphone DIN A6, Frau Tablet DIN A5 und Familie Desktop mag es sehr groß und bevorzugt DIN A3.

Vor den Zeiten von Responsive Webdesign, wären Sie wie folgt vorgegangen: Sie hätten sich leeres weißes Papier in den Größen DIN A6, DIN A5 und DIN A3 besorgt und dann jeden Brief einzeln geschrieben. Da Sie ein wenig Wert auf gute Optik legen, haben Sie sich vorher ein wenig Gedanken gemacht um nach der Fertigstellung ein ausgeglichenes Schriftbild und wenig Weißraum zu haben. Sie haben z.B. bei Familie Desktop und ihrem DIN A3-Bogen größe Schrift gewählt, etc.

Responsive Webdesign

In Zeiten von Responsive Webdesign gehen Sie ganz anders heran: Sie schreiben den Brief einmal und kopieren ihn dann drei mal - vielleicht in DIN A4 - und zerschneiden ihn dann mit einer Schere in kleine sinnvolle Einheiten. Eventuell verkleineren, oder vergrößern Sie dann Teile, bis Sie jeweils ein stimmiges Layout für Ihren DIN A6, DIN A5 und DIN A3 erhalten. Dann hätten Sie alle 3 Briefe durch Hinzufügen der einzelenen Teile fertiggestellt, sinnvoll angeordnet und verschickt.

Das Beispiel hinkt ein wenig, zeigt Ihnen aber in etwa, was beim Responsive Webdesign passiert.

Das Beispiel zeigt Ihnen auch, dass Sie beim Responsive Webdesign einen höheren Aufwand haben, als wenn Sie nur einen Webauftritt für einen Desktop-PC designen und umsetzen. Denn es ist unbedingt notwendig, sich vorher umfangreiche Gedanken um das Layout der einzelnen Komponenten und deren Aufteilung für die Darstellung auf unterschiedlichen Endgeräten zu machen.

Der Aufwand lohnt sich dennoch, da diese Technik zukunftssicher und geräteunabhängig ist.

Selbst Testen

Wenn Sie eine ungefähre Ahnung bekommen möchten, wie sich ein adaptives Webdesign verhält, dann verändern Sie diese Webseite einmal in Ihren Browser indem Sie das Fenster in der Breite schrittweise verkleinern. Wenn Sie genau hinschauen, werden Sie sehen, dass sich teilweise die Schriftgröße, Bildgrößen ändern, der Text neu umgebrochen wird. Bei ganz schmalen Fenstern verändert sich dann auch die Navigation.

Das ist nicht alles, was Responsive Webdesign ausmacht, ermöglicht Ihnen aber einen ersten Blick hinter die Kulissen und trägt hoffentlich zu Ihrem Verständnis bei.

 

Blogverzeichnis - Blog Verzeichnis bloggerei.de Bloggeramt.de