Responsive Webdesign – Eine Herausforderung für Webdesigner

Ein flexibler Workflow

Im Responsive Webdesign verlagern sich viele Designentscheidungen in den Entwicklungsprozess, weil sie erst dort offensichtlich werden, durch Tests auf mobilen Geräten zum Beispiel. Wir können also nicht länger mit der Entwicklung erst nach der Designphase beginnen. Um mögliche Problemstellen rechtzeitig aufzudecken, sollten wir die Entwicklung weiter nach vorne ziehen. Je eher wir mit richtigen HTML-Prototypen starten, desto eher können Schwachstellen auf verschiedenen Geräten und Bildschirmgrößen entdeckt und berücksichtigt werden. Josh Emerson von der britischen Webdesignschmiede Clearleft empfiehlt, gleich vom ersten Tag an mit dem Codieren zu beginnen, um möglichst schnell einen – wenn auch nur groben – HTML-Prototypen zur Verfügung zu haben. Damit können erste Ideen direkt getestet und entsprechendes Feedback früh an den Designer weitergeleitet werden. Statt die Design- und Entwicklungsphase getrennt voneinander zu betrachten, müssen wir diese beiden Schritte viel stärker verzahnen und als zwei Elemente einer Phase betrachten, die sich in kurzen Entwicklungszyklen wechselseitig beeinflussen.

Abb. Flexbiler Prozess: Stärkere Verzahnung von Design und Entwicklung

Flexbiler Prozess: Stärkere Verzahnung von Design und Entwicklung Designer und Entwickler sollten im ständigen Dialog miteinander stehen und sich gegenseitig Verbesserungen und Anregungen zuspielen, auf denen der jeweils andere dann aufbauen kann. Dieser Prozess wiederholt sich so lange, bis eine finale Version der Seite erreicht ist, mit denen alle Beteiligten zufrieden sind. So kann man gemeinsam im Team auf die Herausforderungen eines flexiblen Webdesigns reagieren.

Damit dieser Workflow funktionieren kann, ist es wichtig, im Vorfeld gemeinsam mit dem Auftraggeber eine Hierarchie der Inhalte zu entwickeln, anhand derer eine Reihenfolge und Gewichtung der einzelnen Elemente auf der Seite festgelegt werden kann.

Auch im späteren Prozess kann der Auftraggeber immer wieder eingebunden werden. Wird ihm dann ein HTML-Prototyp vorgelegt, kann er direkt die Vorzüge einer flexiblen Webentwicklung nachvollziehen, auch wenn das Layout noch nicht in einer finalen Version vorliegt. So vermeidet der Gestalter es, falsche Erwartungen zu wecken.

Annäherung an die Gestaltung

Photoshop & Co. müssen nicht aus dem Workflow verbannt werden. Die erstellten Entwürfe sollten aber zum einen nicht zu sehr ins Detail gehen, zum anderen nicht dem Auftraggeber als Pseudo-Endprodukt präsentiert werden. Stattdessen sollten wir sie lediglich als Ausgangspunkte nutzen, die erst anschließend im wechselseitigen Zusammenspiel mit dem Entwickler schrittweise zur finalen Webseite weiterentwickelt werden.

Um schnell mal Farbkombinationen, Texturen, Schriftstil usw. auszuprobieren, sind Grafikprogramme natürlich nach wie vor ein probates Mittel. Hier kommen die sogenannten Styletiles ins Spiel. Sie sind eine gute Möglichkeit, sich zeitsparend an eine Gestaltung anzunähern.

Abb. Beispiel einer Styletile

Statt gleich zu Beginn eines Projekts zu viel Zeit in ausgearbeitete Entwürfe zu stecken, helfen »Stiltafeln«, sich langsam an eine Gestaltungsrichtung heran zu tasten. Ähnlich wie Musterbücher und Farbfächer beim Raumausstatter kann man so die Vorlieben und Geschmäcker des Auftraggebers herausfinden und eine visuelle Sprache entwickeln, die die Eigenschaften und Ansprüche des Unternehmens unterstreicht.

Styletiles bilden sozusagen den flexiblen Gegenpart zu statischen Komplett-Entwürfen, weil sie unabhängig von Bildschirmgrößen funktionieren uns sich auf das wesentliche beschränken.

Auch ein Designsytem unterstützt in einem flexiblen Workflow Designer und Entwickler sehr. Hierbei werden wiederverwendbare Gestaltungselemente und Bausteine in einer zentralen Datei abgelegt.

Beispiel eines Designsystems

Arbeitet man an einzelnen Templates, fällt es mitunter schwer, das große Ganze im Auge zu behalten. Es kann passieren, dass man mehrere, sehr ähnliche Stile kreiert, für vergleichbare Probleme unterschiedliche Lösungen findet und Elemente auch doppelt erstellt.

Gerade im Zusammenhang mit reaktionsfähigem Webdesign könnt ihr euch viel Arbeit sparen, wenn ihr auf bestehende Elemente zurückgreift, statt jedes Template als separate Seite zu betrachten. Gemeinsamkeiten zwischen einzelnen Bausteinen herauszustellen, vereinfacht nicht nur den Designprozess, sondern hilft ebenso den Entwicklern bei der Umsetzung. Sie können sich an dieser Datei orientieren und aus den Elementen wiederverwendbare, reaktionsfähige Bausteine erstellen.

Fazit

Responsive Webdesign betrifft nicht nur Entwickler, sondern stellt auch Designer vor einige Herausforderungen, was Herangehensweise an ein Projekt und Arbeitsabläufe betrifft. Es wird sicher noch einige Zeit dauern, bis die Umstellung der Prozesse in Fleisch und Blut übergegangen ist. Die Vorteile dieser Umstellung – nicht zuletzt die gesparte Arbeitszeit – trösten aber langfristig über anfängliche Schwierigkeiten hinweg.

* * *

Verlosung

Vor wenigen Wochen ist von Christoph Zillgens das Buch „Responsive Webdesign“ im Hanser Verlag erschienen. Ein Exemplar steht im Rahmen einer Verlosung für dt-Leser bereit. Ich kann es jedem Webdesigner, der sich dem Thema Responsivität annähern möchte, sehr empfehlen. Einleitend beschreibt Christoph sehr überzeugend, warum zukünftig kein Weg an Responsive Design vorbeiführen wird. Anhand von Beispielen vermittelt das Buch Grundlagen, Websites mit Hilfe von HTML5 und CSS3 reaktionsfähig zu gestalten und umzusetzen. Christoph widmet sich dem Thema Webtypografie und er gibt zahlreiche Tipps in Bezug auf die Gestaltung von Webanwendungen für mobile Endgeräte.

Responsive Webdesign
Reaktionsfähige Websites gestalten und umsetzen
Autor: Christoph Zillgens
375 Seiten. Flexibler Einband
Komplett in Farbe
ISBN: 978-3-446-43015-0
Preis: 39,90 €

Wer das Buch gewinnen möchte, hefte bitte bis Mittwoch den 21. November einen Kommentar an diesen Artikel. Jeder Kommentar, der einen passenden Link zum Thema Responsive Design enthält (responsive Websites, Tutorials, spannender Artikel, etc.), nimmt an der Verlosung teil.