Responsive Webdesign Workflow – Sechs Praxistipps

statement  B

Websiten reaktionsfähig umzusetzen war der große Trend 2011. Im letzten Jahr kristallisierten sich Ansätze „Mobile-First“ & „Content first“ so stark heraus, dass man immer mehr Websiten sieht, die überwiegend auf den Zugriff von Tablets und Smartphones optimiert sind. Macht ja auch Sinn.

Das Konsumverhalten der User wird immer mehr über die mobilen Endgeräte bestimmt. Tendenz steigend. Produkte, Services und Infos schnell und einfach über’s Smartphone zu beziehen oder sich intensiv und inspirierend damit auf dem Tablet oder Desktop zu beschäftigen, freut nicht nur die Kundschaft sondern auch die Unternehmen.

Daher ist auch klar, dass sich Responsive Webdesign gerade vom Trend zum Standard entwickelt. Eine Responsive Seite zu machen, ist ein Qualitätsmerkmal geworden. Doch einen Haken hat die Sache: der Aufwand ist sehr viel intensiver und damit auch teurer. Ich schätze 25 bis 50 Prozent an Kosten müssen Kunden, die eine Responsive Seite haben wollen, mehr hinlegen.

Gerade bei Großagenturen mit Großkunden können das immense Kosten sein. Die Arbeitsprozesse müssen deshalb optimiert werden, um dem entgegen zu wirken. Hat man bisher meist eine Sitemap und drei Designvorschläge mit dem typischen Responsive-Vorschau-Chart (MacBook, iPad, iPhone-Ansichten) präsentiert und sich ewig mit Geschmacksfragen herumgeschlagen, sollte man heute zuerst nur über Inhalt und Funktion diskutieren (ja, das sage sogar ich als Designer).

Hier meine Tipps für einen effizienten Workflow eines Responsive Design Projekts:

Tipp 1: Alle an einen Tisch

Ein dynamisches Projekt braucht ein dynamisches Team. Der Arbeitsprozess sollte von Anfang an interdisziplinär geführt werden. Konzept, Design und Programmierung müssen von Anfang an einen Tisch und alle Steps gemeinsam besprechen und erarbeiten. Der alte Prozess, nämlich jede Disziplin arbeitet nacheinander ihre Aufgaben ab, führt  – wenn überhaupt – zu einem mittelmäßigen Ergebnis, dass unglaublich zeit-, nerven- und kostenintensiv sein wird. Wichtig ist, dass man sich gemeinsam auf Herausforderungen einstellt, egal ob allgemein oder innerhalb von Einzeldisziplinen.

Tipp 2: Erstmal einen Plan machen

Idealerweise beginnt man mit den Wireframes. Es gibt genug gute Tools, wie zum Beispiel Axure, Balsamiq oder Fireworks, um schnell und einfach Skizzen zu machen und sie genauso schnell und einfach wieder zu ändern oder anzupassen. Man kann sogar dort schon Verknüpfungen und Links so simulieren, dass frühzeitig Fehler in Konzept und Struktur gefunden werden können. Auch hier ist der Ansatz „Mobile first“ eine Grundvoraussetzung für die Prozess-Optimierung in Konzeption und Design. Man muss also mit dem Minimum an Information & Funktion für die leistungsschwächsten und kleinsten Geräte beginnen und danach Stück für Stück um die stärkeren und größeren Geräte erweitern.

Tipp 3: Ab in den Browser – Prototyping

Sind die Wireframes freigegeben, gibt es jetzt mindestens eine Mobile- und eine umfangreichere Desktop-Variante der Website, der ideale Zeitpunkt, um den ersten HTML-Prototyp zu programmieren und zu testen, wie sich das Responsive Design verhalten soll. Das bringt gleich einen weiteren Vorteil mit sich: die Vorstellungskraft gegenüber statischen Screenshots wird nicht überstrapaziert, sondern man erlebt von Anfang an live die Interaktion im Browser. Vor allem für den Kunden, der sich nicht tagtäglich mit diesen Themen auseinandersetzen muss, ist das eine große Hilfe.

 Tipp 4: Design – vorerst – nur mit dem Moodboard zum Kunden

