• Facebook
  • Google+
  • Twitter
  • XING
04.05.2014

Responsives Web-Design (RWD) und Nutzererfahrung

Teams für responsives Design erstellen eine einzelne Seite, um viele Geräte zu unterstützen, aber sie müssen die Inhalte, das Design und die Performance auf allen Geräten berücksichtigen, um Usability zu gewährleisten.

Responsive Design

© tpx - Fotolia_2

 

by Amy Schade (deutsche Übersetzung) - 04.05.2014

 

Responsive Design definieren

Responsive Web-Design (RWD) ist eine Herangehensweise an die Darstellung einer Website, die dynamische Veränderungen im Erscheinungsbild einer Website kreiert, abhängig von der Bildschirmgrösse und der Ausrichtung des Gerätes, das genutzt wird, um sie anzuzeigen. RWD ist ein Ansatz für das Problem der Gestaltung für die Vielzahl von Geräten, die Kunden zur Verfügung stehen, von kleinen Handys bis hin zu grossen Desktop-Monitoren.

RWD nutzt sogenannte Breakpoints, um zu bestimmen, wie das Layout einer Seite angezeigt wird: Oberhalb dieses Breakpoints wird ein Design verwendet, unterhalb dieses Breakpoints ein anderes. Die Breakpoints basieren in der Regel auf der Breite des Browserfensters.

VIDEO

Dieses kurze Video (0:37) zeigt, wie sich die responsive Website von Transport for London verändert, wenn das Browserfenster verkleinert und vergrössert wird.

Dieselbe HMTL wird für alle Geräte verwendet, CSS (die über das Layout der Webseite entscheiden) werden verwendet, um die Darstellung der Seite zu verändern. Anstatt eine separate Website sowie die entsprechende Codebasis für Breitbild-Monitore, Desktops, Laptops, Tablets und Handys in allen Grössen zu erstellen, kann eine einzelne Codebasis Nutzer mit unterschiedlich grossen Bildbereichen unterstützen.

Im Responsive Design werden die Elemente der Seite neu angeordnet. wenn der Bildbereich vergrössert oder verkleinert wird. Ein Desktop-Design mit drei Spalten wird auf dem Tablet vielleicht in zwei Spalten angeordnet, auf einem Smartphone in einer Spalte. Das Responsive Design verlässt sich auf Raster, die sich auf der Proportion basieren, um Inhalte und Gestaltungselemente neu anzuordnen.

Während das Responsive Design als Methode entstand, um unabhängig von Gerät denselben Zugang zu Informationen zu bieten, ist es auch möglich, bestimmte Elemente - beispielsweise Hintergrundbilder, wie im Beispiel von Transport for London oben, sekundäre Inhalte oder ergänzende Navigationselemente, auf kleineren Bildschirmen zu verbergen. Entscheidungen darüber, welche Inhalte und Funktionalitäten man verbirgt, oder wie man das Erscheinungsbild für verschiedene Geräte verändert, sollte man auf Grundlage seines Wissens über die Nutzer und ihre Bedürfnisse treffen.

RWD bietet potenzielle Vorteile gegenüber der Entwicklung getrennter Seiten für verschiedene Geräte. Die Verwendung einer einzigen Codebasis kann die Entwicklung beschleunigen, im Vergleich zur Entwicklung von 3 oder 4 verschiedene Websites, und die Wartung im Laufe der Zeit einfacher machen, weil nur eine Codebasis und ein Inhalt aktualisiert werden muss, statt 3 oder 4 verschiedene Seiten. Ausserdem ist RWD relativ "Zukunftssicher" insofern, als es jederzeit neue Breakpoints unterstützen kann. Wenn ein 5-Zoll- oder 15-Zoll-Gerät auf den Markt kommt, kann der Code die neuen Geräte unterstützen. RWD fesselt das Design nicht an ein bestimmtes Gerät.

Boston Globe für Desktop

Boston Globe für Tablets und Smartphones

Der Boston Globe ist bekannt für die Verwendung eines responsiven Designs. Die Desktop-Version (oben) mit 3 Spalten verwandelt sich auf Tablets (unten links) in ein Design mit 2 Spalten und auf Mobilgeräten in ein Design mit einer einzelnen Spalte.

Weil sich diese Elemente in unterschiedlicher Grösse und Anordnung anzeigen können lassen müssen, ist es oft einfacher, ein Responsive Design in eine Website zu implementieren, das sich auf die Inhalte konzentriert anstatt auf die Funktionalität. Komplexe Daten oder Interaktionen lassen sich ggf. schlecht in modulare Bausteine einpassen, die sich leicht anders auf einer Seite anordnen lassen, wenn man zugleich Klarheit und Funktionalität erhalten will.

Nutzbare Erlebnisse schaffen

Weil Responsive Design auf die Neuanordnung von Elementen auf einer Seite reagiert, müssen Design und Entwicklung eng zusammenarbeiten, um ein gutes Nutzererlebnis auf allen Geräten zu gewährleisten. Ein Responsive Design verwandelt sich oft in ein Puzzle - wie man Elemente von grösseren Seiten so reorganisiert, dass sie auf schmalere, längere Seiten passen, und umgekehrt. Jedoch ist es nicht genug, nur zu gewährleisten, dass die Elemente auf eine Seite passen. Damit ein Responsive Design erfolgreich wird, muss das Design auch bei allen Bildschirmauflösungen und Grössen nutzbar sein.

