Responsive Webdesign Workflow

Webseiten verhalten sich anders als Seiten aus Papier. Eine Zeitungsseite hat eine feste Größe und ändert sich nicht. Beim Responsive Webdesign (RWD) reagiert das Layout auf den zur Verfügung stehenden Platz. RWD lässt sich daher nur unvollkommen mit statischen Photoshop Screens beschreiben. Wie können wir den Workflow bei Konzeption und Design auch unter ökonomischen Gesichtspunkten optimieren?

Der klassische Workflow

Bei klassischen Webprojekten mit festem Layout werden in der Konzeption und Design die jeweiligen Seitentypen einer Website detailliert beschrieben. Der Produktions-Prozess folgt häufig dem Wasserfall-Modell (hier am Beispiel eines typischen Workflows in einer großen Internet-Agentur):

Klassischer Workflow nach dem Wasserfallmodell

Schaubild des Wasserfallmodells

Beim Wasserfallmodell werden die Prozesse sequenziell durchlaufen. "Rückläufer" aufgrund von Bugs oder geänderten Anforderungen führen zu einem höherem Aufwand als ursprünglich geplant. Die Marge sinkt bei Festpreisangeboten.

Flexible Layouts erfordern einen flexiblen Workflow

Bei anpassungsfähigen Websites potenziert sich der Aufwand für Konzept und Design in Abhängigkeit der Breakpoints und Viewports. Die Vorgehensweise nach dem klassischen Wasserfallmodell stößt insbesondere beim Responsive Webdesign (RWD) an Grenzen. Hier gilt es, einen optimierten Workflow zu etablieren um auch unter ökonomischen Gesichtspunkten das Ziel zu erreichen:

Responsive Webdesign Workflow

Schaubild des RWD Workflows

Beispiel eines Workflows für Responsive Webdesign. Wird das Layout direkt im HTML-Prototypen designt, kann auf zahlreiche Photoshop-Screens (B) verzichtet werden, wobei sich der gesamte Prozess verschlankt.

Bei klassischen Webprojekten mit fixem Layout erfolgt die Umsetzung in HTML erst nach Abnahme von Konzept und Design. Beim RWD empfiehlt es sich hingegen, so früh wie möglich mit der Erstellung des HTML-Prototypen zu beginnen (C) und diesen statt statischer Photoshop-Screens zu präsentieren.

Moodboards und Style Tiles

Im Vorfeld dienen Moodboards und Style Tiles dem Finden einer visuellen Stilrichtung. Sie ersetzen in der Designphase zahlreiche Screens und dienen damit auch der Kostensenkung. Sie erfordern jedoch beim Kunden ein erhöhtes Abstraktionsvermögen. Ist dieses nicht gegeben, ist es dennoch vorteilhaft, intern nach dem skizzierten RWD-Workflow vorzugehen. Die Screens für die Kundenpräsentationen können vom Prototypen angefertigt werden.

Feinkonzept & Wireframes

Je nach Anforderung, Budget, Kunde und Team kann auch der aufwändigere Weg über (A) und (B) gewählt werden. Insbesondere bei komplexeren Web-Projekten ist eine Konzeption (A) mit Wireframes und einem entsprechenden Feinkonzept sehr empfehlenswert. Aus dem Schaubild geht der damit einhergehende höhere Aufwand deutlich hervor.

Backend

Ein Vergleich der beiden Schaubilder zeigt: Das Backend bleibt vom geänderten RWD-Workflow weitgehend unberührt.

Anforderungsprofile ändern sich

Die Anforderungsprofile der Teammitglieder ändern sich - insbesondere das des Designers. Früher war Webdesign auch ohne HTML/CSS-Kenntnisse nur mit Photoshop möglich. Beim RWD ist es hingegen vorteilhaft, wenn der Designer das Layout direkt im Browser mit HTML5/CSS3 umsetzen kann. Natürlich wird er von dem Frontendler tatkräftig unterstützt. Positiver Nebeneffekt: Es kann nichts designt werden, was sich später nur schwer und damit kostenintensiv umsetzen lässt.

Die gesteigerte Komplexität und die geänderten Anforderungen bei anpassungsfähigen Websites erfordern auch im Projektmanagement ein hohes technisches Verständnis, damit der Kunde kompetent beraten und die Prozessabläufe optimal gestaltet werden können.

Fazit

Responsive Webdesign lebt vom Austausch aller Beteiligten. Feedback und Teamwork sind stärker gefragt als bei dem Vorgehen nach dem Wasserfallmodell .