Das Dokument behandelt die Entwicklung des responsiven Webdesigns und die wachsende Bedeutung mobiler Endgeräte. Es zeigt die Veränderungen in der Nutzung von Apps und mobilen Websites, sowie die technischen Anforderungen zur Anpassung von Layouts für verschiedene Bildschirmgrößen. Außerdem wird die Differenzierung zwischen nativen Apps und mobilen Websites hinsichtlich ihrer Vorteile und Funktionen diskutiert.

1. Responsive Web Design
Apps, HTML oder etwas dazwischen?
Frankfurt, 01.02.2012

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

3. … daraus wurden dann diese Geräte.
|

4. 1024 Pixel 1600 Pixel
960 Pixel 960 Pixel
Auflösungen wurden besser… Layouts nicht unbedingt.
|

5. Nutzungsszenarien verändern sich…
|

6. … Endgeräte werden mehr und mehr…
|

7. Mobile Anbieter drängen auf den Markt.
Apple iOS, Google Android, Microsoft
Windows 7, RIM Blackberry, HP webOS…
© pixelpark | 7

8. Eine Prognose
2013: mehr mobile Endgeräte als
Menschen auf der Erde
|

9. Entwicklung der Nutzung
von Google Mail im Jahr 2011
+36%
Abruf der
mobilen Website
-7%
www.gmail.com
© pixelpark | 9

10. Warum eine mobile Website?
Ich will eine App!
© pixelpark | 10

11. 2008
„Wir wollen eine iPhone App.“
© pixelpark | 11

12. 2010
„Wir wollen auch Tablets abecken und
benötigen eine iPad App.“
© pixelpark | 12

13. 2010
„Wir benötigen auch ein Android App.“
© pixelpark | 13

14. 2011
„Tablets… Android… App… äh, Moment
mal…“
© pixelpark | 14

15. Responsive Web Design.
© pixelpark | 15

16. Responsive Web Design.
Ein Backend. Eine Programmiersprache.
Ein grundsätzliches Design.
© pixelpark | 16

17. |

18. |

19. |

20. Was bedeutet das im Detail?
Konzeption/Design Technik
§ Anpassung des Layouts für verschiedene § Verwendung von HTML(5) und CSS3
Bildschirmgrössen - von Desktop bis zu § Einsatz von Media-Queries
Mobilgeräten
§ Hinterlegung von mehreren CSS Varianten
§ Skalierung von Bildern pro Layoutvariante
§ Ausspielung kleiner Bildgrössen für § Fallbacks für ältere oder nicht-konforme
kleinere Endgeräte Browser und Endgeräte
§ Vereinfachung von Seitenelementen für
Mobilnutzung
§ Verbergung nicht-essentieller Elemente
auf kleineren Screens
© pixelpark | 20

21. http://www.chinajahr-koeln.de
© pixelpark | 21

22. © pixelpark | 22

23. |

24. |

25. |

26. Gegenüberstellung von Apps und mobilen Websites
(positive Merkmale)
Native App Mobile Website
§ Tiefgreifender Zugang auf die Hardware § Funktioniert auf unterschiedlichsten
§ Multi-Tasking (Applikation kann im mobilen Endgeräten
Hintergrund laufen) § Direkte Updates möglich (ohne Freigabe-
§ App & In-App Sales (jedoch prozentuale Prozess des Dritt-Anbieters)
Beteiligung an den App-Store z.B. Apple § Echtzeit-Testing auf Funktionalität
mit 30% am Umsatz) § Eine(!) Entwicklungsplattform (kein Adobe
§ Platzierung auf dem Screen des mobilen AIR, Java, Silverlight, Obj-C etc. für native
Endgerät Apps)
© pixelpark | 26

27. Vielen Dank für Ihre Aufmerksamkeit
Frankfurt, 01.02.2012

28. 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.
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
© pixelpark | 28