Das Design sollte parallel als Moodboard oder Styletiles vorgestellt werden. Für Kunde und Designer ist es hier viel einfacher und effizienter, wenn man sich schrittweise über Grafikstil und Bildwelt abstimmt. Erst wenn man sich für einen Stil entschieden hat, sollte die Detailausarbeitung beginnen und in den Prototyp einfließen. Damit hat man sich auch die Runde gespart festzustellen, dass das freigegebene Design vom statischen Layout im Prototyp gar nicht funktioniert.

Als Analogie verwende ich hier gern den Bau eines Hauses: Der Grundriss wird für sich allein erstellt und nicht gleichzeitig mit Wandfarbe und Eichenparkett skizziert.

Tipp 5: Breakingpoints nach Inhalt setzen und nicht nach Endgeräten

Der nächste wichtige Punkt sind die sogenannten Breakingpoints, also die Stellen, an denen sich das Layout verändern soll. Bisher war die gängige Methode, sich an den Auflösungen der am stärksten frequentierten Geräte zu orientieren. Also geht man her und arbeitet diese listenweise ab. Das folgende Beispiel zeigt nur einen Bruchteil dessen, was heute berücksichtigt werden kann:

  • 320 Pixel (iPhone Hochformat)
  • 480 Pixel (iPhone Querformat)
  • 649 (Kleines Tablet Querformat)
  • 768 Pixel (iPad Hochformat)
  • 1024 Pixel (iPad Querformat)
  • 1200 Pixel (Laptop)
  • 1600 Pixel (Mega-Displays und TV)

Aber eigentlich ist das sinnlos, wo doch ständig neue Geräte mit neuen Auflösungen an den Markt kommen. Auch hier: Tendenz steigend. Da kommt der Ansatz von Thierry Koblenz „Device Agnostic to Responsive Design„wie gerufen. Man orientiert sich also nicht mehr an Auflösungen sondern an den Inhalten.

Um’s kurz zu machen: die Inhalte und das Layout geben vor, ab wann Breakingpoints gesetzt werden müssen. Dazu benutzt man die rechte untere Ecke seines Browserfensters und schiebt das Fenster zusammen. Irgendwann kommt der Punkt, an dem das Layout nicht mehr funktioniert, Schriften nicht mehr lesbar sind, Spalten zu eng werden … Und da wäre der erste Breakingpoint.

Diese Arbeitsweise ist noch relativ neu, doch sie klingt vielversprechend und sollte unbedingt verfolgt werden. Die gängigen Displaygrößen sollten nur noch zur groben Orientierung dienen. Mit dem prima Tool responsivepx von Remy Sharp kann man die Breakingpoints für sein Layout individuell und pixelgenau bestimmen.

Tipp 6: Designer müssen loslassen

Responsive Websiten werden nicht mehr nach genauen Pixelwerten, sondern prozentual in sogenannten Fluidgrids (nicht feste, sondern anpassungsfähiges Raster) gestaltet. Am einfachsten generiert man sie mit Tools wie TinyFluidGrid oder Gridpak.

Trotzdem fällt es den meisten Designern schwer, ein so vereinfachtes Design zu entwickeln, dass es universell einsetzbar und flexibel ist. Getrieben von der alten Denke, lieber 25 Abformte durchzugestalten und damit das Design zu kontrollieren, rennt man hier einem Ziel hinterher, was bei der heutigen Vielzahl an Geräten, Browsern und Auflösungen niemals erreichbar sein wird.

Der Mut muss da sein, einfach, schlicht und reduziert zu gestalten, damit man eine anpassungsfähige, nutzerzentrierte und schöne Responsive Website ins Leben rufen kann, die sogar auf Endgeräten gut aussieht und funktioniert, die es zum Zeitpunkt der Entwicklung vielleicht noch gar nicht gab.

