Webdesign – Scrollen und Swipen

von Christian Ziron — Gepostet in Design am 31. Juli 2014

Wie in der letzten Episode berichtet werden die Datenhighways zunehmend durch mobile Geräte bereist. Doch welche Inhalte und Angebote auf welcher Plattform genutzt werden unterscheidet sich noch immer signifikant. So halten die teilweise gefühlten, teilweise realen Sicherheitsbedenken zwischen Mobile und Desktop immer noch fast zwei Drittel der Nutzer davon ab Bank- oder Geschäftstransaktionen über mobile Geräte abzuwickeln, wohingegen sich das versenden und betrachten von Fotos, der Aufruf von Kartenmaterial, sowie die Befriedigung von Spiel- und Social Network Bedürfnissen zunehmend auf die mobilen Begleiter Tablet und Smartphone verlagern. Für die verlustfreie Darstellung einer Webseite auf unterschiedlichen Endgeräten haben sich seit ungefähr zwei Jahren die Begriffe bzw. Techniken Parallax Scrolling und Responsive Design etabliert.

geogr

The essence

Ob vertikal, ob horizontal, ob groß oder klein, mit Responsive Design schmiegen sich Inhalt und Layout einer Webseite an die jeweiligen Grenzen des Ausgabegerätes an. Sogenannte Media Queries innerhalb der Programmiersprache CSS ermöglichen es, einer für die Desktop Ausgabe geschriebenen Webseite quasi unendlich viele Unterformate zur Seite zu stellen. Die Layoutelemente werden durch die Media Queries an das Gerät angepasst von dem aus die Webseite angefragt wird. In unserem Test mit der Webseite http://geography.oii.ox.ac.uk wurde in allen getesteten Umgebungen genau das geliefert. Wie auf den Screenshots gut zu erkennen wurde die Seite optimal an den jeweiligen Ausgabescreen angepasst. Alle Menus blieben trotz der Anpassungen gut erreichbar und reagierten ohne größere Latenz, alle Grafiken wurden weiterhin in voller Größe angezeigt. Durch responsives designen werden auch die von Googles Probanden beanspruchten Anforderungen nach so wenig Zoomaufwand wie möglich perfekt bedient. Die Technik hadert momentan nur noch mit dem Umstand, dass stets alle Daten geladen werden müssen, sprich jedes implementierte Style Sheet zu jeder Geräteklasse wird auch dann mit abgerufen, wenn es an sich gerade nicht benötigt wird. Ein Umstand der sich mit dem Ausbau schnellerer Datennetze und steigender Rechenleistung bei den digitalen Begleitern in den kommenden Jahren in Wohlgefallen auflösen dürfte.

Endlich surfen!

Eine zweite Neuerung in Webdesignkreisen hat nur auf den zweiten Blick mit der Screen Größe oder dem Bedienkonzept zu tun. Vielmehr wird die visuelle Wahrnehmung stimuliert und auf die Probe gestellt. Der Begriff Parallaxe stammt aus der Wahrnehmungspsychologie. Beschrieben wird dadurch das optische Phänomen welches sich einstellt, wenn verschiedene, unterschiedlich weit in der Landschaft verteilte Objekte von einem Betrachter, der sich seitlich zu diesem Panorama fortbewegt und in Richtung Horizont blickt wahrgenommen werden.  Stichwort Zugfahrt. Oder beim Surfen auf den Brettern die den Fun bedeuten und neuerdings auch im World Wide Web. Das Prinzip Parallax Scrolling ist durch frühe Videospiele wie etwa der Super Mario Reihe bekannt. Der durch JavaScript realisierte Effekt wird durch CSS3 und HTML5 begünstigt, kann aber auch ohne die Webtechniken eingesetzt werden. Auf der Seite www.dangersoffracking.com verfolgt der Nutzer den durch einen Wassertropfen zurückgelegten Weg. Vom Transport bis zum Ausstoß wird der Vorgang der Ölwaschung aus Gestein mit allen wichtigen statistischen Fakten und den mit dem Prozess einhergehenden Gefahren als Animation durchgescrollt oder gewischt. Hierbei spielt die Technik Ihre Stärken aus. Die Begleitung des Wassertropfens auf seiner Reise verläuft wie in einem animierten Kurzfilm. Mit Blick auf den Bildungsbereich eröffnen sich auf diese Weise neue Spielräume für die Wissensvermittlung. Das der Ansatz  auch für viele andere Bereiche, ob nun im Infobereich oder für Shops interessant werden dürfte ist zu erwarten. So bilden sich durch die mögliche Ausarbeitung von Details im Animationsbereich und bei Übergängen von einem Bereich in den nächsten, zahlreiche Spielräume für die Erstellung einer hochklassigen Präsentation, welche dann auch auf den kleineren Screens noch voll zur Geltung kommt.