Wenn Elemente sich auf einer Seite bewegen, kann sich die User Experience von einer Ansicht zur nächsten vollkommen ändern. Es ist wichtig, dass die Design- und Entwicklungsteams zusammenarbeiten, nicht nur, um zu bestimmen, wie die Inhalte neu angeordnet werden sollen, sondern auch zu schauen, wie das Endergebnis der Verschiebung aussieht und wie es das Nutzererlebnis beeinflusst.

Viele Teams schauen sich beliebte Frameworks für Responsive Designs an, wie beispielsweise Bootstrap, um sich beim Erstellen des Designs helfen zu lassen. Solche Vorlagen können eine gute Hilfe sein, um die Entwicklung voranzutreiben. Achten Sie jedoch darauf, wie das Framework mit Ihren Inhalten und Funktionen ihrer Site wirkt, anstatt nur zu schauen, wie es im Allgemeinen funktioniert.

Wir empfehlen immer die Durchführung von Usability-Tests für Designs. Bei Responsive Designs empfehlen wir das Testen auf allen Plattformen. Es ist schon kompliziert genug, eine Website zu gestalten, die auf einem Desktop-PC brauchbar ist. Noch komplizierter wird es, eine Website zu gestalten, die in vielen verschiedenen Anordnungen oder Konfigurationen ihrer Elemente für verschiedene Bildschirmgrössen und Ausrichtungen nutzbar ist. Dasselbe Design-Element kann einem Desktop-PC funktionieren, aber auf einem Smartphone der blanke Horror sein, oder umgekehrt.

Sich auf den Inhalt konzentrieren

Die Priorisierung des Inhalts ist ein wichtiger Aspekt, um ein gutes Responsive Design zu erzielen. Auf einem grossen Desktop-Monitor sind viel mehr Inhalte sichtbar, ohne zu scrollen, als auf einem kleinen Smartphone-Bildschirm. Wenn die Nutzer auf dem Desktop-Monitor nicht sofort das sehen, was sie wollen, können sie ihre Augen einfach über die Seite schweifen lassen, um es zu finden. Auf einem Smartphone müssen die Nutzer ggf. endlos scrollen, um die für sie interessanten Inhalte zu finden. Die Priorisierung von Inhalten auf dem Smartphone hilft den Nutzern wirksamer bei der Suche nach dem, was sie brauchen.

Die Performance berücksichtigen

Die Performance kann beim Responsive Design auch ein Problem sein. RWD bietet für alle Geräte denselben Code, unabhängig davon, ob der Code für dieses Design Anwendung findet oder nicht. Wechsel des Designs treten auf der Kundenseite auf, was bedeutet, dass alle Geräte - Telefon, Tablet und Computer - den kompletten Code für alle Geräte erhalten und sich davon nehmen, was sie brauchen.

Ein 4-Zoll-Smartphone erhält denselben Code wie ein 24-Zoll-Desktop-Monitor. Das kann die Performance auf einem Smartphone beeinträchtigen, dass vielleicht eine langsamere oder unregelmässigere Datenverbindung nutzt. (Deshalb nutzen einige Seiten inzwischen das adaptive Design, wo der Server, der die Website hostet, das Gerät erkennt, das die Anfrage stellt, und je nach Gerät verschiedene Teile vom HTML-Code liefern.)

Um wirklich die Usability eines Responsive Designs beurteilen zu können, testen Sie Ihre Responsive Designs nicht nur in der Komfortzone Ihres eigenen Büros oder Ihres eigenen Highspeed-Internetzugangs. Wagen Sie sich mit Ihrem Smartphone ins echte Leben hinaus – zwischen die grossen Gebäude einer Stadt, ins Innere von Konferenzräumen oder in Keller, in abgelegene Gebiete mit unregelmässigem Empfang, in Zonen, die dafür bekannt sind, dass die Netzwerkverbindung Ihres Handys dort schlecht ist – und finden Sie heraus, wie sich Ihre Seite unter widrigsten Bedingungen verhält. Das Ziel vieler Responsive Designs ist es, einen gleichwertigen Zugang zu Informationen zu schaffen, unabhängig vom Gerät. Ein Nutzer eines Smartphones hat kein Erlebnis, das Äquivalent zu demjenigen eines Desktop-Nutzers ist, wenn die Download-Zeiten inakzeptabel sind.

Fazit

Das Responsive Design ist ein Werkzeug, kein Allheilmittel. Die Verwendung eines Responsive Designs hat zwar viele Vorteile für das Design für mehrere Geräte, aber die Nutzung der Technik allein garantiert noch ein gutes Nutzererlebnis (genau, wie die Verwendung eines Gourmetrezeptes noch die Kreation eines grossartigen Essens garantiert). Teams müssen sich auf die Details der Inhalte, des Designs und der Performance konzentrieren, um Nutzer auf allen Geräten zu unterstützen.

Mehr über das Design für verschiedene Geräte erfahren Sie in unserem Kurs Skalierung von Nutzeroberflächen.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen