Der Workflow im Responsive Web Design – Prototyping & Co.

responsive-workflow

Die Entwicklung vom lokalen Desktop-Computer zum allgegenwärtigen „mobile Web“ zwingt uns dazu Webdesign-Projekte heute anders zu planen, zu gestalten und technisch umzusetzen als noch vor ein paar Jahren. Die schier unüberschaubare Anzahl an Displaygrößen, Geräten, Browsern und individuellen Einstellungen macht den bisherigen Workflow ineffizient, führt zu falschen Erwartungshaltungen bei Kunden und ist für langfristig angelegte Web-Projekte nicht mehr empfehlenswert. Die Anforderungen haben sich verändert und wir sollten darauf reagieren.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Der klassische Webdesign-Workflow ist ineffizient

Um zu verstehen warum der bisherige Workflow heute Schwierigkeiten bereitet, möchte ich zunächst ein exemplarisches Projekt beschreiben:

Zunächst wird die Website geplant. Die Navigation und das Gestaltungsraster werden entwickelt, die Inhalte zusammengetragen und die Ziele der Website festgelegt. Am Ende dieser Planung steht häufig ein Mockup oder Wireframe.
Anschließend wird das Layout der Website in Photoshop & Co. gestaltet. Der Kunde erhält exemplarische Unterseiten als Grafik zur Voransicht, es werden gestalterische Korrekturen vorgenommen und irgendwann ist das Design abgenommen. Dann beginnt die Programmierung. Ein Web-Entwickler setzt die Entwürfe des Designers technisch in HTML, CSS und Co. um, und stellt die fertige Website in einer Testumgebung zur Verfügung. Nun werden i. d. R. noch einmal Korrekturen eingearbeitet, anschließend ist die Website fertig und wird ins Internet geladen. Zum Schluss folgen noch einige Anpassungen die nur möglich sind, wenn die Website online ist.

Der klassische Webdesign-Workflow
Der klassische Webdesign-Workflow

Es gibt keinen typischen Viewport mehr

Der „klassische“ Workflow hat sich entwickelt, als Websites für Desktop-Computer gestaltet wurden. Zwar existierten immer schon unterschiedliche Monitore, doch es gab eine Kernzielgruppe mit einer bestimmten minimalen Bildschirmgröße. Für diese Zielgruppe und den entsprechenden Platzbedarf wurde die Website gestaltet, und es war ohne Probleme möglich, mit nur einem Layout über 95% der Website-Besucher zufrieden zu stellen.
Besucher mit einem größeren Viewport sahen einen Freiraum um die Seite, Besucher mit kleinerem Viewport mussten horizontal scrollen. Das war zu verkraften.

Verschiedene Viewport-Varianten einer nicht optimierten Website
Verschiedene Viewport-Varianten einer nicht optimierten Website

Mit dem Einzug der mobilen Endgeräte, insbesondere der Smartphones, wurde diese Kernzielgruppe aufgelöst. Heute betrachten die Besucher mit unzähligen Displays die Website. Selbst wenn man die drei häufigsten Viewport-Größen gestalterisch berücksichtigt, deckt man weit unter 50% der Besucher ab. Das ist natürlich inakzeptabel.
Aus diesem Grund bietet sich ein flexibles Design (responsive Design) an, das alle Displaygrößen berücksichtigen kann. Doch mit welchen Abmessungen gestaltet man dann das Layout in Photoshop?

Statische Layouts sind unbrauchbar geworden

Ein Mockup oder ein grafischer Entwurf in Photoshop zeigt immer die Ansicht der Website in einem bestimmten Viewport. Es ist natürlich möglich, neben der Desktop-Ansicht auch noch eine Tablet- und eine Smartphone-Version zu gestalten, doch auch diese Layouts zeigen nur eine Momentaufnahme – die Bereiche dazwischen sind nicht erkennbar.
Auch der Aufwand steht in keinem Verhältnis. Wenn dem Kunden fünf unterschiedliche Seitentypen gezeigt werden sollten, müssten mit statischen Layouts für die drei typischen Geräteklassen bereits 15 Mockups bzw. Layouts angefertigt werden! Sobald es eine Korrektur gibt, müssen alle Dateien angepasst werden.

Unzählige Mockups im Responsive Design
Unzählige Mockups im Responsive Design

Im Responsive Design ist es zudem sehr schwer zu planen, wann ein Gestaltungselement umbricht, oder ab welcher Display-Größe die Zeilenlänge des Textes verringert werden muss um eine gute Lesbarkeit zu garantieren. Bei komplexen Layouts ist es daher oft reine Glückssache wenn der Aufbau der Website am Ende tatsächlich so umgesetzt werden kann wie im Photoshop-Entwurf gezeigt.

Abgesehen davon weicht ein statischer Entwurf auch bei der detaillierten Ausarbeitung der einzelnen Elemente stark vom Endergebnis ab. Eine Website sieht nicht in allen Browsern gleich aus und muss das auch nicht. Ein statisches Design erweckt aber genau diese Erwartung und führt daher häufig zu Missverständnissen beim Kunden.

Unterschiedliche Website-Darstellung in verschiedenen Browsern am Beispiel eines Buttons
Unterschiedliche Website-Darstellung in verschiedenen Browsern am Beispiel eines Buttons

Zuletzt sei noch angemerkt, dass interaktive Elemente, Scrolling-Effekte, Animationen und die Performance mit statischen Entwürfen überhaupt nicht abgebildet werden können. Noch einmal zusammengefasst ergeben sich im klassischen Workflow also folgende Vor- und Nachteile.

Nachteile des klassischen Workflows

  • Überflüssige Arbeit (z.B. viele Layouts)
  • Falsche Erwartungshaltung beim Kunden durch statische Grafiken
  • Flexible Layouts, Interaktionen, Animation lassen sich schlecht darstellen
  • Eine fehlerhafte Planung führt zu aufwändigen Korrekturen
  • Strukturelle oder funktionelle Änderungen haben oft Auswirkungen auf das Design, das führt zu doppelten Korrekturschleifen
  • Die User Experience (z.B. die Benutzung per Touch-Screen) kann schlecht optimiert werden
  • Der klassische Workflow ist langsam, unflexibel und somit teuer

Vorteile des klassischen Workflows

  • Wir haben uns an diesen Ablauf gewöhnt
  • Ein Projekt kann linear bearbeitet werden, einzelne Abteilungen oder Mitarbeiter arbeiten nacheinander an verschiedenen Bereichen der Website
  • Der Workflow ist auch für Außenstehende leicht vorstellbar und anschaulich zu präsentieren

Responsive Webdesign Workflow

Da unzählige Mockups bzw. Layouts viel Arbeit bereiten, und dabei nicht einmal abbilden können was abgebildet werden muss, sieht der responsive Webdesign Workflow heute deutlich anders aus. Die Website wird von innen nach außen aufgebaut. Design und Code werden parallel entwickelt.

Das Internet ist in erster Linie ein Informationsmedium. Interessante und aktuelle Inhalte bilden somit das Herzstück jeder erfolgreichen Website. Das Design und die Technik dienen dazu, die Informationen bestmöglich zu präsentieren und benutzbar zu machen. Unterschiedliche Displaygrößen und Browser sollten daher hinten anstehen.
Es ist im Grunde genommen wie bei einem Buch: Es macht wenig Sinn sich schon Gedanken um die Covergestaltung und die Anzahl der Seiten zu machen, wenn noch nicht einmal der Text geschrieben wurde.

Mit Prototypen arbeiten

Damit die Inhalte der Seite unabhängig von der Situation des Besuchers immer optimal dargestellt werden, dreht man im Responsive Design den Workflow teilweise um.
Unmittelbar nach der Planung der Seite, wird mit HTML und CSS ein sog. interaktiver Protoyp entwickelt. Der Prototyp ist nicht gestaltet und dient dazu die Semantik, die Struktur und die Funktion der Website testen zu können. Man kann diesen Arbeitsschritt also als interaktives Mockup verstehen. Im Gegensatz zu statischen Mockups läuft der Prototyp im Browser und passt sich bereits an verschiedene Displaygrößen an. Er kann per Touch Screen bedient werden, reagiert auf unterschiedliche Ausrichtungen eines Geräts (z. B. Hoch- oder Querformat) und kann browserübergreifend getestet werden.

Der Prototyp durchläuft nun normalerweise diverse Korrekturschleifen. Da die Gestaltung allerdings äußerst reduziert ist, können Anpassungen schnell vorgenommen werden und haben keine Auswirkung auf das Design (was doppelte Korrekturen vermeidet).

Der Workflow im Responsive Web Design
Der Workflow im Responsive Web Design

Das Design entwickeln

Sobald der Prototyp in allen Testsituationen eine gute Figur abgibt und voll funktionsfähig ist, wird das Design entwickelt. Hierbei wird normalerweise kein vollständiges Layout mehr entworfen, sondern es werden der Reihe nach einzelne Elemente ausgewählt und gestaltet. Wenn für eine Präsentation doch ein vollständiges Layout benötigt wird, reicht i. d. R. die Ansicht einer typischen Unterseite aus.

