Responsive Web DesignApps, HTML oder etwas dazwischen?Frankfurt, 01.02.2012
Ursprünglich haben wir für diese Geräte entwickelt…                                                      |
… daraus wurden dann diese Geräte.                                     |
1024 Pixel             1600 Pixel             960 Pixel                    960 PixelAuflösungen wurden besser… Layouts nic...
Nutzungsszenarien verändern sich…                                    |
… Endgeräte werden mehr und mehr…                                    |
Mobile Anbieter drängen auf den Markt.Apple iOS, Google Android, MicrosoftWindows 7, RIM Blackberry, HP webOS…            ...
Eine Prognose2013: mehr mobile Endgeräte alsMenschen auf der Erde                                  |
Entwicklung der Nutzungvon Google Mail im Jahr 2011                               +36%                               Abruf...
Warum eine mobile Website?Ich will eine App!                             © pixelpark   |   10
2008„Wir wollen eine iPhone App.“                                © pixelpark   |   11
2010„Wir wollen auch Tablets abecken undbenötigen eine iPad App.“                                   © pixelpark   |   12
2010„Wir benötigen auch ein Android App.“                                    © pixelpark   |   13
2011„Tablets… Android… App… äh, Momentmal…“                               © pixelpark   |   14
Responsive Web Design.                         © pixelpark   |   15
Responsive Web Design.Ein Backend. Eine Programmiersprache.Ein grundsätzliches Design.                                 © p...
|
|
|
Was bedeutet das im Detail?Konzeption/Design                            Technik§  Anpassung des Layouts für verschiedene ...
http://www.chinajahr-koeln.de                                © pixelpark   |   21
© pixelpark   |   22
|
|
|
Gegenüberstellung von Apps und mobilen Websites(positive Merkmale)Native App                                    Mobile Web...
Vielen Dank für Ihre AufmerksamkeitFrankfurt, 01.02.2012
ImpressumDie in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derPixelpark AG und unter...
Upcoming SlideShare
Loading in...5
×

Responsive Web Design

1,210

Published on

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/

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,210
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web DesignApps, HTML oder etwas dazwischen?Frankfurt, 01.02.2012
  2. 2. Ursprünglich haben wir für diese Geräte entwickelt… |
  3. 3. … daraus wurden dann diese Geräte. |
  4. 4. 1024 Pixel 1600 Pixel 960 Pixel 960 PixelAuflösungen wurden besser… Layouts nicht unbedingt. |
  5. 5. Nutzungsszenarien verändern sich… |
  6. 6. … Endgeräte werden mehr und mehr… |
  7. 7. Mobile Anbieter drängen auf den Markt.Apple iOS, Google Android, MicrosoftWindows 7, RIM Blackberry, HP webOS… © pixelpark | 7
  8. 8. Eine Prognose2013: mehr mobile Endgeräte alsMenschen auf der Erde |
  9. 9. Entwicklung der Nutzungvon Google Mail im Jahr 2011 +36% Abruf der mobilen Website -7% www.gmail.com © pixelpark | 9
  10. 10. Warum eine mobile Website?Ich will eine App! © pixelpark | 10
  11. 11. 2008„Wir wollen eine iPhone App.“ © pixelpark | 11
  12. 12. 2010„Wir wollen auch Tablets abecken undbenötigen eine iPad App.“ © pixelpark | 12
  13. 13. 2010„Wir benötigen auch ein Android App.“ © pixelpark | 13
  14. 14. 2011„Tablets… Android… App… äh, Momentmal…“ © pixelpark | 14
  15. 15. Responsive Web Design. © pixelpark | 15
  16. 16. Responsive Web Design.Ein Backend. Eine Programmiersprache.Ein grundsätzliches Design. © pixelpark | 16
  17. 17. |
  18. 18. |
  19. 19. |
  20. 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. 21. http://www.chinajahr-koeln.de © pixelpark | 21
  22. 22. © pixelpark | 22
  23. 23. |
  24. 24. |
  25. 25. |
  26. 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. 27. Vielen Dank für Ihre AufmerksamkeitFrankfurt, 01.02.2012
  28. 28. ImpressumDie in dieser Präsentation erarbeiteten Gedanken und Vorschläge sind geistiges Eigentum derPixelpark AG und unterliegen dem geltenden Urheberrecht. Die ganze oder teilweiseVervielfältigung sowie jede Weitergabe an Dritte ist ohne schriftliche Genehmigung derPixelpark AG nicht gestattet.Dirk KrauseDirector Innovation ManagementPixelpark AGCäcilienkloster 2D-50676 KölnTel: +49.221.951515-72Fax: +49.221.951515-66dirk.krause@pixelpark.comwww.pixelpark.com © pixelpark | 28
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×