Warum Responsive Webdesign nur der Anfang ist: Multiscreen & Co.

War Webdesign früher, abgesehen von den durch und durch hässlichen Browserkämpfen, eine einfache Sache, so ist der Entwurf von Websites heute zu einer Herausforderung geworden (Sprichwort: Responsive Webdesign). Denn der Begriff Website wird im Normalfall gerne mit Webseite übersetzt. Eine abgeschlossene Seite, wie wir es aus einem Buch kennen, gibt es im Browser allerdings nicht. Das gilt umso mehr, wenn man die vielen unterschiedlichen Endgeräte in der heutigen Zeit betrachtet. Adaptive oder Responsive Webdesign sind die Zauberwörter, doch das ist nur der Anfang.

Schon im letzten Jahr begann sich die Situation der unterschiedlichen Endgeräte und Bildschirme auf den Designprozess auszuwirken. Konzepte und Designs mussten der großen Gerätefragmentierung Rechnung zahlen und sich den Endgeräten entsprechend anpassen. Begriffe wie Responsive Webdesign oder Adaptive Webdesign waren und sind in aller Munde. Zwar werden beide Formulierung oftmals gleichgesetzt – ganz korrekt ist diese Vereinfachung allerdings nicht.

Adaptive und Responsive Webdesign

Adaptive bedeutet in der Übersetzung angepasstes Webdesign. Bei Adaptive Websites werden einige wichtige Umschaltpunkte definiert (z.B. die Übergänge in Bezug auf die Bildschirmgröße von Desktop auf Tablet oder von Tablet auf Smartphone), an denen das Layout entsprechend angepasst wird. Das Layout unterscheidet sich in diesem Beispiel also auf Desktop, Tablet und Smartphone – innerhalb dieser Geräte bleibt das Design aber zum größten Teil gleich. Allerdings dürfte jedem klar sein, dass es auch bei Desktop-Bildschirmen, Tablets und vor allem auch Smartphones unterschiedlichste Größen und Auflösungen gibt.
Einen Schritt weiter geht daher das Responsive Webdesign, oder übersetzt reaktionsfähiges Webdesign. In dieser Disziplin werden zwar ebenfalls wichtige Übergangspunkte definiert, dazwischen passt sich das Layout aber auch auf die unterschiedlichen Größen und Auflösungen an. Um dies zu erreichen wird mit früher (bzw. leider heute noch) unter Designer zumeist verpönten Prozentangaben gearbeitet. Doch Agenturen, vor allem aber auch Kunden, müssen sich von festen Layouts im Internet verabschieden. Die Nutzung von mobilen Endgeräten wird rasant ansteigen, eine Priorisierung auf eine feste Browserbreite (klassisch 960 Pixel) ist kaum noch sinnvoll. Um die Betrachtung der verschiedenen Endgeräte wird man in heutigen Webprojekten nicht mehr herumkommen. Starre Layouts werden und müssen durch flüssige Layouts (Fluid Layouts) abgelöst werden.

Multiscreen Strategie und Multiscreen Experience

Doch diese Fluid Layouts können nur der Anfang sein. Zwar werden beim Adaptive oder Responsive Webdesign die unterschiedlichen Endgeräte beachtet, diese bilden aber in der Konzeption in sich geschlossene Einheiten. Ein Zusammenspielen der Endgeräte, die Einbeziehung des Nutzers und die Beachtung des Nutzungskontextes fehlt in dieser Vorgehensweise zum größten Teil. Der nächste Schritt bei der Konzeption und Entwicklung von digitalen Projekten ist die Einführung einer Multiscreen Strategie. Hilfreiche Konzepte, Vorgehensweisen und Muster stellt der UX-Experte Wolfram Nagel zusammen mit einigen Kollegen im Multiscreen Experience Toolkit und dem bald erscheinenden Buch Multiscreen Experience Design vor.

