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.
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 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! Weitere Informationen erhalten Sie unter www.app-agentur-bw.de
Über:
AREA-NET GmbH
Herr Markus Schmid
ÖSchstrasse 33
73072 Donzdorf
Deutschland
fon ..: 07162/941140
web ..: http://www.area-net.de
email : info@area-net.de
Die AREA-NET GmbH aus Donzdorf, Kreis Göppingen in Baden-Württemberg ist eine App-Agentur und Multiscreen-Agentur für die Entwicklung von mobilen Apps. Spezialisiert hat sich die App-Agentur auf die Konzeption und Entwicklung von mobilen Apps für iOS und Android, Apps für Smart-TV, Social Media und Multiscreen Strategien.
Sie können diese Pressemitteilung – auch in geänderter oder gekürzter Form – mit Quelllink auf unsere Homepage auf Ihrer Webseite kostenlos verwenden.
Pressekontakt:
AREA-NET GmbH
Herr Markus Schmid
Öschstrasse 33
73072 Donzdorf
fon ..: 07162/941140
web ..: http://www.app-agentur-bw.de
email : apps@area-net.de