• Save
Responsive Web Design (MDays)
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design (MDays)

on

  • 5,010 views

 

Statistics

Views

Total Views
5,010
Views on SlideShare
2,622
Embed Views
2,388

Actions

Likes
7
Downloads
0
Comments
0

5 Embeds 2,388

http://www.pixelpark.com 2177
http://collabor.idv.edu 194
https://madsack.instawiki.com 15
http://accessibility_checker.siteimprove.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design (MDays) Responsive Web Design (MDays) Presentation Transcript

  • 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 nicht unbedingt. |
  • 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… © pixelpark | 7
  • Eine Prognose2013: mehr mobile Endgeräte alsMenschen auf der Erde |
  • Entwicklung der Nutzungvon Google Mail im Jahr 2011 +36% Abruf der mobilen Website -7% www.gmail.com © pixelpark | 9
  • 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. © pixelpark | 16
  • |
  • |
  • |
  • 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
  • http://www.chinajahr-koeln.de © pixelpark | 21
  • © pixelpark | 22
  • |
  • |
  • |
  • 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
  • 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 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