Vorläufiges Fazit:

Das Webdesign heute ist unglaublich anspruchsvoll geworden. Durch lokale und mobile oder duale Nutzung. Durch Mouse- und Touch-Bedienung oder Spracherkennung. Und immer mehr neue Endgeräte mit diversen Betriebssystemen und Browsern kommen, die unendlich viele verschiedene Auflösungen mit sich bringen.

Die Nutzer gewöhnen sich daran und haben dadurch immer höhere Erwartungshaltungen. Konzepter, Designer, Programmierer und auch für Kunden bedeutet das aber nicht nur, die passendste und neuste Technik wie zum Beispiel Responsive Design anzuwenden, um Produkte und Dienstleistungen optimal anbieten zu können, sondern auch die eigenen Denkweisen und Arbeitsprozesse entsprechend anzupassen und zu verbessern: ein Responsive Workflow. Für ein performancestarkes und effizientes Ergebnis.

Nichts verpassen mit dem kostenfreien Newsletter von mobile zeitgeist.

Über die Autorin: KeHa (Kerstin Hahlbohm) ist als freie Kreative für Agenturen und Unternehmen wie z.B. Interone, Razorfish, Scholz & Volkmer oder das ZDF tätig und zählt zu den wenigen Creative Directoren, die vollständig interdisziplinär im on- & offline-Bereich arbeiten. Allem voran steht für sie ein gutes, abgestimmtes Teamwork, ein durchdachtes Konzept und viel Ehrgeiz. Dabei ist es ihr egal, ob es um eine große integrierte Kampagne oder eine kleine Visitenkarte geht.

