Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
2 likes1,495 views
This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and hoping normal websites work okay on mobile, 2) Creating a separate mobile-optimized site, or 3) Having a single adaptive site that uses techniques like fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then goes into details about techniques for adaptive sites, including viewport meta tags, touch and gesture support, and using device capabilities like geolocation without plugins. It emphasizes that adaptive design is useful not just for mobile but any device.
![touch events
window.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; …](https://image.slidesharecdn.com/ritconf25-04-2011-110424184806-phpapp01/85/mobile-friendly-RIT-Moscow-25-04-2011-72-320.jpg)
Смартфоны и планшетники - mobile-friendly веб-разработка помимо десктопа - RIT++ - Moscow 25.04.2011
- 1. СМАРТФОНЫ И ПЛАНШЕТНИКИ MOBILE-FRIENDLY ВЕБ-РАЗРАБОТКА ПОМИМО ДЕСКТОПА Patrick H. Lauke / RIT++ Conference 2011 / Moscow / 25 April 2011
- 2. mobile web is increasingly important
- 3. we need a website optimised 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
- 9. what exactly is a “mobile device”?
- 12. 3 approaches
- 13. 1. do nothing
- 14. not WAP or text anymore...
- 15. modern mobile browsers work ok with “normal” sites
- 17. “but the mobile context...”
- 18. “Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two separate designs — typically with fewer features for mobile.” www.useit.com/alertbox/mobile-redesign.html
- 19. 2. separate mobile site (m.flickr.com, mobile.mysite.com, ...)
- 20. внимание: browser sniffing photo: http://www.flickr.com/photos/timdorr/2096272747/
- 21. let the user decide: desktop or mobile?
- 27. refactored for small screen, not dumbed down for mobile
- 28. 3. single adaptive site
- 29. nothing new... fluid layout, progressive enhancement, graceful degradation
- 30. 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
- 31. adaptive layouts
- 32. CSS 2.1 Media Types
- 33. Media types all braille embossed handheld print projection screen speech tty tv
- 34. CSS 2.1 Media Types <link rel="stylesheet" ... media="print" href="..."> @import url("...") print; @media print { // insert CSS rules here }
- 35. CSS 3 Media Queries “...the new hotness” Jeffrey Zeldman http://www.zeldman.com/2010/04/08/best-aea-yet/
- 36. CSS 3 Media Queries ● extend concept of CSS 2.1 Media Types ● more granular control of capabilities http://www.w3.org/TR/css3-mediaqueries/
- 37. Media features width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio
- 38. 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 }
- 39. 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 }
- 46. “not a magic bullet...”
- 47. viewport meta
- 48. physical vs virtual pixels
- 50. mobile devices lie (to better serve the user)
- 53. viewport meta suggests sizing to mobile browser
- 54. viewport meta <meta name="viewport" content="width=320"> http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
- 55. Viewport properties width initial-scale height minimum-scale user-scalable maximum-scale
- 61. <meta name="viewport" content="width=550, maximum-scale=1.0">
- 62. CSS Device Adaptation @viewport { width: 320px; zoom: 2.3; user-zoom: fixed; } dev.w3.org/csswg/css-device-adapt Currently only in Opera Mobile 11 with -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
- 63. Viewport properties width / min-width / max-width user-zoom height / min-height / max-height orientation zoom / min-zoom / max-zoom
- 64. @media + @viewport @media screen and (max-device-width: 550px) { @-o-viewport { width: 550px; } } only apply viewport width fixing on small-screen devices
- 65. BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch
- 66. touch interfaces
- 69. no hover on touch devices* *but some devices/browsers fake it
- 71. no focus on touch devices* *only after an actual click
- 72. touch events window.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; …
- 73. progressive enhancement: mouse, keyboard and touch events
- 75. multimedia
- 76. video, audio und canvas without plug-ins (Java / Flash / Silverlight absent from some devices)
- 79. geolocation
- 80. navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
- 81. progressive enhancement: geolocation in addition to other methods (IP address look-up, form, ...)
- 82. online/offline
- 83. application cache, localStorage/sessionStorage, WebSQL, IndexDB
- 84. …and more (work in progress) WebGL, device API, orientation …
- 85. adaptive techniques not just for “mobile”
- 87. 1. do nothing 2. separate mobile site 3. single adaptive site
- 88. Спасибо www.opera.com/developer patrick.lauke@opera.com