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.
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.
