In sechs Schritten zum erfolgreichen Responsive Webdesign(er)

Responsive Webdesign ist schon lange kein Trend mehr, sondern eine Unerlässlichkeit, die eng mit der Digiconomy, also der zunehmenden Verlagerung wirtschaftlicher Aktivitäten auf den Online-Markt, zusammenhängt. Vereinfacht dargestellt, könnte man unter Responsive Webdesign nur das Zusammenspiel von technischen Komponenten verstehen, doch es verbirgt sich weit mehr dahinter. Vor allem für erfahrene und traditionell arbeitende Webdesigner ist ein Umdenken bei der technischen Umsetzung vonnöten, da Responsive Webdesign eine neue Sicht auf Inhalte und ein neues Vorgehensmodell voraussetzt.

Der prosperierende Mobilmarkt zeigt gerade aus Usability-Sicht eine starke Abhängigkeit von den technischen Komponenten des Responsive Web. Der Trend bewegt sich immer mehr hin zur Nutzung der unterschiedlichen Mobile Devices. Umso mehr verwundert es, dass viele Firmenwebsites gerade in dieser Hinsicht noch immer erheblichen Nachholbedarf aufweisen, wie der BVDW unlängst feststellte. Da Responsive Webdesign nicht einfach ein themenerweiternder Trend ist, sondern eine gänzlich neue Sichtweise, kommt es aufgrund von mangelndem Verständnis oft nur zur Vermischung von Begrifflichkeiten und zu falschen Herangehensweisen.

Als Abteilungsleiter Webdesign und Creative Director der esc mediagroup gebe ich deshalb gerne folgende Tipps, wie Responsive Webdesign mit wenigen Schritten erfolgreich gestaltet und umgesetzt  werden kann und was dabei beachtet werden muss:

Schritt 1: Analyse
Zunächst ist eine umfangreiche Kunden- und Marktanalyse durchzuführen. Dabei muss erörtert werden, welche Wünsche und Vorstellungen der Kunde hat und welches Ergebnis er sich aus dem Projekt verspricht. Ebenso wichtig ist die Definition der Zielgruppe, auf die das Endprodukt zugeschnitten sein soll. Zudem steht eine ausgiebige Konkurrenzanalyse an. Dabei geht es vor allem darum, die Konzepte und Umsetzungen konkurrierender Produkte zu analysieren und anschließend ein besseres Ergebnis zu erzielen. Der sich permanent entwickelnde Markt muss daher kontinuierlich beobachtet werden, um aufkommende Trends und alternative Vorgehensweisen von Konkurrenten im Blick zu behalten.

Schritt 2: Content Strategie
Als Erstes wird der Content für die Website gesammelt und bewertet, ganz nach dem Motto „Content first“. Den Inhalten sollte auch im Responsive Webdesign grundsätzlich viel Zeit gewidmet werden, da sie einen essentiellen Faktor für den Erfolg einer Website darstellen. Auf der einen Seite muss es sich um Unique Content handeln, auf der anderen Seite muss der Text für jeden Leser verständlich geschrieben sein. An diesem Spagat scheitern einige unerfahrene Contentwriter, die dem eigentlichen Inhalt nicht genügend Bedeutung beimessen. Gerade vor dem SEO-Hintergrund, insbesondere  wegen der  Auffindbarkeit und dem Ranking auf Google, sollte komplett auf Duplicated Content verzichtet werden.

Schritt 3: Moodboard
Das Moodboard bezeichnet eine leere (digitale) Leinwand, die der graphische Künstler nun füllen darf. In diesem Schritt erfolgt die Illustration des visuellen Stils. Es wird ein erster Look der Website kreiert, indem einzelne Elemente wie Farben, Bilder und Überschriften durchprobiert werden. Die optische Komponente ist besonders wichtig: Sie sticht dem User zuerst ins Auge und sollte deshalb wohlüberlegt sein. Im Bereich der Farbelemente muss immer wieder nachgearbeitet werden, um mit der Zeit gehen zu können. Das Moodboard sollte nicht als fertiges Layout gesehen werden, sondern als Darstellungsobjekt, auf dem man kreative Elemente ausprobieren kann und das keineswegs als Endprodukt gilt.

Schritt 4: Usability
Die Usability umfasst viele Faktoren, die vor allem im Bereich der Suchmaschinenoptimierung bedeutend sind. Zuallererst sollte eine Website dem User ein bequemes und nicht zu umständliches Lesen und Bedienen ermöglichen. Entsprechend sollte die Gestaltung einer Website auf den Grundsatz der Benutzerfreundlichkeit ausgelegt sein. Auch die Navigation auf der Seite sollte so übersichtlich angeordnet werden, dass sich User problemlos zurechtfinden können. Denn ein barrierefreier Zugang ermöglicht nicht nur Menschen mit körperlichen Einschränkungen eine vereinfachte Nutzung der Seite, sondern bringt auch Vorteile im Google Ranking.

Schritt 5: Umsetzung
Ein auf Responsive Web basierendes Webseitenprojekt ist meist nur im Team umsetzbar: Je nach Budget und Umfang der geplanten Webseite sind zumindest ein Webdesigner, ein Programmierer und ein Projektmanager erforderlich. Eher selten, dass eine Einzelperson in allen drei Bereichen Experte ist. Grundlage für die technische Umsetzung sind umfassende Kenntnisse in den Programmiersprachen HTML5 und CSS3. HTML5 hat Adobe Flash als Animationsprogramm verdrängt und ist beim Responsive Web nicht nur State of the Art, sondern unverzichtbar. Ebenso essentiell ist CSS3, das bei der Websiteformatierung deutlich mehr Gestaltungsmöglichkeiten bietet.   Best-Practice Beispiele  dafür liefert das von mir sehr geschätzte Tutorial Video2Brain, das die Grundlage für die Responsive Web-Demoversion  auf unserer Webseite bildete.

Schritt 6: Testing / Reporting
Unterm Strich muss ein Reponsive Webdesign Projekt  als kontinuierlicher Prozess gesehen werden, der eines ständigen Testings bedarf. Sowohl das Testing des Inhaltes in Bezug auf Menge und Verhältnis,  als auch das Testen auf den realen Endgeräten wie Smartphones und Tablets muss laufend durchgeführt werden. Neben dem Testing sollte zudem ein Fokus auf das Reporting gelegt werden. Wöchentliche Berichte von Entwürfen zeigen dem Kunden, dass ein Arbeitsfortschritt zu erkennen ist. So ist in jeder Arbeitsphase die für den Kunden nötige Transparenz bei der Kostenkontrolle gewährleistet.

Beachtet man diese sechs Schritte, ist Responsive Webdesign als Gesamtprojekt jederzeit erfolgreich umsetz- und einsetzbar. Für weitere Fragen und eine ausführliche Diskussion zu diesem Thema stehe ich gerne zur Verfügung.