Responsive Webdesign

Teaser-Responsive_AB

Der Begriff Responsive Webdesign (oder einfach Responsive Design) ließe sich im Deutschen mit “Reagierendem Design” übersetzen – na ja, sofern man hier von übersetzen sprechen kann. Reagieren ist in diesem Kontext nicht unbedingt als Nutzerinteraktion zu verstehen. Also, nicht im Sinne von “das System reagiert flott und selbst lange Listen lassen sich flüssig scrollen” und auch nicht reagieren, wie bei Usability-und-so, beispielsweise im Sinne von “Das System reagiert nachvollziehbar. Es fiel mir leicht es zu erlernen”.

Beim Responsive Webdesign (RWD) reagiert die Anordnung visueller Oberflächenelemente (das User Interface) auf die zur Verfügung stehende Darstellungsfläche des Ausgabegerätes. Das Oberflächendesign ist nicht starr und fest vorgegeben, sondern bewegt sich in bestimmten Toleranzgrenzen.

Diese Reaktion erfolgt geplant und absichtlich. Die Bewegung ist nicht linear. Man sollte sich jetzt keine Animation oder so etwas vorstellen (obwohl es das natürlich auch hier und da gibt). Es handelt sich vielmehr um ein Umbrechen. Einzelne Layoutelemente der Webseite springen, je nach verfügbarem Platz im Browser, an unterschiedliche Positionen. Im Interaktionskonzept und Design spricht man daher auch von Break Points.

Nun will natürlich keiner ernsthaft ein hüpfendes Layout sehen. Da haben wir vor Jahren erfolgreich blinkende Banner zu Grabe getragen – und jetzt sollen plötzlich ganze Webseiten springen? So ist es zum Glück nicht. Diese Umbrüche sind im Alltag nur sichtbar, wenn man aktiv am Browser zieht und zerrt und so die verfügbare Darstellungsfläche ändert.

In der Praxis bekommt der Nutzer nichts davon mit. Die Webseite sieht im Desktop Browser eben auf die eine Art und auf dem Handy im Mobile Browser auf eine andere Art aus. Unterschiedlich, aber immer gut.

Das hört sich banal an. Responsive Design hat aber weitreichende Auswirkungen auf die einer Website zugrundeliegende Technik, das Design, das Interaktionskonzept, Abstimmungsrunden mit Kunden, Tests, Qualitätssicherung und somit letztendlich auf die gesamte User Experience.

User Interface (UI) Elemente sind zum Beispiel die Hauptnavigation, Unternavigationen, Bildelemente, Teaser, die Suche oder irgendwelche hübschen Infoboxen. Die zur Verfügung stehende Fläche im Browser wird zum Großteil von dem Ausgabegerät bestimmt. Es geht also um die Fragen: Betrachtet ein Nutzer einen bestimmten Inhalt (beispielsweise eine Produkt Galerie einer eCommerce Webseite) auf einem großen Bildschirm oder auf einem Smartphone? Wird der Inhalt auf einem Fernseher, einer Armbanduhr oder einem In-Car Infosystem ausgegeben? Nutzt der Anwender seinen Browser im Vollbildmodus oder in einer schmalen Portrait Ansicht? Und vor allem: in welchem Ausgabekontext benötigt der Anwender welche Inhalte?

Früher, ja früher

Früher hat man im Webdesign den Ansatz verfolgt, Inhalte für jeweilige Ausgabegeräte passend zurechtzuzimmern. Eine Webseite wurde für die Breite 800 Pixel mal 600 Pixel “optimiert” und als sich dann einige Jahre später größere Bildschirme durchsetzten, wurde die Seite überarbeitet und auf 1024 Pixel mal 768 Pixel angepasst.

Wenn damals die Anforderung kam, Inhalte sollten möglichst auch auf Handys angezeigt werden können (damals waren Handys noch keine “Smartphones”, sondern wie wir heute sagen “Featurephones”) hat man argumentiert, dass man selbstverständlich unmöglich den gesamten Inhalt auf so kleinen Displays wiedergeben kann und dass der Nutzer so etwas ja auch gar nicht möchte. Also mussten Abstriche gemacht werden. Eine mobile Seite war damals eben nur eine abgespeckte Version der echten, saftigen, verführerischen Web-Vollversion.

Das war die gute, alte Zeit des fixed layout.

Fixed Layout

Bei einem fixen Layout wird einer Webseite eine ganz bestimmte und mehr oder weniger unveränderbare Breite gegeben. Diese Breite ist im “Code” der Seite definiert. Alle Elemente innerhalb dieser Webseite sind ebenfalls solide festgezurrt – wie Baustoffe auf einem Sattelschlepper. Alles sitzt, passt und hat Luft – wackelt aber nicht.

Wenn nun der Nutzer auf die Idee kommt (meine Güte, wir wissen doch alle wie verrückt diese Nutzer manchmal sind!) seinen Browser kleiner zu ziehen, bleibt die im fixen Layout gestaltet Webseite davon unbeeindruckt. Es gibt horizontale Scrollbalken und Teile der Webseite werden nicht mehr angezeigt. Das ist natürlich unschön.

Und auch wenn ich noch nie einen User habe sagen hören “Oh mein Gott, horizontale Scrollbalken? Ich glaube mir wird schwindelig!” – so gilt so eine Darstellung doch gemeinhin als suboptimal. Experten sprechen sogar von Dasistabernichtgerade-Usability-oder?

