СМАРТФОНЫ И ПЛАНШЕТНИКИMOBILE-FRIENDLY ВЕБ-РАЗРАБОТКА ПОМИМО ДЕСКТОПАPatrick H. Lauke / RIT++ Conference 2011 / Moscow / 2...
mobile web isincreasingly important
we need a websiteoptimised for iPhone
oh, und another one    for the iPad
“remove iPhone from ass” Peter-Paul Koch, The iPhone obsession       www.quirksmode.org/blog/archives/2010/02/the_iphone_o...
sites that work on (almost)    all mobile devices
what exactly is a“mobile device”?
3 approaches
1. do nothing
not WAP or text anymore...
modern mobile browserswork ok with “normal” sites
“but the mobile context...”
“Desktop computers and mobile devices are so different that  the only way to offer a great user experience is to create tw...
2. separate mobile site  (m.flickr.com, mobile.mysite.com, ...)
внимание: browser sniffing      photo: http://www.flickr.com/photos/timdorr/2096272747/
let the user decide:desktop or mobile?
refactored for small screen,not dumbed down for mobile
3. single adaptive site
nothing new...fluid layout, progressive enhancement, graceful degradation
The Sage “... accepts the ebb and flow of things,    Nurtures them, but does not own them,”               Tao Te Ching; 2 ...
adaptive layouts
CSS 2.1 Media Types
Media typesall           brailleembossed      handheldprint         projectionscreen        speechtty           tv
CSS 2.1 Media Types<link rel="stylesheet" ...media="print" href="...">@import url("...") print;@media print {  // insert C...
CSS 3 Media Queries   “...the new hotness” Jeffrey Zeldman      http://www.zeldman.com/2010/04/08/best-aea-yet/
CSS 3 Media Queries● extend concept of CSS 2.1 Media Types● more granular control of capabilitieshttp://www.w3.org/TR/css3...
Media featureswidth                 colorheight                color-indexdevice-width          monochromedevice-height   ...
CSS 3 Media Queries<link rel="stylesheet" ...media="screen and (max-width:480px)" href="...">@import url("...") screen and...
Multiple media queries@media screen and (max-width:480px) {  // screen device and width < 480px}@media screen and (max-wid...
www.alistapart.com/articles/responsive-web-design
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
www.themaninblue.com/writing/perspective/2004/09/21
“not a magic bullet...”
viewport meta
physical vs virtual pixels
mobile devices lie(to better serve the user)
viewport metasuggests sizing to mobile browser
viewport meta<meta name="viewport"content="width=320,user-scalable=no">http://developer.apple.com/safari/library/documenta...
Viewport propertieswidth                 initial-scaleheight                minimum-scaleuser-scalable         maximum-scale
<meta name="viewport" content="width=550">
<meta name="viewport"content="width=device-width">              +@media screen and (…) { … }
CSS Device Adaptation@viewport {  width: device-width;}@viewport {  width: 320px;  zoom: 2.3;  user-zoom: fixed;}dev.w3.or...
Viewport propertieswidth / min-width / max-width      user-zoomheight / min-height / max-height   orientationzoom / min-zo...
touch interfaces
:hoveronmouseover(...)onmouseout(...)
no hover ontouch devices**but some devices/browsers fake it
:focusonfocus(...) onblur(...)
no focus ontouch devices* *only after an actual click
touch eventswindow.addEventListener(touchstart, function(e){ … }, true);window.addEventListener(touchmove, function(e){ … ...
progressive enhancement:mouse, keyboard and touch events
multimedia
video, audio und canvas    without plug-ins(Java / Flash / Silverlight absent from some devices)
geolocation
navigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);functi...
progressive enhancement:   geolocation in addition to othermethods (IP address look-up, form, ...)
online/offline
application cache,localStorage/sessionStorage,     WebSQL, IndexDB
…and more (work in progress) WebGL, device API, orientation …
adaptive techniquesnot just for “mobile”
twitter.com/#!/stephenhay/status/23350345962889216
1. do nothing2. separate mobile site3. single adaptive site
Спасибоwww.opera.com/developer   patrick.lauke@opera.com
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
смартфоны и планшетники. веб разработка помимо десктопа. Patrick h. lauke. зал 1
Upcoming SlideShare
Loading in...5
×

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

2,099

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,099
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×