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
}

40. www.alistapart.com/articles/responsive-web-design

41. http://mediaqueri.es

42. http://mediaqueri.es

43. http://mediaqueri.es

44. http://mediaqueri.es

45. www.themaninblue.com/writing/perspective/2004/09/21

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

56. <meta name="viewport" content="width=480">

59. <meta name="viewport" content="width=550">

60. <meta name="viewport" content="width=550">

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

67. :hover
onmouseover(...)
onmouseout(...)

69. no hover on
touch devices*
*but some devices/browsers fake it

70. :focus
onfocus(...)
onblur(...)

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)

78. www.splintered.co.uk/experiments/archives/paranoid_0.3

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”

86. twitter.com/#!/stephenhay/status/23350345962889216

87. 1. do nothing
2. separate mobile site
3. single adaptive site

88. Спасибо
www.opera.com/developer
patrick.lauke@opera.com