Ein fixes Design hat den Vorteil, dass unter definierten Umständen (Browser, Betriebssystem, Auflösung) eine Webseite genau so aussehen kann, wie sie gestaltet und mit Kunden abgestimmt worden ist. Da kann der Herr Designer vorgeben, “genau hier erscheint ein Pfeilchen-Symbol und diese Box da unten ist 12 Pixel über dem ersten Bildelement – und macht das ja ordentlich, weil ich messe das genau nach!” Und der Herr Entscheider kann beim Debriefing berichten “… und dann zeigt mir meine Mutter ihren Laptop den ich ihr zu Weihnachten geschenkt habe, und da ist unsere neue Webseite drauf und sie sagt, ‘Du Herbert, das ist doch Deine Firma hier, oder?’. Ich schaue drauf und die Seite sieht genau gleich aus wie auf meinem Laptop – obwohl meine Mutter ja gar nicht diesen modernen Fox-Browser benutzt!”

Vorteil von fixem Layout ist, dass es oft einfacher zu erstellen ist. Designer und Entwickler haben viel Kontrolle über das Endergebnis. Es ist leichter zu testen und wird von allen modernen Browsern gleichermaßen gut dargestellt.

Der Nachteil ist, dass diese definierten Umstände recht kurzlebig sind. Sobald Ausgabegeräte populär werden, die zu Baubeginn der Webseite nicht bedacht worden sind – oder noch gar nicht existierten – kann es zu ungewollten Effekten kommen. Das können die bereits erwähnten horizontalen Scrollbalken oder zu klein skalierte Texte sein. Oder, oder, oder…

Fluid Layout

Bei fließenden Layouts (im Englischen fluid- oder liquid Layout genannt) orientiert sich die Breite einer dargestellten Webseite auch an der Breite des Browserfensters. Allerdings ist die Seite so programmiert, dass ein und dasselbe Design beibehalten wird – zumindest in Bezug auf relative Proportionen und Positionen einzelner UI Elemente zueinander.

Um bei dem obigen Beispiel zu bleiben, sind beim fließenden Layout User Interface Elemente zwar auch festgezurrt – die Baustoffe auf diesem Sattelschlepper sind aber eher weich und gummiartig und lassen sich mehr oder weniger gut zusammendrücken oder auseinanderziehen – immer unter Beibehaltung der Gesamtstruktur.

Ein bekanntes Beispiel für Fluid Layout ist das Fluid 960 Grid System. Schiebt man den Browser zusammen oder zieht ihn auseinander, so kann man sehen, wie sich Inhalte auf der Webseite fließend (gummiartig) anpassen.

Dieses Fließen funktioniert in gewissen Tolleranzbereichen technisch recht gut. Die Webseite hat eine immer gleiche Anmutung. Man könnte sagen, die Wiedererkennung ist hoch. Es gibt keine horizontalen Scrollbalken.

Gerade auf mobilen Endgeräten stößt Fluid Layout aber oft an seine Grenzen. Eine extreme Stauchung der Webseite führt zu sehr unschönen, schmalen Spalten, ungewollten Überlappungen konkurrierender UI Elemente und zu einer geringen Gebrauchstauglichkeit und Attraktivität.

Auf besonders breiten Monitoren und Webseiten im Vollbildmodus kann fließendes Layout wiederum dazu führen, das visuelle Blöcke der Webseite in eine Breite gezogen werden, für die sie niemals konzipiert oder gestaltet worden sind. Auch nicht gerade etwas, das dem anspruchsvollen Nutzer-Auge schmeicheln würde.

Also, kurzum: Fluid Layout war mal eine Zeitlang interessant und hip – hat aber ebenfalls den Webdesign Zenit überschritten und wird heute nicht mehr favorisiert.

Responsive Webdesign

Im Responsive Webdesign (RWD) versucht man nun aus Vergangenem zu lernen. Im Hintergrund werkelt auch hier ein fließendes Rastersystem – wie beim liquid Layout – es gibt aber zusätzlich die bereits erwähnten Break Points. Diese wiederum sind fix.

Break Points definieren in Pixeln (px) die Breite und das Layout einer Webseite und orientieren sich an der verfügbaren Fläche des Ausgabegerätes. Populäre Break Points sind beispielsweise 320px (Smartphone Portraitmodus) und 480px (Smartphone Landscape) und 768px (Tablet Portrait) und 1028px (Tablet Landscape) und so weiter.

Man sieht schon: es gibt eine ganze Menge von diesen Sollbruchstellen. Entsprechend lautet auch eine RWD-Empfehlung nicht alle theoretisch möglichen Break Points zu berücksichtigen, sondern gezielt die zu beachten, die im Kontext des jeweiligen Projekts eben sinnvoll sind. Ach ja und: testen, testen, testen.

Responsive Webdesign ist eine moderne Form des Webdesign. Das heißt nicht unbedingt, dass in jedem Projekt eine flexible Webseite erstellt werden muss. Vorteile und Aufwände gilt es gemeinsam abzuwägen. Wie immer haben Zeit und Budget, Sinn und Zweck, Stakeholder und Anwender(*) ein gewichtiges Wörtchen mitzusprechen.

(*Anmerkung: Ja, ich weiß, dass Nutzer auch Stakeholder sein können. Schließlich habe ich ja auch mal einen Artikel darüber geschrieben.)

FacebooktumblrTwitterPinterestEmailGoogle+LinkedIn

Jan Jursa

Status: "Ich brauch Kaffee."

Letzte Artikel von Jan Jursa (Alle anzeigen)