Start dt-Aktionen

Responsive Webdesign – Eine Herausforderung für Webdesigner

170

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.

Cover - Responsive WebdesignResponsive 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.

170 Kommentare

1 7 8 9
  1. Prima Artikel.
    Nachdem ich mich endlich auch mal mit diesem Thema auseinander gesetzt habe war klar, das mein Blog dringend ein neues Theme braucht.
    Gar nicht so leicht, da das richtige zu finden & dann noch alle Plugins zu überprüfen, ob diese auch responsive sind.
    Bin gespannt, was der Umstieg noch so an Hürden mit sich bringt!

    Danke auf jeden Fall für die Anregung & Gruß aus Köln
    Heike

  2. Ein wirklich toller Artikel und ein richtig gutes Buch, dass ich mir auch gerade zu Gemüte führe…

    Was meiner Meinung nach das schwerste an Responsive Webdesign ist (für mich als Designer) ist die veränderte Herangehensweise an ein Projekt zu verinnerlichen und nicht immer auf die jahrelang gelernten Methoden zurückzufallen.

    Auch die Behandlung von Bildern im Responsive Webdesign finde ich sehr schwierig, da es keine wirklich gut funktionierende Methode gibt (zumindest noch nicht). Ich hoffe, dass sich bald das picture Tag durchsetzt und dann auch schnell in den Browsern funktioniert.

    Viele Grüße aus Köln
    Marcus

  3. Um Responsive Webdesign wird man nicht mehr herumkommen. Weder als Designer, noch als Kunde. Die mobile Suche nimmt zu und der Anspruch des Besuchers ebenso.

  4. Hi, ich habe von responsive Webdesign erst vor kurzem gehört und es hat mich gleich gepackt. Der Artikel hier kommt mir gerade recht. :) Ich versuche gerade alles Mögliche an Infos über das Thema zusammen zu bekommen. Bin total begeistert, dass es noch so viele Seiten über da Thema gibt. Meine Lieblingsseite, auf der ich mich am Anfang am meisten informiert habe, ist http://www.dreiwerken.de/

    Danke für den tollen Beitrag und die vielen Links. :D

    Grüße aus dem Norden.
    Sandro

  5. Hey, schöner Artikel, macht richtig Lust sich das Buch zu kaufen & sich noch mehr mit dem Thema auseinander zu setzen.

    Ich denke Responsive Webdesign wird immer wichtiger, vorallem, wenn man Zukunftstechnologie wie Google Glass oder Apple iWatch verfolgt. Fixe Größen sind von gestern, heute muss sich alles anpassen, Evolution pur – auch im Internet. Vielleicht gibt es auch bald runde Internetfähige Geräte? Wahrscheinlich arbeitet Apple bereits an dem iBall.

    Bei so einem Thema müssen Webdesigner einfach am “Ball” bleiben. :D

  6. Eine sehr schöne Zusammenstellung der Grundlagen responsiven Webdesigns.
    Und ganz richtig: Nur Breitenänderungen reichen nicht aus: display:none; visibility:hidden –> viele Teile sollten auf kleinen Geräten ausgeblendet werden. Außerdem müssen Schriftgrößen sowie die Anordnungen der Inhalte auf dem jeweiligen Display mit viel Handarbeit angepasst werden.

    Wir haben uns darauf spezialisiert, bei Eignung vorhandene Webseiten nachträglich responsive umzuschreiben. Das lohnt sich vor allem für Betreiber umfangreicher Seiten sehr.

  7. […] Mit diesem modularen Aufbau im Hinterkopf kann der Entwurf in nur einer Größe entstehen. In der Ausarbeitung sind dann die verschiedenen Anordnungen nur noch zu überprüfen und gegebenenfalls nachzujustieren. Insgesamt konzentriert sich der Grafiker auf den grundsätzlichen Website-Charakter sowie ganz detaillierte Einzelelemente. Die Abbildung kompletter Seiten dagegen wird überflüssig. Christoph Zillgens hat den Designaspekt ausführlich im Design-Tagebuch diskutiert […]

1 7 8 9

Kommentieren


9 + 9 =

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src> <a> <blockquote>