Teil 2: Workflow und Konzeptionsphase im Responsive Webdesign
Abläufe und Prozesse
In diesem Teil unserer Responsive-Webdesign-Reihe wird die Vorgehensweise und der Projektablauf eines derartigen Webseiten-Projekts erläutert. Die Besonderheit liegt hier in den flexiblen Inhaltselementen des responsiven Webdesigns, die in den einzelnen Projektphasen anders verarbeitet werden müssen, weswegen der herkömmliche Prozessablauf einer statischen Webseite nicht adaptiert werden kann.
Außerdem werden grundsätzliche Bedingungen und Vorgehensweisen erläutert, die in der Konzeptionsphase hilfreich sind und die Arbeit mit flexiblen Layouts vereinfachen.
Eine Einführung in das Thema Responsive Webdesign finden Sie im ersten Teil unserer Serie. Mehr Informationen zu Wireframes und Designsystemen gibt es im dritten Teil.
Workflow bei responsiven Webseiten-Projekten
Vorgehensweise bei der Entwicklung einer klassischen, statischen Webseite
Das herkömmliche Wasserfallmodell charakterisiert sich dadurch, dass die einzelnen Phasen strikt voneinander getrennt sind. In den meisten Fällen folgen auf die Konzeption die Designphase und dann die Entwicklungsphase. Der Designer erstellt ein komplettes Webseitenlayout und gibt dieses an den Entwickler weiter, der es dann technisch realisiert und nach dem Abschluss an den Kunden übergibt (siehe Abbildung 1).
1. Konzeption-/ Planungsphase: Ideensammlung und Analyse; Skizzen anfertigen.
2. Designphase: Layouterstellung.
3. Entwicklungsphase: Technische Umsetzung der erstellten Layouts.
4. Testphase: Tests aller Funktionen mit anschließender Fehlerbehebung.
5. Veröffentlichung: Übergabe an den Kunden.
Dieser einfach gehaltene Entwicklungsprozess wird von dem Ziel abgeleitet, das erstellte Layout bestmöglich in das Web zu übertragen. Lässt man die Interaktionsmöglichkeiten einmal außer Acht, handelt es sich bei der Webseite um ein statisches Gebilde, das dem grafischen Design gleichgestellt ist. Für Webseiten, die auf Basis eines starren Entwurfs umgesetzt sind, funktioniert dieses Modell fehlerfrei. Jedoch funktioniert diese lineare Herangehensweise des Wasserfallmodells bei responsivem Design nicht mehr. Warum das so ist, wird nachfolgend erläutert.
Vorgehensweise bei der Entwicklung einer responsiven Webseite
Das Wasserfallmodell von Zillgens ist die Grundlage der Herangehensweise bei der Umsetzung von responsiven Webseiten. Der hier vorgeschlagene Workflow stellt eine Möglichkeit dar, bei der zu berücksichtigen ist, dass unterschiedliche Gegebenheiten, wie projektspezifische Anforderungen oder auch Kundenwünsche, den Ablauf verändern können.
Wie bereits beschrieben, muss bei responsiven Webseiten das Layout so flexibel gestaltet sein, dass es auf jedem Endgerät eingesetzt werden kann. Die Vielzahl an unterschiedlichen Endgeräten zwingt den Designer dazu, unterschiedliche Darstellungsvarianten mit Hilfe von Umbruchpunkten zu erstellen und das auf Basis eines einzigen Layouts. In der Regel können das drei bis vier Designs pro Template werden. Dabei werden Flexibilität und die Funktionalität zwischen den Umbruchpunkten erst bei der späteren Umsetzung offenbart.
Aufgrund dieser Eigenschaften muss das beschriebene Wasserfallmodell, welches hier weiterhin die Grundlage bildet, neu strukturiert und überdacht werden, um auf die damit verbundenen Veränderungen des responsiven Designs zu reagieren. Dabei müssen viele Designentscheidungen in den Entwicklungsprozess rücken, da diese dort offensichtlicher sind. Um Problemstellen aufzudecken, ist es hilfreich, die Entwicklung vor die Gestaltung zu stellen.
Je eher man mit dem Erstellen von Prototypen anfängt, desto früher lassen sich Schwachstellen erkennen und beheben
Josh Emerson, ein Webdesigner der Firma Clearleft, empfiehlt, gleich von Beginn an mit der Umsetzung eines groben Prototyps zu beginnen. Die dadurch entstehenden Ergebnisse sind sehr nützlich hinsichtlich der nachfolgenden Prozesse. Der Designer bekommt sehr schnell Feedback, welches er dann in das nachfolgende Design mit einfließen lassen kann. Dabei ist zu beachten, dass Entwicklungs-, Test- und Designphase nicht als getrennte Prozesse angesehen werden dürfen, sondern als einen in sich verzahnten Prozess. Somit steht die Entwicklungs-, Test- und Designphase in einem Wechselspiel und dem ständigen Austausch von Informationen.
Die Konzeptionsphase bleibt weiterhin bestehen und bildet das Fundament. Design-, Entwicklungs-, und Testphase werden gebündelt und als Umsetzungsphase bezeichnet. Diese Umsetzungsphase wird solange wiederholt, bis alle Design- und technischen Anforderungen abgeschlossen sind. Die dort integrierten Phasen sind einzelne Teilschritte, in denen man Verbesserungen und gestalterische Ideen austauschen, technische Hindernisse frühzeitig erkennen und beheben kann. Es ist essentiell, dass sich Entwickler in den Fachgebieten der Designer und Designer in den Fachgebieten der Entwickler auskennen.
Innerhalb eines Vorgangs lassen sich die Phasen verschieben. Dies ist abhängig von den jeweiligen Projektanforderungen. Tests schließen den jeweiligen Vorgang ab.
Beispiel einer Umsetzungsliste:
1. Umsetzungsphase: Wireframe* in InDesign erstellen und in Form eines Prototypen testen.
2. Umsetzungsphase: Designkriterien wie Typografie festlegen und im Prototypen verankern und testen.
3. Umsetzungsphase: Designsystem erstellen und einzelne Module im Prototypen testen.
Die Konzeptionsphase
Sauberes Arbeiten in der Konzeptionsphase ist unerlässlich und verhindert unterwartete Planabweichungen im späteren Prozess. Zu Beginn eines neuen Projekts müssen die Anforderungen, Wünsche und Ziele mit dem Auftraggeber besprochen und abgestimmt werden. Folgende Schritte sind dabei zu empfehlen:
1. Zieldefinition
// Was will man mit seinem Webauftritt erreichen?
2. Zielgruppenanalyse
// Welche Zielgruppe will man ansprechen?
// Welche Endgeräte nutzt die Zielgruppe vorwiegend?
// Welchen Nutzen soll der Webseitenbesucher durch die Seite haben?
// Aus welchen Ländern kommen die Besucher? Welche Sprachen sollten integriert werden?
// Welche Browser nutzen die Besucher?
// Welche Betriebssysteme benutzen die Besucher?
3. Besuchererwartungen definieren
// Welche Informationen erwarten die Besucher?
// Welche Interessen hat der Besucher?
Die Informationsbeschaffung erfolgt in der Regel durch Zielgruppenanalysen und Kundenbefragungen. Des Weiteren können Informationen aus Webanalyse-Systemen, wie z.B. Google Analytics, gewonnen werden.
Aus den Zielen und Analysedaten lässt sich dann die zukünftige Struktur der Webseite ableiten und ein Konzept erstellen. Das Konzept beinhaltet die Zieldefinition, Navigationsstruktur und den hierarchischen Aufbau der Inhalte. Bei der Entwicklung von responsiven Webseiten gibt es unterschiedliche Ausgangssituationen. Zum einen kann es vom kleinsten mobilen Gerät aus entwickelt werden, wie dem Smartphone (Mobile First) oder zum anderen aus Sicht eines Desktop-PCs (Desktop First). Die beiden Varianten, Mobile First und Desktop First bilden die möglichen Herangehensweisen für responsives Design.
Mobile First oder Desktop First
Mobile First
Bei Mobile First steht der Inhalt im Fokus. Von daher wird Mobile First auch als Content First bezeichnet. Inhalt zuerst heißt auch, den Nutzer in den Mittelpunkt zu stellen. Denn bei der Auseinandersetzung mit Text und Bild lassen sich viele Kenntnisse hinsichtlich dessen sammeln, ob die ihm zur Verfügung gestellten Inhalte nützen oder nicht.
Eine Überfüllung durch unwichtige Inhalte ist für den mobilen Gebrauch nicht sinnvoll. Durch kleinere Bildschirmflächen, wie z.B. bei einem Tablet, muss man die inhaltliche Planung und deren Nutzen in den Vordergrund stellen. Der Vorteil ist, dass die Inhalte zuerst auf den kleinsten Ausgabegeräten definiert werden. Dadurch bläht man den Inhalt nicht unnötig auf und stellt dem Besucher nur die wichtigsten Informationen zur Verfügung. Danach erfolgt die Entwicklung vom kleinsten mobilen Gerät aus, im Sinne des „Progressive Enhancement“. Dies bedeutet, dass man die CSS Grunddefinitionen auf alle weniger fähigen Ausgabegeräten zuerst erstellt. Damit lassen sich auch Feature-Phones (z.B. BlackBerry Smartphones der älteren Generation) abdecken, die keine MediaQueries und JavaScript verarbeiten können und zum Teil auch kleinere Bildschirmflächen als 320 x 480px haben. Danach erfolgt erst die Optimierung der Geräte mit größeren Bildschirmen.
Desktop First
Beim Desktop First Prinzip spielt die Inhaltsstruktur eine untergeordnete Rolle. Geht es um das Design einer Webseite, ist die Gestaltung über die größte Darstellungsfläche durchzuführen. Man hat durch die große Darstellungsfläche mehr Objekte in einer Übersicht, die sich dadurch besser aufeinander abstimmen lassen. Die Entwicklung erfolgt vom Desktop-PC aus, der in der Regel die größte Bildfläche zur Verfügung stellt.
Fazit
Die beschriebenen Prinzipien bilden mögliche Lösungen für die Umsetzung eines responsiven Designs. Letztlich hängt die „perfekte“ Lösung aber von der Ausgangssituation der Webseite ab. Ist die Hauptnutzungssituation mobil? Oder wird der mobile Kanal mehr als Ergänzung verwendet, um Synergieeffekte zu generieren? Je nachdem wird dann die Mobile First- oder die Desktop First-Strategie den gewünschten Erfolg mit sich bringen.
Die Mobile First-Strategie konzentriert sich vermehrt darauf, den Nutzer in den Vordergrund zu stellen. Der Content muss für den User so interessant sein, dass er diesen auch mit einem kleinen Display und einer geringen Performance lesen kann. Kann die Webseite dies abdecken, steigert das die inhaltliche Qualität und die Performance der Webseite.
Wireframe*= Ein Wireframe ist ein sehr früher konzeptioneller Entwurf einer Webseite, bei der Gestaltung und Funktionen noch keine Bedeutung haben. Fokus liegt hierbei auf der Anordnung der Elemente und der User Experience.
