responsive web design

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 dirk.krause@pixelpark.com

www.pixelpark.com

28

Impressum

© p i x e l p a r k