Verfasst von am 26. Juni 2014

So war’s beim Workshop „Modernes Webdesign-Photoshop und Design in the Browser“ bei der Webinale

Wir alle gehen heute mit ganz unterschiedlichen Endgeräten ins Internet: Smartphone, Tablet, Desktop-Monitor und Co. Jedes Gerät hat andere Bildschirmmaße und zeigt die Webseite daher etwas anders an. Für Teams, die Webseiten erstellen, bringt das einige Herausforderungen mit sich: Die wesentlichen Inhalte der Seite sollen natürlich immer benutzerfreundlich zugängig sein und im optimalen Layout dargestellt werden. Bei einer Ansicht auf einem Desktop-Monitor genauso, wie auf dem viel kleineren Smartphone-Bildschirm. Um das zu gewährleisten, gibt es „Responsive Webdesign“. Bei dieser Art der Webseitengestaltung passt sich die Seite der Darstellung des Devices an – sodass der User sie an seinem Endgerät optimal nutzen kann.

Gar nicht so einfach, bei so vielen verschiedenen Displaygrößen, Geräten, Browsern und individuellen Einstellungen. Die Herausforderung in der täglichen Agenturarbeit: Webseiten müssen heute anders geplant, gestaltet und technisch umgesetzt werden. Um uns zu den neuesten Ideen zu Arbeitsabläufen und Co schlauzumachen, besuchten meine Kollegin Alice und ich den Workshop „Modernes Webdesign – Photoshop und <<Design in the Browser>>“ bei der Webinale.

Dieser interessante Workshop gehalten von Jonas Hellwig (kulturbanause.de) brachte viele neue Erkenntnisse in Sachen Workflow im Response Webdesign (=RWD).

Früher: eine. Heute: viele! 

Es gibt heute also nicht mehr eine „richtige“ Ansicht einer Webseite für Desktop-Computer, die in allen Browsern gleich aussieht. Auch in der Vergangenheit existierten schon verschiedenen Monitorgrößen und Auflösungen, für die man die Webseite gestaltete, aber nicht in der Fülle, wie heutzutage. 

Die Lösung: flexibles Design, das sich der jeweiligen Displaygröße anpasst. Dieses Design sieht dann nicht mehr überall gleich aus, sondern passt sich der jeweiligen Displaygröße an. Die Größe der Bilder und Schriften, Anordnung und Darstellung einzelner Elemente wie Navigation, Spalten und Eingabemethoden ändern sich dadurch. Das ist gut so und auch gewollt. Deshalb ist die Flexibilität der Webseite wichtig, denn am Ende ist es auch für unsere Agenturkunden am wichtigsten, dass ihre User mit ihren jeweiligen Geräten ein optimales Nutzungerlebnis bei der Website haben.

Aber: Durch diese Anpassung kann die gewohnte, in viele Aufgabengebiete aufgesplitterte Arbeitsweise nicht mehr genutzt werden. Wir alle, die Webseiten umsetzen (und unsere Kunden, die sie in ihre Marketingmaßnahmen eingliedern), brauchen einen neuen, in übergreifend optimierten, flexiblen Workflow.

So arbeiten wir flexibel

Der Arbeitsablauf wird angepasst: Es wird nun nicht mehr eine Webseite in Photoshop gestaltet und dann eins zu eins technisch umgesetzt (nach der Planung und anderen Vorarbeiten), sondern es wird direkt nach der Planung ein Prototyp in HTML und CSS umgesetzt. Der Prototyp ist so etwas wie ein interaktives Mock-up und dient dazu, die Semantik, Struktur und Funktion einer Webseite zu testen.

Dieser Prototyp passt sich den einzelnen Displaygrößen bereits an und kann so auch schon auf Touch Displays getestet werden.

Nach der Korrekturphase des Prototypen wird ein Design entwickelt. Hier gibt es eine weitere Abweichung vom klassischen Workflow: Es wird im RWD (normalerweise) kein komplettes Design entwickelt, sondern es werden die einzelnen Elemente, wie Button, Header, Teaser, usw. gestaltet.

Enges Teamwork zwischen Design und Programmierung

Dadurch, dass ein funktionierender Prototyp besteht, können der Designer und auch der Auftraggeber schnell erkennen, welche Elemente angepasst gestaltet werden müssen.

Spätestens in dieser Phase des Prototyping müssen alle Beteiligten parallel eng zusammenarbeiten (oder sie sind dieselbe Person). Das passt super zum Team von KB&B, denn in unserem Team wird effektive Zusammenarbeit groß geschrieben. Und: Alice und ich sind als Web-Developerinnen prädestiniert dafür, die technische Ausarbeitung und die Gestaltung parallel vorzunehmen.

Content first, mobile first und dann design

Nach und nach werden so alle Bestandteile der Webseite gestaltet und umgesetzt und final feingeschliffen. Tadaaaa: Am Ende haben wir eine funktionale Webseite, die für alle Benutzer auf allen Geräten und Displaygrößen funktioniert und eine optimale User Experience garantiert.

 

Hier nochmal die Unterschiede der Workflows auf einen Blick:

Klassischer Workflow

Planung -> Wireframes -> Design -> Entwicklung  -> Testing -> Fertigstellung  -> Testing

 

Workflow Responsive Webdesign

Planung -> Inhalte -> Prototyp -> Testing -> Design -> Testing  -> Optimierung

 

 

Übrigens: Hier gibt es einen tollen Beitrag zum Response Webdesign und auch das pdf von Jonas Hedwig aus seinem Workshop bei der Webinale war eine spannende Quelle.