Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
Ähnlich wie Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011 (20)
Mehr von Patrick Lauke
Mehr von Patrick Lauke (20)
Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011
- 1. webseiten für mobile geräte PATRICK H. LAUKE / OPERA SOFTWARE Patrick H. Lauke / M-Days / Frankfurt / 27 Januar 2011
- 2. web evangelist bei Opera
- 3. Opera – one browser on many devices
- 4. </werbung>
- 5. mobile web ist immer wichtiger
- 6. wir brauchen eine site für's iPhone
- 7. oh, und für's iPad
- 8. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
- 9. sites die auf (fast) allen mobilen devices laufen
- 11. was ist überhaupt ein “mobile device”?
- 12. 3 ansätze
- 13. 1. nichts tun
- 14. nicht mehr nur WAP oder text
- 15. moderne mobile browser kommen mit “normalen” sites zurecht
- 18. “aber der mobile kontext...”
- 19. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
- 20. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
- 21. lasst den user entscheiden: desktop oder mobile?
- 30. “refactored” für kleine displays, nicht verwässert für handys
- 31. 3. einzige adaptive site
- 32. nichts neues... fluid layout, progressive enhancement, graceful degradation
- 33. CSS 2 Media Types (screen, print, handheld)
- 34. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
- 35. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
- 36. CSS 3 Media Queries ● erweitern CSS 2.1 Media Types konzept ● präzisere kontrolle (nicht nur screen, print...) ● width, height, orientation, color, resolution, … http://www.w3.org/TR/css3-mediaqueries/
- 37. CSS 3 Media Queries <link rel="stylesheet" ... media="screen and (max-width:480px)" href="..."> @import url("...") screen and (max-width:480px); @media screen and (max-width:480px) { // insert CSS rules here }
- 45. viewport meta
- 46. physiche vs virtuelle pixel
- 48. viewport meta schlägt dem browser interpretierung vor
- 49. viewport meta <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320, initial- scale=2.3,user-scalable=no"> http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
- 53. generelle tips “best practices” auf mobile umso wichtiger
- 55. daten und server requests minimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)
- 56. CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites
- 57. width: 50px; height: 50px; background: url(icons.gif) no-repeat -51px 0;
- 61. video, audio und canvas ohne “steck-eins” (kein Java / Flash / Silverlight auf mobilen geräten)
- 63. geolocation navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
- 67. offline applications application cache, localStorage/sessionStorage, IndexDB
- 68. …und mehr (in arbeit) WebGL, <device>, DAP …
- 69. 1. nichts tun 2. separate mobile site 3. einzige adaptive site
- 70. www.opera.com/developer patrick.lauke@opera.com people.opera.com/patrickl/presentations/m-days_27.01.2011/m-days_27.01.2011