Responsive-Webdesign-Workflow

17. Mai 2013

Durch mein aktuelles Projekt – die Umstellung einer e-Commerce- und Community-Website auf responsives Design (RWD) – konnte ich weitere Erfahrungen sammeln, welcher Arbeitsprozess und welche Werkzeuge hier nötig sind. Ist eine Website nach den Prinzipen des Responsive Webdesign erstellt, ist sie auf allen Geräten, vom Smartphone über Tablet-PC bis zu Desktop-PC mit großen Bildschirmen ideal nutzbar. Separate Versionen für verschiedene Geräte oder Geräteklassen werden hierbei nicht erstellt, vielmehr wird die Website so flexibel gestaltet, dass Sie unabhängig vom Ausgabemedium perfekt dargestellt wird. Die Veränderungen des Entwicklungs- und Design-Prozesses derlei Websites im Vergleich zu Websites mit statischem Layout, wie sie die letzten Jahre üblicherweise produziert wurden, könnten nicht größer sein. Auch die Rolle des Designers wird neu definiert.

Agiler Prozess

Designer- und Entwickler müssen parallel – am besten im gleichen Raum – am Projekt arbeiten, das klassische Wasserfall-Modell hat ausgedient. Trotz sorgfältiger Vorarbeit tauchen erst bei der Umsetzung des Entwurfs Fragen auf, die unmittelbare Zusammenarbeit von Design und Technik erfordern. Das ist unvermeidbar, man sollte vielmehr dieses Phänomen bewusst fördern und einkalkulieren. Trotz aller Parallelität ist man gut beraten, dem Designer einen zeitlichen »Vorsprung« zu gewähren.

Dokumentationen ade

Bis heute ist es üblich, dass Webdesigner nach Erstellung der Photoshop-Seitenlayouts diese in einem umfangreichen PDF platzieren, beschriften, vermaßen und Interaktivität beschreiben. Das führt zu hohem Arbeitsaufwand für Designer und zu mühsam zu entschlüsselnden Dokumenten für Entwickler. Kurzfristige Änderungen bei der Umsetzung führen zu abermaliger Aktualisierung der Dokumentation. Zeitraubende, bürokratische Arbeit.

Photoshop alleine reicht nicht

Als Designer ist man gefordert, verschiedene Tools und Techniken parallel zu nutzen, um ein flexibles Interaktions- und Layoutsystem zu erstellen. Ich nutze:

• Papier und Stift für schnelle Wireframes
• Adobe Photoshop für die Erstellung von Style Tiles und die Produktion von Assets/Sprites
• Axure RP für Interaktionsskizzen, also zum Gestalten von Use-Flows unter Vermeidung statischer Wireframes (Rapid Prototyping). Diese Prototypen lassen sich anschließend auch für Usertests verwenden.
• HTML und CSS zur Gestaltung des flexiblen Layoutsystems. So können das Verhalten der einzelnen Elemente bei Veränderung des Viewports sowie die Breakpoints – also die Schwellenwerte für diese Layoutänderungen – definiert werden. Ein Framework wie Bootstrap oder Zurb Foundation kann hier als Basis dienen. Darüberhinaus können vom Designer Schriftstile als CSS-Klassen definiert und bereits in verschiedenen Viewports/Browsern/Geräten getestet werden. Durch den Einsatz von CSS können auch Objektstile (Klassen mit Farb-/Outline-/Text-…Definitionen) für z.B. das Aussehen von Buttons gestaltet werden. So wird dem Entwickler das »Nachbauen« von Photoshop-Effekten erspart und der Einsatz von Hintergrundbildern (Ladezeit!) minimiert. Darüberhinaus profitiert man bereits in der Entwurfsphase von einer realistischen Darstellung (Rendering) im Browser, insbesondere bei der Darstellung von Text.

Designer »programmieren«

Designer aller Disziplinen mussten schon immer um Produktionstechniken und Materialien Bescheid wissen, um für die Produktion ihrer Entwürfe adäquat gestalten zu können. Wichtiger denn je ist es heute für Webdesigner, profunde Kenntnisse in Webtechnologien zu besitzen, um technisch umsetzbare Lösungen zu entwickeln und die Möglichkeiten neuer Technologien voll ausschöpfen zu können. Wie erwähnt gehört das Gestalten im Browser nun auch zu den Aufgaben des Designers.

Teilen = Transparenz

Gerade in multidisziplinären Teams ist Transparenz ein wichtiges Mittel um Verständnis für die eigenen Ideen zu schaffen und alle in Kenntnis zu setzen, wie der Projektfortschritt ist. Daher muss der eigene Arbeitsprozess offen und zugänglich für alle Beteiligten sein. Ich nutze aktuell geteilte Ordner in Dropbox, Tabellen in GoogleDrive, Skype-Chat. Denkbar ist auch der Einsatz von Diensten wie Basecamp oder das Pflegen eines Wikis. Entscheidend ist, dass für jeden das Angebot steht, sich über den Fortschritt des Anderen zu informieren.

Deliverables

Die Frage, was konkret der Designer dem Entwickler in die Hand gibt, damit dieser das Projekt eigenständig umsetzen kann, ist schon falsch formuliert. Bei Responsive-Design-Projekten ist enge Zusammenarbeit ein Muss. Dennoch gibt es Deliverables, also Dokumente, welche die Ideen des Designers dem Entwickler verständlich machen und zur Diskussion anregen. Wichtig ist, dass es nicht mehr ein »finales« Dokument gibt, sondern im Laufe des Prozesses mehrere »Pakete« und Updates an bestehenden Dokumenten erstellt werden. Darüberhinaus muss es Dokumente verschiedener Art geben, z.B. Listen, Sitemaps, Interaktionsprototypen, responsive Layoutentwürfe. Einen voll funktionalen und durchgestalteten Prototyp zu Erstellen kann der Designer nicht leisten und das ist auch gar nicht notwendig.

Fazit

Ich bin gespannt, ob sich für Responsive-Webdesign-Projekte künftig ein einigermaßen standardisierter Prozess etablieren wird. Sicher ist, dass die Zusammenarbeit mit Entwicklern ganz unmittelbar und parallel stattfinden muss. Es gibt immernoch Agenturen, welche die Entwicklung nach Erstellung der Designs außer Haus geben. Das wird künftig bei derlei Projekten kaum mehr möglich sein.