11 Kommentare

  1. Schöner Artikel und gut erklärt. Ich versuche mich auch gerade an responsive Designs und es ist echt ein größerer Aufwand. Aber wenn man strukturiert arbeitet und sich von Pixelwerten loslöst klappt das eigentlich ganz gut.

    Liebe Grüße
    Alpi

  2. Hi Anja, das ist richtig. Ich bezog mich auf die Wasserfall-Methode, die in Agenturen oft angewendet wird. Diese führt in jedem Fall dazu, dass ein RWD Projekt natürlich viel teurer werden kann als wenn man die Arbeitsweise dynamisch – wie vorgeschlagen – umsetzt.

    Lieben Gruss,
    Kerstin

  3. so viel teurer ist eine Responsive-Design-Seite gar nicht, wenn man bedenkt, dass die meisten Seitenbetreiber inzwischen mehrere Ansichten Ihrer Seite entwerfen, weil die herkömmliche Desktop-Ansicht sich nicht für kleinere Endgeräte eignet und inzwischen doch sehr viele User Smartphones und Tablets nutzen. RWD ist zwar in der Entwicklung etwas kosten- und zeitintensiver, dafür danach aber pflegeleichter und damit nicht insgesamt nicht oder nicht viel teurer als wenn man seine Seite extra für Desktops, Tablets und Smartphones optimiert.
    beste Grüße
    Anja

  4. Als Anregung für Responsive Webdesign empfehle ich: http://mediaqueri.es/

    Und zum Testen bei verschiedenen Größen gibt es im Firefox das Responsive Design View: https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

    Im Google Chrome kann man sogar Touch Events und User-Agent ohne extra Plugins aktivieren, über die Einstellungen (Zahnrad rechts unten) in den Dev Tools [F12]. Dort ist die Größenumschaltung jedoch nicht so komfortabel wie im Firefox.

  5. Hi Malte,

    herzlichen Dank für die Blumen! Das freut mich sehr, dass dir der Artikel zusagt. Ja, Responsive Projekte sind deutlich zeitintensiver in der Konzeptphase, daher ist es wichtig den Prozess anzupassen, damit Zeit- und vor allem der Kosten-Rahmen nicht völlig gesprengt wird. Die Arbeit soll ja auch Spaß machen und das Projekt am Ende gut aussehen und funktionieren.

    Bezüglich deiner Frage: ich persönlich bin der Meinung das Responsive Webdesign nur für Websiten mit wenig Umfang und niedrigem Komplexitätsgrad geeignet ist. Umfangreiche Portale sollten lieber mit separaten mobilen Seiten arbeiten. Was auch schlecht funktioniert, ist ein bestehendes Design nachträglich zu modifizieren. Ein Responsive-Projekt sollte von Grund neu erarbeitet werden.

    Die meisten gelungenen Seiten in meiner Sammlung sind nicht aus Deutschland. Es sind aber gerade welche in Arbeit, die ich dir gern zukommen lasse, wenn sie live gehen. :)

  6. Hi Sven Meyer,

    lieben Dank für dein Kommentar. Ich denke, die Kunst besteht darin, das Design dynamisch zu machen und trotzdem eine gezielte Kommunikation liefern zu können. Die erreicht man mit reinem Screendesign leider auch nicht. :)

  7. Hi Kerstin,

    vielen Dank für den schönen Artikel! Ich finde, dass Du das Vorgehen optimal beschrieben hast. Gerade die Herangehensweise an die Umsetzung an ein Responsive Design finde ich persönlich noch sehr komplex, da man gerade im Bereich der Konzeption einfach deutlich mehr Zeit und Aufwand investieren muss.

    Ich bin gerade auf der Suche nach ein paar wirklich gut umgesetzten Websites im Responsive Design aus dem deutschsprachigen Raum. Bisher habe ich mir die großen Player mal angeschaut. Dabei habe ich mir die URL von einem der großen Player genommen (z.B. Zalando) und mir in so einem Vorschau Tool angesehen:

    Teilweise sieht das schon ganz gut aus, aber gerade auf dem iPhone z.B. bei zalando noch nicht. Auch die anderen großen Portale haben die Umstellung scheinbar noch nicht geschafft.

    Kennst Du vielleicht ein paar Websites aus dem deutschsprachigen Raum, die bereits im Responsive Design umgestzt wurde?

    Würde mich über ein Feedback freuen :-)

    Vielen Dank,
    Gruß Malte

  8. … äh sorry, für die ganz vielen Text-Fehler. War vielleicht doch schon etwas spät. Ich hoffe, dass zumindest die Idee trotzdem rüber kam.

  9. Das Problem sind die ganzen Print-Designer, die (mangels) richtiger Web-Designer auf den eingesetzt wurden, um das Web 1.0 zu professionalisieren.
    HTML wurde nie dafür entwickelt, dass ein Designer (pixelgenau !) bestimmt wo was hin soll, sondern nur um bestimmte Inhalte auszuzeichnen und der Browser hat das auch schon vor 2000 prima auf (fast) jeder Bildschirmgröße gerendert. Jede Web 1.0 läuft super auf den unterschiedlichsten Devices mit den unterschiedlichen Auflösungen.
    Jetzt merkt man erst, dass „Print Design“ für das Web eine Fehlentwicklung war und versucht mit noch mehr CSS und sonstigen Erweiterungen ganz ganze wieder umzubiegen …
    Ich würde mir einfache klare Webseiten zurück wünschen. Back to HTML 1.0 !

3 Trackbacks / Pingbacks

  1. Die mobile zeitgeist Top10 im Juni 2013 | mobile zeitgeist
  2. Die Top 10 mobile zeitgeist Beiträge in 2013 | mobile zeitgeist
  3. Responsive Webdesign: Tools für die Website-Diagnose - Besserwerberblog • Marketing für Besserwerber

Schreibe einen Kommentar zu Malte Antworten abbrechen

E-Mail Adresse wird nicht veröffentlicht.


Ich bestätige, dass die hier von mir eingegebenen persönlichen Daten in der von mobile zeitgeist genutzten Datenbank bis auf Widerruf gespeichert werden dürfen.