1. Handys und Tablets
WEBENTWICKLUNG JENSEITS DES DESKTOPS
Patrick H. Lauke / WebTech Conference / 12 October 2011

2. web evangelist bei Opera

3. mobile web ist
immer wichtiger

4. wir brauchen eine site
für's iPhone

5. oh, und für's iPad

6. “remove iPhone from ass”
Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

8. </werbung>

9. sites die auf (fast) allen
mobilen devices laufen

10. was ist überhaupt ein
“mobile device”?

12. 3 ansätze

13. 1. nichts tun

14. nicht mehr nur WAP oder text

15. moderne mobile browser
kommen mit
“normalen” sites zurecht

19. there's an app for that...

20. “aber der mobile kontext...”

21. “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

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

23. 2. separate mobile site
(m.flickr.com, mobile.mysite.com, ...)

24. vorsicht: browser sniffing
photo: http://www.flickr.com/photos/timdorr/2096272747/

25. Opera/9.80 (Android; Linux; Opera Mobi/18187; U; en)
Presto/2.8.149 Version/11.10
was bin ich?

26. lasst den user entscheiden:
desktop oder mobile?

35. “refactored” für kleine displays,
nicht verwässert für handys

36. 3. einzige adaptive site

37. nichts neues...
fluid layout, progressive enhancement, graceful degradation

38. 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

39. was unterscheidet
“desktop” von “mobile”?

40. wie unterscheiden sich
verschiedene devices?

41. 1. input mechanismen
2. displaygrösse

42. 1. input mechanismen
2. displaygrösse

43. mouse / keyboard / touch

44. touch interfaces

47. kein hover auf
touch devices*
*nicht ganz wahr

48. :hover, :focus
onmouseover(...), onfocus(...)
onmouseout(...), onblur(...)

49. kein focus auf
touch devices*
*nur nach einem click

50. mouseover > mousemove > mousedown >
(focus) > mouseup > click

51. http://developer.apple.com/library/IOS/...

52. Touch events
touchstart touchenter
touchmove touchleave
touchend touchcancel
www.w3.org/TR/touch-events

53. touch events
blah.addEventListener('touchstart', function(e){ … }, true);
blah.addEventListener('touchmove', function(e){ … }, true);
blah.addEventListener('touchend', function(e){ … }, true);
var hazTouch = 'ontouchstart' in window || 'onMozTouchDown' in
window || 'createTouch' in document;
if (hazTouch) { … }

54. interface TouchEvent : UIEvent {
readonly attribute TouchList touches;
readonly attribute TouchList targetTouches;
readonly attribute TouchList changedTouches;
readonly attribute boolean altKey;
readonly attribute boolean metaKey;
readonly attribute boolean ctrlKey;
readonly attribute boolean shiftKey;
readonly attribute EventTarget relatedTarget;
};

55. interface Touch {
readonly attribute long identifier;
readonly attribute long screenX;
readonly attribute long screenY;
readonly attribute long clientX;
readonly attribute long clientY;
readonly attribute long pageX;
readonly attribute long pageY;
…
};

56. e.touches[0].pageX; e.touches[0].pageY; …

57. www.splintered.co.uk/experiments/archives/paranoid_0.4/

58. www.splintered.co.uk/experiments/archives/paranoid_0.4/

59. blah.addEventListener('touchstart', function(e){
…
e.preventDefault(); /* stop gestures, scrolling, context */
}, true);

61. proprietary touch events
Mobile Safari: gesturestart, gesturechange, gestureend
developer.apple.com/library/IOS/...
IE10: MSPointerDown, MSPointerMove, MSPointerUp,
MSPointerOver, MSPointerOut
msdn.microsoft.com/en-us/ie/hh272903.aspx#_DOMTouch

62. 1. input mechanismen
2. displaygrösse

63. CSS 2 Media Types

64. Media types
all braille
embossed handheld
print projection
screen speech
tty tv

65. CSS 2.1 Media Types
<link rel="stylesheet" ...
media="print" href="...">
@import url("...") print;
@media print {
// insert CSS rules here
}

66. CSS 3 Media Queries
“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/

67. CSS 3 Media Queries
● erweitern CSS 2.1 Media Types konzept
● präzisere kontrolle (nicht nur screen, print...)
http://www.w3.org/TR/css3-mediaqueries/

68. Media features
width color
height color-index
device-width monochrome
device-height resolution
orientation scan
aspect-ratio grid
device-aspect-ratio

69. 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
}

70. Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-
width:480px) {
// screen device and width > 180px
// and width < 480px
}

71. Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}

72. Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}

73. Negative expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}

74. Multiple media queries
/* “The absence of a media query is the first
media query” Bryan Rieger */
@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
}

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

76. Responsive Web Design (RWD)
fluid grid + fluid images + media queries

77. bostonglobe.com

80. http://mediaqueri.es

81. http://mediaqueri.es

82. http://mediaqueri.es

83. http://mediaqueri.es

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

85. “not a magic bullet...”

86. ungelöste probleme…

87. viewport meta

88. physiche vs virtuelle pixel

90. mobile devices lügen

94. viewport meta
schlägt dem browser interpretierung vor

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

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

97. <meta name="viewport"
content="width=device-width">

100. high-dpi devices lügen
zweimal

101. <meta name="viewport"
content="width=device-width,
target-densitydpi=device-dpi">

105. confused?
“kleines” Fallbeispiel

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

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

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

111. <meta name="viewport"
content="width=550,maximum-scale=1.0">

112. <meta name="viewport"
content="width=550,maximum-scale=1.0,
target-densitydpi=device-dpi">

113. maximum-scale=1.0
verhindert zooming!

114. JavaScript ansätze, um selektiv
meta viewport zu modifizieren...argh!

115. @viewport {
width: device-width;
}
@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
www.w3.org/TR/css-device-adapt

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

117. <meta name="viewport" content="width=550">
@-o-viewport {
width: 550px;
}

118. <meta name="viewport"
content="width=550,maximum-scale=1.0,
target-densitydpi=device-dpi">
@-o-viewport {
width: 550px;
max-zoom: 1;
resolution: device;
}

119. /* selektiver viewport per CSS */
@media … {
@-o-viewport {
…
}
}

120. <meta name="viewport" content="width=550,maximum-
scale=1.0,target-densitydpi=device-dpi">
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}

124. still confused?
ihr seid nicht allein...
#headfuck

125. ungelöste probleme…

126. Responsive Web Design (RWD)
fluid grid + fluid images + media queries

127. /* fluid image based on parent container */
img { width:100%; }

128. http://adaptive-images.com

129. mit HTML5 in die Zukunft...

130. video, audio und canvas
ohne “steck-eins”
(kein Java / Flash / Silverlight auf mobilen geräten)

132. geolocation
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;
...
}

133. offline applications
application cache,
localStorage/sessionStorage, IndexDB

134. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

135. 1. nichts tun
2. separate mobile site
3. einzige adaptive site

136. http://futurefriend.ly

137. www.opera.com/developer
patrick.lauke@opera.com