Your SlideShare is downloading. ×
  • Like
Handys und Tablets - Webentwicklung jenseits des Desktops - MobileTech Conference - München 30.03.2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,132 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,132
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
16
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Handys und TabletsMOBILE-FRIENDLY WEBENTWICKLUNG JENSEITS DES DESKTOPSPatrick H. Lauke / MobileTech Conference 2011 / München / 30 März 2011
  • 2. web evangelist bei Opera
  • 3. mobile web istimmer wichtiger
  • 4. wir brauchen eine site fürs iPhone
  • 5. oh, und fürs iPad
  • 6. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  • 7. sites die auf (fast) allenmobilen devices laufen
  • 8. was ist überhaupt ein “mobile device”?
  • 9. 3 ansätze
  • 10. 1. nichts tun
  • 11. nicht mehr nur WAP oder text
  • 12. moderne mobile browser kommen mit “normalen” sites zurecht
  • 13. “aber der mobile kontext...”
  • 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. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 16. vorsicht: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 17. lasst den user entscheiden: desktop oder mobile?
  • 18. “refactored” für kleinere displays, nicht verwässert für “mobile”
  • 19. 3. einzige adaptive site
  • 20. nichts neues...fluid layout, progressive enhancement, graceful degradation
  • 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. adaptive layouts
  • 23. CSS 2 Media Types
  • 24. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  • 25. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  • 26. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  • 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. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 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. 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. www.alistapart.com/articles/responsive-web-design
  • 32. http://mediaqueri.es
  • 33. http://mediaqueri.es
  • 34. http://mediaqueri.es
  • 35. http://mediaqueri.es
  • 36. “not a magic bullet...”
  • 37. viewport meta
  • 38. physische vs virtuelle pixel
  • 39. viewport metaschlägt dem browser interpretierung vor
  • 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. <meta name="viewport" content="width=550">
  • 42. <meta name="viewport"content="width=device-width"> +@media screen and (…) { … }
  • 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. touch interfaces
  • 45. :hoveronmouseover(...)onmouseout(...)
  • 46. kein hover auftouch devices**einige devices “faken” es aber
  • 47. :focusonfocus(...) onblur(...)
  • 48. kein focus auftouch devices* *nur nach einem click
  • 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. progressive enhancement:maus, keyboard und touch events
  • 51. multimedia
  • 52. video, audio und canvas ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)
  • 53. geolocation
  • 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. progressive enhancement:geolocation als sahnehäubchen (+ IP look-up, form, ...)
  • 56. online/offline
  • 57. application cache,localStorage/sessionStorage, WebSQL, IndexDB
  • 58. …und mehr (in arbeit)WebGL, device API, orientation …
  • 59. adaptive technikennicht nur für “mobile”
  • 60. twitter.com/#!/stephenhay/status/23350345962889216
  • 61. 1. nichts tun2. separate mobile site3. einzige adaptive site
  • 62. www.opera.com/developer patrick.lauke@opera.com