Der Designer beginnt also beispielsweise mit der Gestaltung des Headers in Photoshop. Anhand des Prototypen kann er genau erkennen, welche Elemente flexibel gestaltet werden müssen und welche nicht. Sobald das Design des Headers fertig ist, wird die Gestaltung technisch umgesetzt und im Browser getestet. Fehler im Design werden dabei sofort erkannt und können schnell korrigiert werden. Sobald ein Element funktioniert, widmet man sich dem nächsten.

Prototyp und Design eines echten Projekts im direkten Vergleich
Prototyp und Design eines echten Projekts im direkten Vergleich

Ab diesem Zeitpunkt werden die Gestaltung und die technische Ausarbeitung der Website parallel vorangetrieben. Im Idealfall sind der Designer und der Entwickler dabei ein und dieselbe Person, denn so kann flexibel zwischen Code-Editor und Grafikprogramm gewechselt werden.
Wenn unterschiedliche Personen das Projekt bearbeiten wird der Ball immer zwischen Designer und Entwickler hin und her gespielt. Die Kommunikation zwischen den beteiligten Personen muss also exzellent sein.

Nachdem alle Bestandteile der Website gestaltet wurden, ist die Seite eigentlich auch schon fertig. Es fehlt lediglich noch ein wenig Feinschliff.

Direkt im Browser gestalten

Designer, die auch die technische Umsetzung übernehmen, gestalten häufig direkt im Browser. Das spart natürlich Zeit. Mit Hilfe von Plugins, Online-Tools und der Debug-Konsole des Browsers ist der passende CSS3-Code für die gewünschte Optik schnell erzeugt. Je nach Komplexität des Layouts entstehen nur noch einzelne Grafiken (z.B. Illustrationen) im Bildbearbeitungsprogramm. Die Website wird dann fast ausschließlich im Browser entwickelt.

Auch aus Photoshop und Illustrator (ab Illustrator CC) lässt sich mittlerweile CSS-Code exportieren. Mit dem Photoshop-Plugin CSS Hat, dass ich hier vorgestellt habe, kann der Code-Export perfektioniert werden.

Keine Seiten designen, sondern Module

Eine moderne Website besteht aus vielen verschiedenen Komponenten, die gemeinsam das Design bilden: Buttons, Formulare, Hinweis-Meldungen, Navigationsleisten etc. Alle diese Module werden gestaltet und anschließend in unterschiedlichen Zusammenstellungen auf der Website eingesetzt.

Verschiedene Komponenten einer Website: Buttons und Medieninhalte
Verschiedene Komponenten einer Website: Buttons und Medieninhalte

Ein moderner Webdesigner muss wissen, an welcher Stelle ein Element technisch abgeschlossen ist, damit er das Element so gestalten kann, dass es sich später auch flexibel einsetzen lässt. Diese modulare Vorgehensweise bei der Gestaltung ist auch anhand vieler Frameworks zu erkennen. Es gibt i. d. R. eine Vielzahl an Basis-Elementen für die verschiedenen Komponenten einer Website.

Mit der Smartphone-Ansicht beginnen

Damit das Layout auf kleinen Displays optimal dargestellt wird und zügig lädt, beginnt man heute üblicherweise mit der Smartphone-Version einer Website. Dieses Prinzip nennt man „Mobile First“.

Die Struktur und das Design werden dabei zunächst für kleine Bildschirme und schwache Systeme entwickelt. Wenn diese Ansicht optimiert ist, erweitert man die Website um größere Versionen, bis hin zur Desktop-Ansicht. Diese Vorgehensweise führt zu exzellenter Performance, funktionalen Designs und interessanten Inhalten. Allerdings erfordert sie auch ein deutliches Umdenken bei Designern und Entwicklern.

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! – Stephen Hay

Das Prinzip „Mobile First“ beschränkt sich dabei nicht nur auf das Design einer Website. Auch die Informationsarchitektur und die technische Umsetzung spielen in diesem Zusammenhang eine sehr große Rolle.

Nachteile des Responsive Web Design Workflows

  • Designer, Entwickler und Agenturen müssen umdenken
  • Designer und Entwickler müssen sehr gut zusammenarbeiten oder sind im Idealfall ein und dieselbe Person
  • Die Anforderungen an den Kunden steigen

Vorteile des Responsive Web Design Workflows

  • Das flexible Design, Animationen und Interaktionen lassen sich bereits in einer frühen Projektphase perfekt abbilden
  • Das Design und die Struktur folgt den Anforderungen des Inhalts (Form follows Function)
  • Fehler in der Konzeption werden frühzeitig (im Prototypen) erkannt und können behoben werden
  • Design und Funktion werden Anfangs getrennt bearbeitet und können sich daher nicht gegenseitig negativ beeinflussen.
  • Der responsive Workflow ist schnell – Design und Code können parallel bearbeitet werden.

