responsive web design
DESCRIPTION
M-Days 2012 Responsive Web Design - Apps, HTML oder etwas dazwischen? Pixelpark Das Blog der Messe Frankfurt zur Digitalisierung des Geschäftslebens: http://connected.messefrankfurt.com/de/TRANSCRIPT
Responsive Web Design Apps, HTML oder etwas dazwischen?
Frankfurt, 01.02.2012
|
Ursprünglich haben wir für diese Geräte entwickelt…
|
… daraus wurden dann diese Geräte.
|
960 Pixel
1024 Pixel 1600 Pixel
960 Pixel
Auflösungen wurden besser… Layouts nicht unbedingt.
|
Nutzungsszenarien verändern sich…
|
… Endgeräte werden mehr und mehr…
| | 7 © p i x e l p a r k
Mobile Anbieter drängen auf den Markt. Apple iOS, Google Android, Microsoft Windows 7, RIM Blackberry, HP webOS…
|
Eine Prognose
2013: mehr mobile Endgeräte als Menschen auf der Erde
| | 9
Entwicklung der Nutzung von Google Mail im Jahr 2011
© p i x e l p a r k
-7% www.gmail.com
+36% Abruf der mobilen Website
| | 10 © p i x e l p a r k
Warum eine mobile Website? Ich will eine App!
| | 11 © p i x e l p a r k
2008 „Wir wollen eine iPhone App.“
| | 12 © p i x e l p a r k
2010 „Wir wollen auch Tablets abecken und benötigen eine iPad App.“
| | 13 © p i x e l p a r k
2010 „Wir benötigen auch ein Android App.“
| | 14 © p i x e l p a r k
2011 „Tablets… Android… App… äh, Moment mal…“
| | 15 © p i x e l p a r k
Responsive Web Design.
| | 16 © p i x e l p a r k
Responsive Web Design. Ein Backend. Eine Programmiersprache. Ein grundsätzliches Design.
|
|
|
| |
Konzeption/Design § Anpassung des Layouts für verschiedene
Bildschirmgrössen - von Desktop bis zu Mobilgeräten
§ Skalierung von Bildern § Ausspielung kleiner Bildgrössen für
kleinere Endgeräte § Vereinfachung von Seitenelementen für
Mobilnutzung § Verbergung nicht-essentieller Elemente
auf kleineren Screens
Technik § Verwendung von HTML(5) und CSS3 § Einsatz von Media-Queries § Hinterlegung von mehreren CSS Varianten
pro Layoutvariante § Fallbacks für ältere oder nicht-konforme
Browser und Endgeräte
20
Was bedeutet das im Detail?
© p i x e l p a r k
| | 21 © p i x e l p a r k
http://www.chinajahr-koeln.de
| | 22 © p i x e l p a r k
|
|
|
| |
Native App § Tiefgreifender Zugang auf die Hardware § Multi-Tasking (Applikation kann im
Hintergrund laufen) § App & In-App Sales (jedoch prozentuale
Beteiligung an den App-Store z.B. Apple mit 30% am Umsatz)
§ Platzierung auf dem Screen des mobilen Endgerät
Mobile Website § Funktioniert auf unterschiedlichsten
mobilen Endgeräten § Direkte Updates möglich (ohne Freigabe-
Prozess des Dritt-Anbieters) § Echtzeit-Testing auf Funktionalität § Eine(!) Entwicklungsplattform (kein Adobe
AIR, Java, Silverlight, Obj-C etc. für native Apps)
26
Gegenüberstellung von Apps und mobilen Websites (positive Merkmale)
© p i x e l p a r k
Vielen Dank für Ihre Aufmerksamkeit
Frankfurt, 01.02.2012
| |
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.
Dirk Krause Director Innovation Management Pixelpark AG Cäcilienkloster 2 D-50676 Köln
Tel: +49.221.951515-72 Fax: +49.221.951515-66 [email protected]
www.pixelpark.com
28
Impressum
© p i x e l p a r k