Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Conference - München 30.03.2011

2,561 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Conference - München 30.03.2011

  1. 1. Handys und TabletsMOBILE-FRIENDLY WEBENTWICKLUNG JENSEITS DES DESKTOPSPatrick H. Lauke / MobileTech Conference 2011 / München / 30 März 2011
  2. 2. web evangelist bei Opera
  3. 3. mobile web istimmer wichtiger
  4. 4. wir brauchen eine site fürs iPhone
  5. 5. oh, und fürs iPad
  6. 6. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  7. 7. sites die auf (fast) allenmobilen devices laufen
  8. 8. was ist überhaupt ein “mobile device”?
  9. 9. 3 ansätze
  10. 10. 1. nichts tun
  11. 11. nicht mehr nur WAP oder text
  12. 12. moderne mobile browser kommen mit “normalen” sites zurecht
  13. 13. “aber der mobile kontext...”
  14. 14. “Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create twoseparate designs — typically with fewer features for mobile.” www.useit.com/alertbox/mobile-redesign.html
  15. 15. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  16. 16. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  17. 17. lasst den user entscheiden: desktop oder mobile?
  18. 18. “refactored” für kleinere displays, nicht verwässert für “mobile”
  19. 19. 3. einzige adaptive site
  20. 20. nichts neues...fluid layout, progressive enhancement, graceful degradation
  21. 21. The Sage “... accepts the ebb and flow of things, Nurtures them, but does not own them,” Tao Te Ching; 2 Abstraction www.alistapart.com/articles/dao
  22. 22. adaptive layouts
  23. 23. CSS 2 Media Types
  24. 24. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  25. 25. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  26. 26. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  27. 27. CSS 3 Media Queries● erweitern CSS 2.1 Media Types konzept● präzisere kontrolle (nicht nur screen, print...)http://www.w3.org/TR/css3-mediaqueries/
  28. 28. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  29. 29. 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}
  30. 30. Multiple media queries@media screen and (max-width:480px) { // screen device and width < 480px}@media screen and (max-width:980px) { // screen device and width < 980px}@media screen and (min-width:980px) { // screen device and width > 980px}
  31. 31. www.alistapart.com/articles/responsive-web-design
  32. 32. http://mediaqueri.es
  33. 33. http://mediaqueri.es
  34. 34. http://mediaqueri.es
  35. 35. http://mediaqueri.es
  36. 36. “not a magic bullet...”
  37. 37. viewport meta
  38. 38. physische vs virtuelle pixel
  39. 39. viewport metaschlägt dem browser interpretierung vor
  40. 40. 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
  41. 41. <meta name="viewport" content="width=550">
  42. 42. <meta name="viewport"content="width=device-width"> +@media screen and (…) { … }
  43. 43. CSS Device Adaptation@viewport { width: device-width;}@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}dev.w3.org/csswg/css-device-adaptMomentan nur in Opera Mobile 11 beta mit -o- prefixdev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
  44. 44. touch interfaces
  45. 45. :hoveronmouseover(...)onmouseout(...)
  46. 46. kein hover auftouch devices**einige devices “faken” es aber
  47. 47. :focusonfocus(...) onblur(...)
  48. 48. kein focus auftouch devices* *nur nach einem click
  49. 49. touch eventswindow.addEventListener(touchstart, function(e){ … }, true);window.addEventListener(touchmove, function(e){ … }, true);window.addEventListener(touchend, function(e){ … }, true);e.touches[0].pageX; e.touches[0].pageY; …
  50. 50. progressive enhancement:maus, keyboard und touch events
  51. 51. multimedia
  52. 52. video, audio und canvas ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)
  53. 53. geolocation
  54. 54. navigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}
  55. 55. progressive enhancement:geolocation als sahnehäubchen (+ IP look-up, form, ...)
  56. 56. online/offline
  57. 57. application cache,localStorage/sessionStorage, WebSQL, IndexDB
  58. 58. …und mehr (in arbeit)WebGL, device API, orientation …
  59. 59. adaptive technikennicht nur für “mobile”
  60. 60. twitter.com/#!/stephenhay/status/23350345962889216
  61. 61. 1. nichts tun2. separate mobile site3. einzige adaptive site
  62. 62. www.opera.com/developer patrick.lauke@opera.com

×