СМАРТФОНЫ И ПЛАНШЕТНИКИ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">http://developer.apple.com/safari/library/documentation/AppleApplic...
Viewport propertieswidth                 initial-scaleheight                minimum-scaleuser-scalable         maximum-scale
<meta name="viewport" content="width=480">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550,           maximum-scale=1.0">
CSS Device Adaptation@viewport {  width: 320px;  zoom: 2.3;  user-zoom: fixed;}dev.w3.org/csswg/css-device-adaptCurrently ...
Viewport propertieswidth / min-width / max-width      user-zoomheight / min-height / max-height   orientationzoom / min-zo...
@media + @viewport@media screen and (max-device-width: 550px) {    @-o-viewport {        width: 550px;    }}only apply vie...
BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch
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)
www.splintered.co.uk/experiments/archives/paranoid_0.3
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
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
Upcoming SlideShare
Loading in …5
×

Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011

4,360 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,360
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011

  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">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=480">
  44. 44. <meta name="viewport" content="width=550">
  45. 45. <meta name="viewport" content="width=550">
  46. 46. <meta name="viewport" content="width=550, maximum-scale=1.0">
  47. 47. CSS Device Adaptation@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}dev.w3.org/csswg/css-device-adaptCurrently only in Opera Mobile 11 with -o- prefixdev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
  48. 48. Viewport propertieswidth / min-width / max-width user-zoomheight / min-height / max-height orientationzoom / min-zoom / max-zoom
  49. 49. @media + @viewport@media screen and (max-device-width: 550px) { @-o-viewport { width: 550px; }}only apply viewport width fixing on small-screen devices
  50. 50. BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch
  51. 51. touch interfaces
  52. 52. :hoveronmouseover(...)onmouseout(...)
  53. 53. no hover ontouch devices**but some devices/browsers fake it
  54. 54. :focusonfocus(...) onblur(...)
  55. 55. no focus ontouch devices* *only after an actual click
  56. 56. 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; …
  57. 57. progressive enhancement:mouse, keyboard and touch events
  58. 58. multimedia
  59. 59. video, audio und canvas without plug-ins(Java / Flash / Silverlight absent from some devices)
  60. 60. www.splintered.co.uk/experiments/archives/paranoid_0.3
  61. 61. geolocation
  62. 62. 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; ...}
  63. 63. progressive enhancement: geolocation in addition to othermethods (IP address look-up, form, ...)
  64. 64. online/offline
  65. 65. application cache,localStorage/sessionStorage, WebSQL, IndexDB
  66. 66. …and more (work in progress) WebGL, device API, orientation …
  67. 67. adaptive techniquesnot just for “mobile”
  68. 68. twitter.com/#!/stephenhay/status/23350345962889216
  69. 69. 1. do nothing2. separate mobile site3. single adaptive site
  70. 70. Спасибоwww.opera.com/developer patrick.lauke@opera.com

×