Webdesign Trends 2013 - Responsive & Parallax Scrolling

31.10.2013 von

Die ersten beiden Teile dieser Serie über Webtrends behandelten die Relevanz von Inhalt & Grid- bzw Metro-Design sowie Flat Design & große Videoheader. Im letzten Teil wird es dieses Mal um Responsive Design und Parallax Scrolling gehen. 

Responsive Design

Wenn eines in dieser Serie nicht fehlen darf, dann wohl Responsive Design. Mit dem Unterschied zwischen Responsive Design und Mobile Web Design habe ich mich bereits vor kurzem befasst. Wenn ihr die Unterschiede noch einmal auf einen Blick haben möchtet, findet ihr hier eine Infografik dazu. 

Die Nutzung von mobilem Internet im Vergleich zu der Nutzung an einem Desktop-Computer ist in den letzten Jahres rasant gestiegen. Die Zahl von Menschen die Inhalte z.B. über ihr Smartphone abrufen wird mit der steigenden Zahl verkaufter Geräte in den kommenden Jahren nur noch weiter steigen.

Mit der Entwicklung von mobilem Internet hatte ich mich bereits Anfang des Jahres beschäftigt. Den dazugehörigen Blogartikel findest du hier.

Auszug aus der Infografik “State of Mobile 2013”

(Auszug aus der Infografik “State of Mobile 2013”. Hier in voller Länge.)

Deshalb ist es nicht nur ein Trend, sondern eine notwendige Entwicklung Websites so zu gestalten, dass sie sich flexibel an die Auflösung des Geräts anpassen, mit dem wir sie aufrufen.

Auch bei unserer eigenen Website smooster.com haben wir auf Responsive Design geachtet.

smooster.com in Responsive Design

Die Desktopversion in der gewohnten Darstellung


smooster.com in Responsive Design auf einem Smartphone

In der Smartphoneversion blenden wir die großen Bilder aus. 


Wie bei vielen Entwicklungen wird es auch hier noch einige Zeit dauern, bis es sich durchsetzt, Websites direkt als Responsive Design zu planen. Die folgenden Beispiele zeigen aber schon einmal wie flexibles Design aussehen kann.


Awwwards

Responsive Design: Awwwards in der Desktopansicht

Responsive Design: Awwwards in der mobilen Ansicht


Cafe Evoke

Responsive Design: Cafe Evoke in der Desktopansicht

Responsive Design: Cafe Evoke in der mobilen Ansicht

Food Sense

Responsive Design: Food Sense in der Desktopansicht

Responsive Design: Food Sense in der mobilen Ansicht


Sunday Best Designs

Responsive Design: Sunday Best Designs in der Desktopansicht

Responsive Design: Sunday Best Designs in der mobile Ansicht


Suruga Bank ANA

Responsive Design: Suruga Bank ANA in der Desktopansicht

Responsive Design: Suruga Bank ANA in der mobilen Ansicht


Coiney

Responsive Design: Coiney in der Desktopansicht

Responsive Design: Coiney in der mobilen Ansicht


Parallax Scrolling

Parallax Scrolling ist eine Art der Darstellung bei der der Hintergrund sich langsamer bewegt als die Elemente im Vordergrund. So entsteht für den Betrachter ein 3D-Effekt, wenn er die Seite herunter scrollt.

Ursprünglich wurde diese Technik in 2D Videospielen verwendet, um einen Eindruck von Tiefe zu erzeugen. Dank neuer technischer Möglichkeiten wie HTML5 und CSS3, ist es jetzt möglich diesen Effekt auf Websites zu reproduzieren. Weil durch das Scrollen ein linearer Ablauf entsteht, wird Parallax Scrolling oft verwendet, um den Benutzer mit einer Geschichte durch die Website zu führen.

Parallax Scrolling kann bei passender Anwendung die Navigation und das Verständnis einer Seite erhöhen. Es sollte jedoch nicht nur als Gimmick verwendet oder übermäßig eingesetzt werden, da es den Betrachter sonst auch leicht abschrecken kann. Außerdem unterstützen leider noch nicht alle Browser Parallax Scrolling.


Ichiman Nen No Shizuku

Bei dieser Seite ist die Parallax Effekt nur im Header zu sehen.


Cultural Solutions

Der Parallax Effekt wurde auf die bunten Kreise im Hintergrund angewandt.


Miho Kindergarten

Der Kindergarten erzählt mithilfe von Parallax Scrolling eine Geschichte.


Kirin Ichiban

Hier wird Parallax Scrolling verwendet um Emotionen für eine Biermarke zu kreieren.


Tokyo Towers

Diese Seite verwendet Parallax Scrolling um Bilder und dazu passende Erinnerungen zu verbinden.


Manufacture Dessai

Hier wird mit Parallax Scrolling Mode präsentiert.


Nissin UFO

Parallax Scrolling wird wie hier gerne verwendet um einen Comiceffekt zu erzeugen.


Tokyo Skytree

Mit Parallax Scrolling kann der Turm und Informationen dazu betrachtet werden.


Isetan Yukata

Der Modehersteller präsentiert die Kollektion mit Parallax Scrolling.


Quellen:

Webdesignledger: 24 Excellent Examples of Responsive Web Design
Socialdriver: 50 Best Responsive Website Design Examples of 2013
http://muuuuu.org/category/taglist/parallax 

zurück
comments powered by Disqus