The Bottom Line

Parallax Scrolling und Responsive Design haben die ästhetischen Ansprüche neu kalibriert. Keine Revolution, aber evolutionär sicher das nächste heiße Ding. Zumal es sich um Techniken handelt deren Name, anders als bei den Buzzwords Web2.0 und Cloud, nicht in den Alltagsgebrauch übergehen wird und somit auch nicht dem kollektiven vergessen anheimfällt, deren visuelle Andersartigkeit aber noch einiges an Staunkapazität bereithält. Stichwort Perspektivwechsel. In den nächsten Episoden werden wir das Grundlagenlabor verlassen und einen Blick auf die realen Verhältnisse im World Wide Web werfen. Vielen Dank fürs einschalten und klicken Sie weiter!

Webdesign – Scrollen und Swipen

Design

Webdesign in Mobilen Zeiten – Scrollen und Swipen

Wie in der letzten Episode berichtet werden die Datenhighways zunehmend durch mobile Geräte bereist. Doch welche Inhalte und Angebote auf welcher Plattform genutzt werden unterscheidet sich noch immer signifikant. So halten die teilweise gefühlten, teilweise realen Sicherheitsbedenken zwischen Mobile und Desktop immer noch fast zwei Drittel der Nutzer davon ab Bank- oder Geschäftstransaktionen über mobile Geräte abzuwickeln, wohingegen sich das versenden und betrachten von Fotos, der Aufruf von Kartenmaterial, sowie die Befriedigung von Spiel- und Social Network Bedürfnissen zunehmend auf die mobilen Begleiter Tablet und Smartphone verlagern. Für die verlustfreie Darstellung einer Webseite auf unterschiedlichen Endgeräten haben sich seit ungefähr zwei Jahren die Begriffe bzw. Techniken Parallax Scrolling und Responsive Design etabliert.

geogr

The essence

Ob vertikal, ob horizontal, ob groß oder klein, mit Responsive Design schmiegen sich Inhalt und Layout einer Webseite an die jeweiligen Grenzen des Ausgabegerätes an. Sogenannte Media Queries innerhalb der Programmiersprache CSS ermöglichen es, einer für die Desktop Ausgabe geschriebenen Webseite quasi unendlich viele Unterformate zur Seite zu stellen. Die Layoutelemente werden durch die Media Queries an das Gerät angepasst von dem aus die Webseite angefragt wird. In unserem Test mit der Webseite http://geography.oii.ox.ac.uk wurde in allen getesteten Umgebungen genau das geliefert. Wie auf den Screenshots gut zu erkennen wurde die Seite optimal an den jeweiligen Ausgabescreen angepasst. Alle Menus blieben trotz der Anpassungen gut erreichbar und reagierten ohne größere Latenz, alle Grafiken wurden weiterhin in voller Größe angezeigt. Durch responsives designen werden auch die von Googles Probanden beanspruchten Anforderungen nach so wenig Zoomaufwand wie möglich perfekt bedient. Die Technik hadert momentan nur noch mit dem Umstand, dass stets alle Daten geladen werden müssen, sprich jedes implementierte Style Sheet zu jeder Geräteklasse wird auch dann mit abgerufen, wenn es an sich gerade nicht benötigt wird. Ein Umstand der sich mit dem Ausbau schnellerer Datennetze und steigender Rechenleistung bei den digitalen Begleitern in den kommenden Jahren in Wohlgefallen auflösen dürfte.

