This document discusses approaches to mobile-friendly web development beyond just desktop websites. It outlines three main approaches: 1) Doing nothing and relying on modern mobile browsers to render normal sites, 2) Creating a separate mobile site with a subdomain or folder, and 3) Having a single adaptive site that uses fluid layouts, responsive design, and CSS media queries to dynamically adapt to different screen sizes and devices. The document then covers various techniques for adaptive design, including viewport meta tags, touch and gesture support, multimedia without plugins, geolocation, and offline capabilities.

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)

51. viewport meta
suggests sizing to mobile browser

52. viewport meta
<meta name="viewport"
content="width=320,user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

53. Viewport properties
width initial-scale
height minimum-scale
user-scalable maximum-scale

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

58. <meta name="viewport"
content="width=device-width">
+
@media screen and (…) { … }

59. CSS Device Adaptation
@viewport {
width: device-width;
}
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
dev.w3.org/csswg/css-device-adapt
Momentan nur in Opera Mobile 11 beta mit -o- prefix
dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport

60. Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom

61. touch interfaces

62. :hover
onmouseover(...)
onmouseout(...)

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

65. :focus
onfocus(...)
onblur(...)

66. no focus on
touch devices*
*only after an actual click

67. 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; …

68. progressive enhancement:
mouse, keyboard and touch events

70. multimedia

71. video, audio und canvas
without plug-ins
(Java / Flash / Silverlight absent from some devices)

73. geolocation

74. 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;
...
}

75. progressive enhancement:
geolocation in addition to other
methods (IP address look-up, form, ...)

76. online/offline

77. application cache,
localStorage/sessionStorage,
WebSQL, IndexDB

78. …and more (work in progress)
WebGL, device API, orientation …

79. adaptive techniques
not just for “mobile”

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

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

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