Your SlideShare is downloading. ×
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1

2,055
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,055
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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. СМАРТФОНЫ И ПЛАНШЕТНИКИMOBILE-FRIENDLY ВЕБ-РАЗРАБОТКА ПОМИМО ДЕСКТОПАPatrick H. Lauke / RIT++ Conference 2011 / Moscow / 25 April 2011
  • 2. mobile web isincreasingly important
  • 3. we need a websiteoptimised for iPhone
  • 4. oh, und another one for the iPad
  • 5. “remove iPhone from ass” Peter-Paul Koch, The iPhone obsession www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
  • 6. sites that work on (almost) all mobile devices
  • 7. what exactly is a“mobile device”?
  • 8. 3 approaches
  • 9. 1. do nothing
  • 10. not WAP or text anymore...
  • 11. modern mobile browserswork ok with “normal” sites
  • 12. “but the mobile context...”
  • 13. “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
  • 14. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
  • 15. внимание: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
  • 16. let the user decide:desktop or mobile?
  • 17. refactored for small screen,not dumbed down for mobile
  • 18. 3. single adaptive site
  • 19. nothing new...fluid layout, progressive enhancement, graceful degradation
  • 20. 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
  • 21. adaptive layouts
  • 22. CSS 2.1 Media Types
  • 23. Media typesall brailleembossed handheldprint projectionscreen speechtty tv
  • 24. CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
  • 25. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
  • 26. CSS 3 Media Queries● extend concept of CSS 2.1 Media Types● more granular control of capabilitieshttp://www.w3.org/TR/css3-mediaqueries/
  • 27. Media featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
  • 28. 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}
  • 29. 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}
  • 30. www.alistapart.com/articles/responsive-web-design
  • 31. http://mediaqueri.es
  • 32. http://mediaqueri.es
  • 33. http://mediaqueri.es
  • 34. http://mediaqueri.es
  • 35. www.themaninblue.com/writing/perspective/2004/09/21
  • 36. “not a magic bullet...”
  • 37. viewport meta
  • 38. physical vs virtual pixels
  • 39. mobile devices lie(to better serve the user)
  • 40. viewport metasuggests sizing to mobile browser
  • 41. viewport meta<meta name="viewport"content="width=320,user-scalable=no">http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  • 42. Viewport propertieswidth initial-scaleheight minimum-scaleuser-scalable maximum-scale
  • 43. <meta name="viewport" content="width=550">
  • 44. <meta name="viewport"content="width=device-width"> +@media screen and (…) { … }
  • 45. 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
  • 46. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom
  • 47. touch interfaces
  • 48. :hoveronmouseover(...)onmouseout(...)
  • 49. no hover ontouch devices**but some devices/browsers fake it
  • 50. :focusonfocus(...) onblur(...)
  • 51. no focus ontouch devices* *only after an actual click
  • 52. 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; …
  • 53. progressive enhancement:mouse, keyboard and touch events
  • 54. multimedia
  • 55. video, audio und canvas without plug-ins(Java / Flash / Silverlight absent from some devices)
  • 56. geolocation
  • 57. 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; ...}
  • 58. progressive enhancement: geolocation in addition to othermethods (IP address look-up, form, ...)
  • 59. online/offline
  • 60. application cache,localStorage/sessionStorage, WebSQL, IndexDB
  • 61. …and more (work in progress) WebGL, device API, orientation …
  • 62. adaptive techniquesnot just for “mobile”
  • 63. twitter.com/#!/stephenhay/status/23350345962889216
  • 64. 1. do nothing2. separate mobile site3. single adaptive site
  • 65. Спасибоwww.opera.com/developer patrick.lauke@opera.com