Embed Size (px)
Citation preview
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
www.pixelpark.com
52
Impressum
© p i x e l p a r k