Prototyping

Der moderne Workflow setzt sehr schnell auf einen funktionsfähigen Prototyp. Damit dieser Prototyp schnell entwickelt werden kann, haben sich in der jüngeren Vergangenheit sog. Frameworks, Boilerplates und Grid Systeme entwickelt. Die Grenzen zwischen diesen Hilfsmitteln verschwimmen – gemeint ist mit allen drei Begriffen eine Code-Grundlage, die Webdesigner bei der Entwicklung von interaktiven Prototypen unterstützt. Das Ziel ist, in möglichst kurzer Zeit einen Prototypen herzustellen, der auch als Grundlage für die fertige Website geeignet ist.

Die berühmtesten Vertreter solcher Frameworks sind wahrscheinlich Foundation und Bootstrap. Eine Liste aller mir bekannten Hilfsmittel findet ihr hier.

Neben Hilfsmitteln für das technische Grundgerüst existieren auch verschiedene Lösungen um Test-Inhalte in den Protoyp zu laden. Neben Platzhalter-Grafiken und Lorem-Ipsum-Texten existieren noch einige andere praktische Tools. Eine Liste habe ich euch hier zusammengestellt.

Style Tiles

Der Prototyp zeigt die Struktur, die Flexibilität und die gesamte Funktionalität der Website. Allerdings überhaupt kein Design. Es fehlt also noch ein Hilfsmittel, dass all das abbilden kann, was bisher nicht berücksichtigt wurde.
Da ein Design immer auch Strukturen abbildet, ist ein Layout schon zu viel des Guten. Die Lösung sind sog. Style Tiles. Hierbei handelt es sich um ein Hilfsmittel zur Entwicklung von Stilrichtungen für Websites.

Exemplarisches Style Tile für Facebook. Der Stil der Website ist klar erkennbar
Exemplarisches Style Tiles für Facebook. Der Stil der Website ist klar erkennbar

In einem Style Tile werden alle für den Charakter der Website relevanten grafischen Elemente zusammengefasst. Das können u.a. Schriften, Farben, Icons, Buttons etc. sein. Ziel des Style Tiles ist es, verschiedene Stilrichtungen zu entwerfen und vergleichen zu können. Hat man sich für einen Stil entschieden, muss dieser nur noch auf den voll funktionsfähigen Prototypen angewendet werden. Die Website ist dann bereits sehr weit fortgeschritten.

Fazit

Der responsive Workflow stellt Designer und Agenturen vor einige Herausforderungen. Auf der einen Seite müssen lineare Strukturen (vor allem in Agenturen) abgebaut werden, andererseits müssen Web Designer heute über ein zumindest elementares Verständnis von der Funktionsweise einer Website verfügen.
Der neue Workflow erfordert zudem ein Umdenken bei allen Beteiligten des Projekts und zwingt sie dazu, besser zusammenzuarbeiten. Um Fehler schnell zu erkennen und aufwändige Korrekturschleifen zu vermeiden, wird möglichst schnell programmiert und immer wieder getestet. Das Design rückt ans Ende des Projekts und wird modular entworfen.

Mobile First + Progressive Enhancement

Dieser Artikel hat den allgemeinen Workflow im Responsive Design beschrieben. Um die Performance und die Usability einer Website zu verbessern, bietet es sich an die Seite nach den Konzepten „mobile First“ und „Progressive Enhancement“ umzusetzen. Das Projekt wird dabei zuerst für kleine Displays und schwache Geräte entwickelt und im zweiten Schritt für größere Displays und leistungsstärkere Systeme erweitert. Die Ergebnisse sind eine optimale Performance auf allen Geräten, die unkomplizierte Wartung und Erweiterbarkeit der Website und zufriedenere Besucher. Wenn ihr mehr erfahren möchtet, lest unbedingt den Folgeartikel Mobile First + Progressive Enhancement.

Slides zum Vortrag in Bremen

Am 24. März 2014 habe ich im Rahmen der Medienplantage in Bremen einen Vortrag zum Thema »Responsive Workflow« gehalten. Die Slides zum Vortrag könnt ihr euch hier anschauen.

Präsentation öffnen

Den Inhalt des Vortrags hat hat die Hamburger Illustratorin Cornelia Koller mittels »Graphic Recording« visualisiert. Vielen Dank dafür!

Graphic Recording von Cornelia Koller
Graphic Recording von Cornelia Koller

Lesenswerte Links & Quellen

Vielen Dank an dieser Stelle auch an Julian Burford, für die Bereitstellung seines kostenlosen Storyboard Illustration Sets auf Dribble. Einige seiner Illustrationen habe ich in diesem Beitrag verwendet.