Grob zusammengefasst, können die einzelnen Endgeräte (hier Screens genannt) nicht mehr separat betrachtet werden. Ein gutes Beispiel ist die Konzeption eines Online-Shopping-Portals. Um ein wirklich herausragendes digitales Einkaufserlebnis zu schaffen, müssen bei der Konzeption 2+3 Parameter betrachtet werden. Die Hauptparameter beziehen sich dabei auf den Nutzer (Nagel definiert hier einige hilfreiche Muster-Personas) und Screen (Smart-TV, Desktop/Laptop, Tablet und Smartphone). Darüber hinaus bilden der Nutzungsmodus (Lean Back oder Lean Forward), die jeweilige Situation (mobil oder stationär), sowie das Umfeld (Privat, Arbeitsplatz, Öffentlicher Raum, Unterwegs) den jeweiligen Nutzungskontext. Nur wenn diese Paramater entsprechend verstanden und in der Konzeption eingebunden werden, erhalten wir eine herausragende User und Multiscreen Experience.Zurück auf unser Beispiel eines digitalen Einkauferlebnisses, hat der Benutzer mit dem Smartphone andere Wünsche und Ziele, als mit einem Tablet, vor dem PC oder sogar dem TV-Gerät.

Auf dem Smartphone könnte der Benutzer per Barcode-Scanner zu kaufende Produkte in eine Einkaufsliste legen und diese unterwegs per schneller Such- und Eingabemöglichkeit bei Bedarf ergänzen. Diese Einkaufsliste wird über die Cloud mit allen anderen Geräten synchronisiert. Am PC oder Laptop kann die Einkaufsliste ergänzt, erweitert und mit einem klassischen Online-Shop-System genutzt werden. Auf dem Tablet werden zu den Produkten in der Einkaufsliste automatisch Rezeptvorschläge vorgeschlagen, Koch-Videos können per Device Shifting direkt auf den Smart TV gestreamt werden. Ebenfalls über letztere beiden Geräte kann das Rezept nachher auch einfach nachgekocht werden. Multiscreen eben.

Natural User Interfaces

Bei Multiscreen-Projekten müssen darüberhinaus aber auch bekannte Navigationskonzepte hinterfragt werden. Der Weg geht weg von klassischen GUIs (Graphical User Interfaces) hin zu NUIs (Natural User Interfaces). Gesten- und Sprachsteuerung steht bereits heute technisch nichts mehr im Wege. Es wird Zeit neue Navigationsformen und Wege zu nutzen.

Sie sehen also: Response Webdesign ist nur der Anfang!

Wenn Sie mehr zu Responsive Webdesign wissen möchten:
Markus Schmid (Geschäftsführer AREA-NET GmbH)
E-Mail apps@area-net.de, Internet www.app-agentur-bw.de oder 07162 / 941140

Unser Partner zum Thema Multiscreen

Im Bereich Multiscreen arbeiten wir eng mit unserem Partner, der digiparden GmbH in Schwäbisch Gmünd, zusammen. Die digiparden betreuen in strategischen IT-Projekten international aufgestellte Industrieunternehmen im Dickicht digitaler Kommunikation.
Wolfram Nagel, Head of Design and Corporate Communication bei der digiparden GmbH, ist Hauptautor des in Kürze erscheinenden Buches Multiscreen Experience Design. Als einer der deutschen Vorreiter zum Thema Multiscreen Experience ist er der Experte für Multiscreen Strategien.

 

Das sagt Wikipedia und Co. zu Responsive Webdesign

Responsive Design

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um die technische Umsetzung eines anpassungsfähigen

Responsive Webdesign: Tipps und Informationsquellen [Infografik …

Eine aktuelle Infografik zeit, was es mit Responsive Webesign auf sich hat und wie man sich schnellstmöglich über das Thema informiert. Die …

Twitter-Feeds zu Responsive Webdesign

Responsive Webdesign auf Twitter, Multiscreen

#UI #Design #Guidelines for #Responsive #WebDesign http://t.co/QAChtPKF #Codrops

Responsive Webdesign auf Twitter, Multiscreen

#Responsive #WebDesign – An Advanced #Guide to #HTML & #CSS http://t.co/33IrfPNM

 

 

Hinterlasse eine Antwort

Your email address will not be published. Please enter your name, email and a comment.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>