Design ist nicht nur wie etwas aussieht oder sich anfühlt ... · „Design ist nicht nur wie etwas...

Responsive Webdesign Vortrag von Jens Kretschmann im Heinz Nixdorf Museums Forum

Paderborn, 28.05.2013

|

„Design ist nicht nur wie etwas aussieht

oder sich anfühlt. Design ist wie es

funktioniert.“

Steve Jobs Interview in der NY Times „The Guts of a new machine“

http://www.nytimes.com/2003/11/30/magazine/30IPOD.html?pagewanted=all

| |

Ursprünglich haben wir für diese Geräte entwickelt…

© p i x e l p a r k 3

| |

… daraus wurden dann diese Geräte ….

© p i x e l p a r k 4

| |

… und weitere kamen hinzu.

© p i x e l p a r k 5

| |

Auflösungen wurden besser… Layouts nicht unbedingt.

| |

| |

| |

|

|

| |

Nutzungsszenarien verändern sich …

© p i x e l p a r k 12

| |

Endgeräte werden mehr und mehr.

© p i x e l p a r k 13

|

Mobile Anbieter drängen auf den Markt:

Apple iOSGoogle AndroidMicrosoft

Windows 8HPwebOSRIM Blackberry

|

2008: Wir wollen eine iPhone App.

|

2010: Wir wollen auch Tablets abdecken

und benötigen eine iPad App.

|

2010: Wir benötigen auch eine

Android App.

|

2011: Tablets… Android… App… äh,

Moment mal … gibt es nicht eine

Lösung für alles?

|

Responsive Web Design.

Ein Backend - Eine Programmiersprache -

Ein Basisdesign

| |

Die Formel für Responsive Webdesign.

|

| |

Low Res

1st Generation Smartphones

Smartphones

iPad

Portrait Tablet / Smartphone horizontal

Horizontal Tablet

Desktop

Andere / Retina

Die meistgenutzten Auflösungen

22 © p i x e l p a r k

| |

| |

3 Major-Breakpoints:

480 Pixel

768 Pixel

1024 Pixel

3 Minor-Breakpoints:

320 Pixel

720 Pixel

900 Pixel

Sonderfälle sind bspw. Marktführer oder Neuentwicklungen.

Breakpoints und Sonderfälle

24 © p i x e l p a r k

| |

| |

Passt sich automatisch an

Der Browser rechnet die Verhältnisse aus

Flexible Layoutraster

26 © p i x e l p a r k

| |

| |

Nur Breiten ändern sich

Spalten springen nur beim Smartphone nach unten

Beispiel für Mostly Fluid

28 © p i x e l p a r k

| | 29 © p i x e l p a r k http://www.antarcticstation.org/

| |

Spalten springen nach unten Sparsam Kaum Anpassungen bei den Proportionen Schrift bleibt nahezu unverändert

Beispiel für Column Drop

30 © p i x e l p a r k

| | 31 © p i x e l p a r k http://weenudge.com/

| |

Komplettes Layout passt sich an

Positionen und Formate ändern sich Komplex aber konsequent Vielfalt an Möglichkeiten

Beispiel für Layout Shifter

32 © p i x e l p a r k

| | 33 © p i x e l p a r k http://www.anderssonwise.com/

| |

Spaltenbreite passt sich an

Nur bei einspaltigen Layouts geeignet

Beispiel für Tiny Tweaks

34 © p i x e l p a r k

| | 35 © p i x e l p a r k

http://futurefriend.ly/

http://info.cern.ch/hypertext/WWW/TheProject.html

| |

Nur Ausschnitte

Unübersichtlich aber mit der Zeit vom User gelernt

Beispiel für Off Canvas

36 © p i x e l p a r k

| |

| |

| |

Bilder sollen, abhängig vom Filesize flexibel bleiben

Size does matter: 100% sehen auf 1024px gut aus, auf 2560px aber nicht mehr

Retina Grafiken

Doppelte Auflösung von niedrigauflösender Grafik mit einem Umrechnungsfaktor von 2

Flexibiltät von Bilder

39 © p i x e l p a r k

| |

| |

Layout Adaption

41 © p i x e l p a r k

| |

Layout Adaption 2

42 © p i x e l p a r k

| |

Die inhaltliche Darstellung der Illustrationen passt sich der Auflösung an:

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

Die Schriftgröße passt sich der Entfernung des Nutzers vom Monitor an (Webcam-Face-Detection)

http://webdesign.maratz.com/lab/responsivetypography/realtime/

Ideen

43 © p i x e l p a r k

| |

Es tauchen immer wieder neue Probleme auf.

44 © p i x e l p a r k

komplexe Tabellen

Flash Navigation

Flyouts horizontale Navigation

Hover Resize

Browser

Externer Content

|

Warum steht „mobile“ so im Fokus?

| |

Mobile überholt den Desktop

Maximierung der Reichweite im Web und auf mobilen

Plattformen

Minimierung der Abhängigkeit von einzelnen Technologie-

Anbietern

46 © p i x e l p a r k

Mobile

Desktop

2007 2014 2008 2009 2010 2011 2012 2013 2015

By Morgan Stanley

Quelle: Morgan Stanley

| |

Verbreitung des Internets im Januar 2013

47 © p i x e l p a r k

NordAmerika

77%

Zentral- und

SüdAmerika

36%

WestEuropa

70%

Afrika

11%

OstEuropa

45%

Ozeaninen

57%

Mittlerer

Osten

39%

Asien

24%

Verbreitung des Internet

| |

Mobile Verbreitung des Internet im Januar 2013

48 © p i x e l p a r k

NordAmerika

77%

Zentral- und

SüdAmerika

36%

WestEuropa

70%

Afrika

11%

Mittlerer

Osten

39%

Asien

24%

OstEuropa

45%

Ozeaninen

57%

100+%

100+%

60%

100+%

100+%

77%

86%

100+%

Verbreitung des Internet Mobile Nutzung

|

Responsive Web Design wird Apps nicht

ablösen.

| |

Mobile Website oder Mobile App?

50 © p i x e l p a r k

Mobile Website Mobile App

Benötigt Internetverbindung

Nutzbar durch browsing

Inhalte werden konsumiert,

wenige Möglichkeiten für

Features

Nutzbar für alle Devices

Funktioniert auch offline

Muss installiert werden

Viele Möglichkeiten zu

interagieren

Abhängig vom Betriebsystem

Geschwindigkeit

Kosten

Prozesse

Schnell Sehr Schnell

Angemessen Kostenintensiv

Unwesentlich Zeitintensiv

|

Responsive Web Design ist immer die

richtige Lösung …

… aber nicht immer die Beste.

| |

Die in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum der

Pixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweise

Vervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung der

Pixelpark AG nicht gestattet.

Jens Kretschmann

Creative Director

Pixelpark Bielefeld GmbH

Walther-Rathenau-Straße 33

33602 Bielefeld

Tel: +49.521.98780-181

Fax: +49.40.34101-149

jens.kretschmann@pixelpark.com

www.pixelpark.com

52

Impressum

© p i x e l p a r k