HDBLOG


Kategorien


Neueste Beiträge


Neueste Kommentare


Archive


HDNET GmbH & Co. KG


Ravensbeger Str. 22
33824 Werther (Westf.)
Impressum | Datenschutz

HDBLOG

/ 0

Konzeption

Designprozess für responsive Websites

12th Februar 2014

Bei der Entwicklung oder dem Relaunch einer Website erfolgt immer häufiger zeitgleich eine responsive Optimierung. Das führt neben technischen Veränderungen auch zu einem neuen Design- und Abstimmungsprozess. Essentieller Bestandteil ist die tiefe Einbindung des Kunden in das Projekt. Er ist nicht nur Auftraggeber, sondern Teil der gesamten Entstehungskette. Wie das funktioniert und welche Vorteile dieses Vorgehen mit sich bringt, erfahren Sie in diesem Artikel.

Der klassische Designprozess

Bevor internetfähige Geräte mit unterschiedlichsten Displaygrößen wie Pilze aus dem Boden sprossen, glich der Entstehungsprozess einer neuen Website einem Etappenlauf mit einer festen Anzahl an Checkpoints. Der gesamte Ablauf eines Projekts orientierte sich an den Abnahmen durch den Kunden. Im Grunde lagen diese Punkte bei der Abnahme des Pflichtenheftes, der Wireframes und des Designs.
Wasserfall
Mit Vollendung der Designerstellung wurde das Design als Photoshop-Datei oder aus mehreren Screens bestehend an den Frontend-Entwickler übergeben – Veränderungen waren ab diesem Zeitpunkt in der Regel nicht mehr möglich.

Klassische Websites und Bedienkonzepte

Auch heutzutage ist dieses Vorgehen noch üblich, wenn eine Website nicht für unterschiedliche Endgeräte optimiert werden soll. Da die meisten Websites auf einem 960er-Grid oder einem ähnlichen Raster basieren, also eine Breite von ca. 960 Pixeln aufweisen, werden in der Regel alle Desktop-PCs, Laptops und 10″ Tablets im Landscape-Format zumindest optisch passend bedient.
960er Grid
Wenn wir an dieser Stelle einen kleinen Blick in die Zukunft werfen, so ist es nicht unwahrscheinlich, dass in einigen Jahren auch die meisten Desktop-PCs und Laptops über Touchscreens verfügen. Ob das Bedienkonzept der Maus dem technischen Fortschritt dabei zum Opfer fallen wird ist schwer vorauszusagen. Die Problematik, zwei Bedienkonzepte berücksichtigen zu müssen (Maus und Finger), wird uns auf jeden Fall noch einige Jahre erhalten bleiben.

Im Klartext bedeutet das, dass ein reguläre Website zwar auf einem gängigen Tablet ausreichend gut dargestellt wird, dies aber die einwandfreie Bedienbarkeit über ein Touchscreen nicht gewährleistet. Das Problem wird durch eine responsive Anpassung zwar nicht behoben, erhält jedoch im Regelfall die nötige Beachtung um dem Anspruch einer responsiven Website gerecht zu werden.

Vom Design- zum Entwicklungsprozess

Die Verschmelzung des Designprozesses mit der Frontend-Entwicklung sorgt dafür, dass wir von einem Entwicklungsprozess sprechen (müssen). Die Einbindung des Kunden in diesen Prozess spielt dabei eine zentrale Rolle.
Den Anfang macht in der Regel ein erstes Beratungsgespräch, in dem der Kunde unter anderem über technische Möglichkeiten von responsiven Websites aufgeklärt wird. Mit passenden Strategie- und Konzeptionsmethoden wird die Website gemeinsam entwickelt; dabei im Hinterkopf die verschiedenen Endgeräte auf der die Website später bedient werden wird. Nur mit der richtigen Vorbereitung lassen sich bei der Entwicklung einer responsiven Website die neuen Möglichkeiten perfekt nutzen.

Erstellung von Wireframes und Prototypen

Anschließend kommt es zur Erstellung von Wireframes und zu den ersten strukturellen Ergebnissen. Konzeptionsprogramme sind zwar in der Lage die Wireframes für verschiedene Auflösungen auszugeben, jedoch bietet sich hier ein Kompromiss an, bei dem detailreiche Wireframes für die Desktopversion entwickelt und einige ausgewählte Unterseiten ebenfalls für Auflösungen von mobilen Geräten entworfen werden.

Die Entscheidung der relevanten Breakpoints, also die Pixelbreiten bei denen das Design umbricht, wird dafür bereits in der Workshopphase getroffen; diese basiert auf einer Liste von zu unterstützenden Geräten, auch wenn das nicht zu 100 % der Idee des responsiven Webdesign entspricht. Um die Umsetzbarkeit zu gewährleisten halten Konzepter und Frontend-Entwickler während der Entwicklung der Wireframes Absprachen zu strukturellen Ideen. Mit der Abnahme der Wireframes durch den Kunden beginnt der Designer mit der Ausarbeitung des Designs.

Design verschmilzt mit Umsetzung

Derzeit werden verschiedenen Meinungen propagiert, die das Problem der Umwandlung eines starren Designs in eine flexible Website lösen. Angefangen bei der aufwendigen Erstellung von HTML-Designprototypen bis hin zu Lösungen, die lediglich das gestalterische Look & Feel der geplanten Website vermitteln. Diese beiden Vorgehensweisen sind jedoch in der Realität aus Zeit- und Kostengründen nicht immer umsetzbar bzw. vermitteln dem Kunden das geplante Endergebnis zu schemenhaft.

Eine bereits etablierte Methode ist die iterative Umsetzung. Bei dieser Vorgehensweise stehen dem Frontend-Entwickler wie schon beschrieben verschiedene Wireframes und ein Screendesign der Desktopversion, welches unter Berücksichtigung einer responsiven Umsetzung gestaltet wurde, zur Verfügung. Nach der klassischen Umsetzung der Desktopversion erfolgt die Entwicklung für die weiteren Auflösungen. Ein interner Abstimmungsprozess zwischen Entwickler und Designer bzw. Konzepter und die regelmäßige Rücksprache mit dem Kunden ist ein sich stetig wiederholender Vorgang.
Abstimmungsprozess
Während der Entwicklungsphase können auf diese Weise Schritt für Schritt neue gestalterische, konzeptionelle und technische Möglichkeiten in das Projekt einfließen. Diese Verschmelzung ist der Schlüssel zu einem funktionierenden und zufriedenstellenden Resultat, welches die Vorstellungen des Kunden erfüllt.

Warum der Mehraufwand kein Mehraufwand ist

Die ARD/ZDF-Onlinestudie 2013 hat gezeigt, das sich die mobile Internetnutzung im Jahr 2013 in Deutschland zum Vorjahr verdoppelt hat. Fast jeder zweite Deutsche besitzt mittlerweile ein Smartphone und über 13 Millionen Deutsche benutzen regelmäßig ein Tablet. An einer Optimierung für diese Geräte kommt in der Regel also niemand mehr vorbei – egal ob nun responsive Anpassung oder mobile Umsetzung.

Sollte aus einem bestimmten Grund bei der Entwicklung einer neuen Website auf die Optimierung für mobile Geräte verzichtet werden, wird dies in naher Zukunft zu einer deutlich geringeren Reichweite und geringerer Akzeptanz führen. Eine „responsive Nachrüstung“ ist dann nur noch mit hohem Zeit- und Kostenaufwand realisierbar.

Icons made by Freepik from www.flaticon.com

Kommentare

Es gibt noch keinen Kommentar.