Responsive Webdesign – Ein Überblick über ein beliebtes Buzzword

Overview: Was ist unter Responsive Webdesign zu verstehen?

Ein kurzer Überblick zum Verständnis des Begriffs ‘Responsive Webdesign’:

  • In der Web-Community schwirren hunderte von Buzzwords umher. ‘Responsive Webdesign’ darf wohl als eines der am häufigsten genannten gelten.

  • What the hack does it mean?
    Es geht um reaktionsfähiges Webdesign. Damit ist gemeint, dass eine nach den Vorgaben des Responsive Webdesign sich verhaltende Website sich der Umgebung, in der sie dargestellt wird, dynamisch anpasst. Die verschiedenen Umgebungen unterscheiden sich im wesentlichen hinsichtlich des Viewports, geforderter Touchscreenunterstützung und des verwendeten Browsers.

  • Warum macht man sowas?
    Das allgegenwärtige mobile Web hat den Standardanwendungsfall abgelöst → Websites werden nicht mehr nur auf dem Laptop oder Desktoprechner mit vergleichsweise grossen Displays abgerufen und benutzt. Sondern es kommen zunehmend mobile Endgeräte wie Tablets oder Smartphones zum Einsatz.
    Es müssen also die am meisten genutzten Viewportgrössen berücksichtigt werden.

  • Was sind eigentlich Viewports?
    Ein Viewport bezeichnet den zur Verfügung stehenden Ansichtsbereich. Er hängt ab vom verwendeten Endgerät, dem verwendeten Browser, usw.
    Ist ein Layout auf klassische statische Weise umgesetzt, kann es dazu führen, dass bspw. auf einem Smartphone unter Umständen mehrfach horizontal und vertikal gescrollt werden muss. Das Layout ist für diesen vergleichsweise kleinen Viewport nicht ausgelegt.

  • Die Zielgruppenorientierung hat sich geändert:
    Vor dem Einzug der mobilen Endgeräte gab es eine Kernzielgruppe: Benutzer von Laptops und Desktoprechnern. Die zur Verfügung stehenden Displaygrössen bewegten sich in einem überschaubaren Rahmen, so dass mit einem Layout ca. 95% aller Websitebesucher bedient werden konnten.
    Heute hat sich diese Kernzielgruppe aufgelöst und es müssen mehrere grosse Zielgruppen bedient werden.

  • Wie wird eine Website dynamisch?
    Gut und schön. Wie überredet man nun die Website zum Mitdenken (sie muss ja ihre Darstellungsumgebung kennen, um sich ihr anzupassen) ? Indem man sie mit HTML5 und CSS3 umsetzt. Diese Technologien bieten die notwendigen Features: Z. B. können mit Media Queries abhängig von der erkannten Displaygrösse unterschiedliche CSS-Styles angewendet werden.

    Media Query-Beispiele:

    <link type=”text/css” rel=”stylesheet” media=”only screen and (max-device-width: 480px)” href=”smartphone.css” />

    only screen and (max-device-width: 480px) {
    body {background:red;}
    }

Workflow: Wie verändern sich die Arbeitsabläufe beim Einsatz von Responsive Webdesign?

Die zu durchlaufenden Schritte für die Umsetzung einer Website nach klassischem Schema: Beauftragung → Design + Festlegung Funktionalität → Umsetzung Design + Funktionalität → Abnahme → Livestellung.
Soll eine Website nach den Vorgaben des Responsive Webdesign umgesetzt werden, ändern sich auch die Arbeitsabläufe.

  • Vorüberlegungen bei der Umsetzung:

    • Touchscreenunterstützung:
      Geeignete Gestaltungselemente verwenden (grosse Buttons, ‘antippbare’ Formularfelder, …)

    • Viewportabhängigkeit:
      Es ist schwer zu planen (praktisch so gut wie unvorhersagbar), wann ein Gestaltungselement umbricht →
      Was könnte man dennoch viewportabhängig tun: Soll-Umbrüche in Texten einplanen (Absatzbreite dynamisieren), Schwenk von horizontaler zu vertikaler Navigation (und umgekehrt), reduzierte Navigationsbeschriftungen anbieten, Darstellungsbreite von Bildern dynamisieren

    • Unterschiedliche Darstellung in verschiedenen Browsern berücksichtigen

  • Herangehensweise:

    • Ein interaktiver Prototyp dient dem Testen der Struktur und Funktionsweise. Im Gegensatz zum klassischen statischen Mockup oder Wireframe ist der Prototyp browserübergreifend benutzbar: Schrittweise wird ein Gestaltungselement nach dem anderen gestalterisch und technisch umgesetzt. Ist ein Gestaltungselement ‘fertig’, wird das nächste umgesetzt. Auf diese Weise können (Planungs- und/oder Umsetzungs-) Fehler während der Umsetzung schnell erkannt und behoben werden.

    • Keine statischen Layouts mehr. Moderne Webseiten werden abhängig vom Viewport aus geeigneten Funktionskomponenten (Buttons, Formulare, Navigationsleisten,
      etc…) montiert.

    • Mobile First → Entwicklung beginnt mit Tablet-/Smartphoneversion und wird sukzessive für die nachfolgend grösseren Displays erweitert
      Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!

  • Designentwicklung:

    • Klassisch mit Photoshop & Co:
      Strukturelemente (Header, Navigation, etc.) werden nacheinander entworfen und technisch umgesetzt (s. auch Herangehensweise: Interaktiver Prototyp)

    • Gestaltung im Browser:
      Voraussetzung: Designer übernimmt auch die technische Umsetzung.
      Mittels geeigneter Online-Tools, Plugins und der Browser-Developer-Konsole können HTML-Semantik und CSS-Styles schnell entwickelt werden

Quellen:

http://blog.kulturbanause.de/2013/06/workflow-responsive-web-design-prototyping/
http://www.designtagebuch.de/responsive-webdesign-eine-herausforderung-fuer-webdesigner/
http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/
http://bradfrostweb.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.