Responsive Webdesign. Vortrag von Jens Kretschmann im Heinz Nixdorf Museums Forum

Transkript

1 Responsive Webdesign Vortrag von Jens Kretschmann im Heinz Nixdorf Museums Forum Paderborn,

2 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

3 Ursprünglich haben wir für diese Geräte entwickelt p i x e l p a r k 3

4 daraus wurden dann diese Geräte. p i x e l p a r k 4

5 und weitere kamen hinzu. p i x e l p a r k 5

6 Auflösungen wurden besser Layouts nicht unbedingt.

7

8

9

10

11

12 Nutzungsszenarien verändern sich p i x e l p a r k 12

13 Endgeräte werden mehr und mehr. p i x e l p a r k 13

14 Mobile Anbieter drängen auf den Markt: Apple iosgoogle AndroidMicrosoft Windows 8HPwebOSRIM Blackberry

15 2008: Wir wollen eine iphone App.

16 2010: Wir wollen auch Tablets abdecken und benötigen eine ipad App.

17 2010: Wir benötigen auch eine Android App.

18 2011: Tablets Android App äh, Moment mal gibt es nicht eine Lösung für alles?

19 Responsive Web Design. Ein Backend - Eine Programmiersprache - Ein Basisdesign

20 Die Formel für Responsive Webdesign.

21

22 Die meistgenutzten Auflösungen Low Res 1st Generation Smartphones Smartphones ipad Portrait Tablet / Smartphone horizontal Horizontal Tablet Desktop Andere / Retina p i x e l p a r k 22

23

24 Breakpoints und Sonderfälle 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. p i x e l p a r k 24

25

26 Flexible Layoutraster Passt sich automatisch an Der Browser rechnet die Verhältnisse aus p i x e l p a r k 26

27

28 Beispiel für Mostly Fluid Nur Breiten ändern sich Spalten springen nur beim Smartphone nach unten p i x e l p a r k 28

29 p i x e l p a r k 29

30 Beispiel für Column Drop Spalten springen nach unten Sparsam Kaum Anpassungen bei den Proportionen Schrift bleibt nahezu unverändert p i x e l p a r k 30

31 p i x e l p a r k 31

32 Beispiel für Layout Shifter Komplettes Layout passt sich an Positionen und Formate ändern sich Komplex aber konsequent Vielfalt an Möglichkeiten p i x e l p a r k 32

33 p i x e l p a r k 33

34 Beispiel für Tiny Tweaks Spaltenbreite passt sich an Nur bei einspaltigen Layouts geeignet p i x e l p a r k 34

35 p i x e l p a r k 35

36 Beispiel für Off Canvas Nur Ausschnitte Unübersichtlich aber mit der Zeit vom User gelernt p i x e l p a r k 36

37

38

39 Flexibiltät von Bilder 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 p i x e l p a r k 39

40

41 Layout Adaption p i x e l p a r k 41

42 Layout Adaption 2 p i x e l p a r k 42

43 Ideen Die inhaltliche Darstellung der Illustrationen passt sich der Auflösung an: Die Schriftgröße passt sich der Entfernung des Nutzers vom Monitor an (Webcam-Face-Detection) p i x e l p a r k 43

44 Es tauchen immer wieder neue Probleme auf. Externer Content komplexe Tabellen Navigation Flash Flyouts horizontale Navigation Resize Hover Browser p i x e l p a r k 44

45 Warum steht mobile so im Fokus?

46 Mobile überholt den Desktop Mobile Desktop By Morgan Stanley Quelle: Morgan Stanley p i x e l p a r k 46

47 Verbreitung des Internets im Januar 2013 NordAmerika 77% WestEuropa 70% OstEuropa 45% Asien 24% Zentral- und SüdAmerika 36% Afrika 11% Mittlerer Osten 39% Ozeaninen 57% Verbreitung des Internet p i x e l p a r k 47

48 Mobile Verbreitung des Internet im Januar 2013 NordAmerika 77% 100+% Zentral- und SüdAmerika 36% 100+% WestEuropa 70% 100+% Afrika 11% 60% OstEuropa 45% Mittlerer Osten 39% 100+% 100+% Asien 24% Ozeaninen 57% 77% 86% Verbreitung des Internet Mobile Nutzung p i x e l p a r k 48

49 Responsive Web Design wird Apps nicht ablösen.

50 Mobile Website oder Mobile App? Mobile Website Benötigt Internetverbindung Nutzbar durch browsing Inhalte werden konsumiert, wenige Möglichkeiten für Features Nutzbar für alle Devices Mobile App Funktioniert auch offline Muss installiert werden Viele Möglichkeiten zu interagieren Abhängig vom Betriebsystem Schnell Geschwindigkeit Sehr Schnell Angemessen Kosten Kostenintensiv Unwesentlich Prozesse Zeitintensiv p i x e l p a r k 50

51 Responsive Web Design ist immer die richtige Lösung aber nicht immer die Beste.

52 Impressum 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 Bielefeld Tel: Fax: p i x e l p a r k 52