Endlich surfen!

Eine zweite Neuerung in Webdesignkreisen hat nur auf den zweiten Blick mit der Screen Größe oder dem Bedienkonzept zu tun. Vielmehr wird die visuelle Wahrnehmung stimuliert und auf die Probe gestellt. Der Begriff Parallaxe stammt aus der Wahrnehmungspsychologie. Beschrieben wird dadurch das optische Phänomen welches sich einstellt, wenn verschiedene, unterschiedlich weit in der Landschaft verteilte Objekte von einem Betrachter, der sich seitlich zu diesem Panorama fortbewegt und in Richtung Horizont blickt wahrgenommen werden.  Stichwort Zugfahrt. Oder beim Surfen auf den Brettern die den Fun bedeuten und neuerdings auch im World Wide Web. Das Prinzip Parallax Scrolling ist durch frühe Videospiele wie etwa der Super Mario Reihe bekannt. Der durch JavaScript realisierte Effekt wird durch CSS3 und HTML5 begünstigt, kann aber auch ohne die Webtechniken eingesetzt werden. Auf der Seite www.dangersoffracking.com verfolgt der Nutzer den durch einen Wassertropfen zurückgelegten Weg. Vom Transport bis zum Ausstoß wird der Vorgang der Ölwaschung aus Gestein mit allen wichtigen statistischen Fakten und den mit dem Prozess einhergehenden Gefahren als Animation durchgescrollt oder gewischt. Hierbei spielt die Technik Ihre Stärken aus. Die Begleitung des Wassertropfens auf seiner Reise verläuft wie in einem animierten Kurzfilm. Mit Blick auf den Bildungsbereich eröffnen sich auf diese Weise neue Spielräume für die Wissensvermittlung. Das der Ansatz  auch für viele andere Bereiche, ob nun im Infobereich oder für Shops interessant werden dürfte ist zu erwarten. So bilden sich durch die mögliche Ausarbeitung von Details im Animationsbereich und bei Übergängen von einem Bereich in den nächsten, zahlreiche Spielräume für die Erstellung einer hochklassigen Präsentation, welche dann auch auf den kleineren Screens noch voll zur Geltung kommt.

The Bottom Line

Parallax Scrolling und Responsive Design haben die ästhetischen Ansprüche neu kalibriert. Keine Revolution, aber evolutionär sicher das nächste heiße Ding. Zumal es sich um Techniken handelt deren Name, anders als bei den Buzzwords Web2.0 und Cloud, nicht in den Alltagsgebrauch übergehen wird und somit auch nicht dem kollektiven vergessen anheimfällt, deren visuelle Andersartigkeit aber noch einiges an Staunkapazität bereithält. Stichwort Perspektivwechsel. In den nächsten Episoden werden wir das Grundlagenlabor verlassen und einen Blick auf die realen Verhältnisse im World Wide Web werfen. Vielen Dank fürs einschalten und klicken Sie weiter!

andere Folgen der Blogserie

Ähnliche Artikel

Mit dem einen Bein fest in der Digitalität, das andere im Fahrwasser des Analogen. Bodydouble der Grinsekatze in den Alice im Wunderland Filmen. Überzeugt, dass Gadgets den Menschen nicht besser machen, trotzdem deren Unterhaltungsfaktor nicht unterschätzt. Zum Frühstück mal kross mit Schokocroissant und Kaffee, mal knackig mit Rote Beete Bagel und Mango Lassi. Googled wie ein Boss. Lieblingsyoutubekanal. Lieblingsplatte. Und ganz viele Pandas

Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.