Weird Browsers @ Webworker NRW

Want to see a video of an earlier version of this presentation:
https://www.youtube.com/watch?v=ojGIva5801I

Ever since the web has conquered the desktop, people have been trying to bring it to other devices. Everything from microwaves and fridges to cars. Sometimes these experiments were a success and other times they were complete failures. What are the current frontiers for the web? Are there still any weird browsers left?

The latest generation of Smart TV’s run on the same operating systems as our mobile devices. How weird can these browsers be? Perhaps Smart TV’s aren’t as smart as we all would like to think. But there are more weird browsers. How do game consoles like the Xbox One handle your websites and are e-readers really capable of browsing the web? And are the browsers in VR headsets like the Hololens any good? I will try to give an overview of all the problems you are going to face when you want to make your site work on these weird browsers.

Transcript

1. ?weird browsers?
   webworkers nrw — august 11th 2016
   @html5test
   

   View Slide

2. View Slide

3. View Slide

4. 370
   

   Safari 9.1
   492
   

   Chrome 51
   461
   

   Firefox 48
   555
   0
   desktop browsers results on html5test.com
   460
   

   Edge 14
   

   View Slide

5. 555
   0
   desktop browsers results on html5test.com
   370
   

   Safari 9.1
   492
   

   Chrome 51
   461
   

   Firefox 48
   460
   

   Edge 14
   

   View Slide

6. 377
   

   Edge 12
   555
   0
   desktop browsers results on html5test.com
   19
   

   Internet Explorer 6
   312
   

   Internet Explorer 11
   370
   

   Safari 9.1
   492
   

   Chrome 51
   461
   

   Firefox 48
   460
   

   Edge 14
   433
   

   Edge 13
   

   View Slide

7. View Slide

8. ?weird browsers?
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. ?weird browsers?
    

    View Slide

24. ?weird browsers?
    

    View Slide

25. game consoles
    

    View Slide

26. portable game consoles
    

    View Slide

27. smart tvs
    

    View Slide

28. e-readers
    

    View Slide

29. smartwatches
    

    View Slide

30. photo cameras
    

    View Slide

31. fridges
    

    View Slide

32. cars
    

    View Slide

33. vr headsets
    

    View Slide

34. View Slide

35. smart tvs, set-top boxes
    and consoles
    

    View Slide

36. “big screen browsers”
    

    View Slide

37. View Slide

38. television browsers are pretty good
    the last generation of television sets use
    operating systems that originate from mobile
    

    View Slide

39. 427
    

    LG WebOS
    218
    

    Google TV
    199
    

    LG Netcast
    490
    

    Samsung Tizen
    478
    

    Opera Devices
    261
    

    Panasonic

    Viera
    smart tv results on html5test.com
    555
    0
    371
    

    Panasonic

    Firefox OS
    352
    

    Samsung

    2014
    

    View Slide

40. 289
    

    Playstation 4
    57
    

    Playstation 3
    258
    

    Playstation TV
    108
    

    Xbox 360
    256
    

    Wii U
    65
    

    Wii
    555
    0
    console results on html5test.com
    401
    

    Xbox One with Edge
    

    View Slide

41. View Slide

42. 1
    control
    

    View Slide

43. the biggest challenge of 

    of television browsers
    

    View Slide

44. navigation
    (without mouse or touchscreen)
    

    View Slide

45. d-pad
    

    View Slide

46. navigation with the d-pad
    

    View Slide

47. but it can be worse:
    moving the cursor with the arrow keys
    

    View Slide

48. alternatives
    

    View Slide

49. analog controllers
    

    View Slide

50. remotes with trackpad
    

    View Slide

51. remotes with airmouse
    

    View Slide

52. second screen
    

    View Slide

53. many manufacturers also create apps for
    controlling the smart tv, console or set-top box
    

    View Slide

54. View Slide

55. View Slide

56. text input
    (without keyboard)
    

    View Slide

57. d-pads
    

    View Slide

58. text input with the d-pad
    

    View Slide

59. alternatives
    

    View Slide

60. remotes with keyboards
    

    View Slide

61. wireless keyboards
    

    View Slide

62. and apps
    

    View Slide

63. View Slide

64. gesture control
    (throw your hands up in the air,

    and wave ’em like you just don’t care)
    

    View Slide

65. navigation with gesture control
    

    View Slide

66. can we control these input methods 

    directly from javascript?
    

    View Slide

67. the d-pad
    maybe
    

    View Slide

68. keyboard events
    window.addEventListener("keypress", function(e) {

    e.preventDefault(); // no navigation

    ...
    });
    1
    

    View Slide

69. the gamepad
    maybe
    

    View Slide

70. the gamepad api
    var gamepads = navigator.getGamepads();

    for (var i = 0; i < gamepads.length; i++) {

    ...

    }
    1
    

    View Slide

71. wii u api
    window.setInterval(function() {

    var state = window.wiiu.gamepad.update();

    ...
    }, 100);
    2
    

    View Slide

72. the webcam
    maybe
    

    View Slide

73. the getusermedia api
    navigator.getUserMedia(

    { audio: true, video: { width: 1280, height: 720 } },

    function(stream) { ... },

    function(error) { ... }

    );
    1
    

    View Slide

74. 2
    the difference between 

    a television and a monitor
    

    View Slide

75. overscan
    (let’s make it a bit more complicated)
    

    View Slide

76. due to historical reasons televisions will 

    not show the borders of the image
    

    View Slide

77. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels
    

    View Slide

78. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels
    

    View Slide

79. the image is then cropped to 

    1920 by 1080 pixels
    

    View Slide

80. the image is then cropped to 

    1920 by 1080 pixels
    

    View Slide

81. overscan causes blurry output
    +5%
    

    View Slide

82. solution 1
    overscan correction
    

    View Slide

83. the browser does not use

    the edges of the image
    1920 pixels
    

    View Slide

84. the television will enlarge 

    the image by 5%
    1920 pixels
    

    View Slide

85. and the content is now fully visible, the unused
    border is cropped out of the final image
    

    View Slide

86. but not every television set enlarges the 

    image by exactly 5%, this can vary between
    manufacturers and models
    

    View Slide

87. configure the correct overscan correction 

    in the system preferences
    

    View Slide

88. the playstation 4 will always show the browser
    without overscan correction in full screen mode
    

    View Slide

89. the playstation 4 will always show the browser
    without overscan correction in full screen mode
    

    View Slide

90. solution 2
    no overscan
    

    View Slide

91. it is possible to disable overscan 

    on many television sets
    ‘screen fit’, ‘pixel perfect’ or ‘just scan’
    

    View Slide

92. the playstation 3 always shows the 

    browser with overscan correction
    

    View Slide

93. the viewport
    (i really need some aspirin!)
    

    View Slide

94. the visual viewport
    determines which
    part of the website
    will be visible
    measured in 

    device pixels
    the visual viewport
    

    View Slide

95. the visual viewport
    determines which
    part of the website
    will be visible
    measured in 

    device pixels
    the visual viewport
    

    View Slide

96. the visual viewport
    the visual viewport
    determines which
    part of the website
    will be visible
    measured in 

    device pixels
    

    View Slide

97. the layout viewport
    the layout viewport
    determines the
    width in css pixels
    on which the site
    will be rendered
    

    View Slide

98. the layout viewport
    the layout viewport
    determines the
    width in css pixels
    on which the site
    will be rendered
    

    View Slide

99. the layout viewport
    the layout viewport
    determines the
    width in css pixels
    on which the site
    will be rendered
    

    View Slide

100. the default layout viewport is different on 

     every smart tv, console or set-top box
     between 800 and 1920 css pixels
     

     View Slide

101. it is possible to change the width of the 

     layout viewport with the ‘meta viewport’ tag
     
     
     physical device pixels
     device scale factor
     

     View Slide

102. complication:

     meta viewport is not supported
     it is not possible to get the same layout viewport 

     width in all of the different browsers
     

     View Slide

103. complication:

     device pixel ratio is not supported
     there is no proper way to show images with the same
     resolution as the physical screen
     

     View Slide

104. nintendo wii
     800 pixels
     

     View Slide

105. nintendo wii u
     980 pixels
     

     View Slide

106. lg webos
     960 pixels
     

     View Slide

107. microsoft xbox 360
     1041 of 1050 pixels
     

     View Slide

108. microsoft xbox one
     1200 of 1236 pixels
     

     View Slide

109. sony playstation 3
     1824 pixels
     

     View Slide

110. sony playstation 4
     1920 pixels
     

     View Slide

111. Nintendo Wii 800
     LG WebOS 960
     Nintendo Wii U 980
     Philips 2014 series 980
     Google TV 1024
     Playstation TV 1024
     Samsung Tizen 1024
     Xbox 360 1051
     Xbox One 1200
     LG Netcast 1226
     Panasonic Viera 1256
     Opera Devices 1280
     Samsung 2014 series 1280
     Panasonic Firefox OS 1536
     Playstation 3 1824
     Playstation 4 1920
     

     View Slide

112. device pixels != device pixels
     (of course not)
     

     View Slide

113. sometimes devices pixels are not 

     physical devices pixels, but virtual device pixels
     the browser renders in a lower resolution 

     which is upscaled to the resolution of the display
     

     View Slide

114. 3
     distance to the screen
     

     View Slide

115. 20 inch
     

     View Slide

116. 20 inch
     

     View Slide

117. 10 foot
     

     View Slide

118. “Make fonts and graphics on the site larger to
     account for viewing distance. People sit
     proportionally farther from a TV than from a
     computer monitor of the same size.”
     

     – Internet Explorer for Xbox One Developer Guide
     https://msdn.microsoft.com/en-us/library/dn532261(v=vs.85).aspx
     

     View Slide

119. Make your text 

     and images two to 

     three times bigger
     

     View Slide

120. Make your text 

     and images two to 

     three times bigger
     

     View Slide

121. Make your text 

     and images two to 

     three times bigger
     

     View Slide

122. youtube tv website
     

     View Slide

123. responsive design
     the size of the contents is determined 

     by the width of the viewport
     

     View Slide

124. use percentages for positioning
     .left { width: 60%; }

     .right { left: 60%; width: 40%; }
     1
     

     View Slide

125. base the fontsize on the viewport
     document.body.style.fontSize = 

     ((window.innerWidth / 1920) * 300) + '%';
     2
     

     View Slide

126. or maybe use viewport units – with polyfill
     body { font-size: 3vw; }

     .left { width: 60vw; height: 100vh; }

     .right { width: 40vw; height: 100vh; }
     3
     

     View Slide

127. use a safe margin around the contents
     body {

     padding: 5%;

     }
     4
     

     View Slide

128. identifying smart tv’s
     (css for televisions)
     

     View Slide

129. css media types
     @media tv {

     body {

     font-size: 300%;
     }
     }
     1
     ×
     

     View Slide

130. css media types
     all television browsers use the 

     css media type ‘screen’
     1
     

     View Slide

131. screen size
     if (screen.width == 1920 && screen.height == 1080) {

     document.body.className += " television";

     }
     2
     ×
     

     View Slide

132. screen size
     monitors and phones often use 

     hd resolutions, television browsers
     often use other resolutions
     2
     

     View Slide

133. useragent sniffing
     if (navigator.userAgent.search(/TV/i) >= 0) {

     document.body.className += " television";

     }
     3
     ×
     

     View Slide

134. useragent sniffing
     not all smart tv’s are recognisable
     Mozilla/5.0 (X11; Linux; ko-KR) 

     AppleWebKit/534.26+ (KHTML, like Gecko) 

     Version/5.0 Safari/534.26+
     3
     

     View Slide

135. couch mode
     the only reliable way to optimise a website 

     for television is to make two different websites…
     or give the user the ability to switch on 

     couch mode
     4
     

     View Slide

136. 4
     be careful with

     feature detection
     

     View Slide

137. “Basically every feature that talks to the 

     operating system or hardware, is suspect.”
     

     – Me
     http://blog.html5test.com/2015/08/the-problems-with-feature-detection/
     

     View Slide

138. if (!!navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(

     success, failure

     );
     }

     else {

     // alternative

     }
     

     View Slide

139. if (!!navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(

     success, failure

     );
     }
     1 failure is called with a “permission denied” error code
     2 no callback at all to success or failure
     

     View Slide

140. if (!!navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(

     success, failure

     );
     }
     3 success is called with longitude = 0 and latitude = 0
     4 success is called with the coordinates of 

     Mountain View, USA
     

     View Slide

141. is there a future for web apps 

     on the big screen?
     

     View Slide

142. View Slide

143. the new apple tv does not ship 

     with a browser by default
     

     View Slide

144. android tv does not ship 

     with a browser by default
     

     View Slide

145. View Slide

146. e-readers
     

     View Slide

147. e-reader results on html5test.com
     555
     0
     154
     

     Pocketbook
     280
     

     Kobo
     147
     

     Sony Reader
     152
     

     Kindle Touch
     

     View Slide

148. infrared touch screen
     

     View Slide

149. led’s sensors
     

     View Slide

150. mouse events
     down/up move touch events
     amazon kindle touch yes
     pocketbook basic touch yes
     kobo glow yes yes
     sony reader yes yes 1 finger
     

     View Slide

151. e-ink screens
     (slow, slower, slowest)
     

     View Slide

152. microscopic electrostatic charged balls
     

     View Slide

153. microscopic electrostatic charged balls
     + –
     – +
     

     View Slide

154. + –
     – +
     microscopic electrostatic charged balls
     

     View Slide

155. microscopic electrostatic charged balls
     

     View Slide

156. View Slide

157. maybe css animations and transitions 

     weren’t such a great idea after all
     

     View Slide

158. two completely different colors can look 

     exactly the same in black and white
     

     View Slide

159. two completely different colors can look 

     exactly the same in black and white
     

     View Slide

160. identifying e-readers
     (css for e-ink screens)
     

     View Slide

161. css monochrome mediaquery
     @media (monochrome) {

     ...
     }
     1
     ×
     

     View Slide

162. css monochrome mediaquery
     all tested e-readers act like 

     they have a color screen
     1
     

     View Slide

163. useragent sniffing
     there is no universal marker in the
     useragent string, but we can recognise
     individual manufacturers and models
     2
     

     View Slide

164. View Slide

165. portable consoles
     

     View Slide

166. 258
     

     Sony PlayStation Vita
     257
     

     New Nintendo 3DS
     portable console results html5test.com
     555
     0
     83
     

     Nintendo 3DS
     65
     

     Nintendo DSi
     

     View Slide

167. View Slide

168. two screens
     (surprisingly normal)
     

     View Slide

169. a dual visual viewport

     (the bottom one is the primary visual viewport)
     3d screen, but only
     2d is supported in
     the browser
     resistive 

     touch screen
     

     View Slide

170. a dual visual viewport

     (the bottom one is the primary visual viewport)
     3d screen, but only
     2d is supported in
     the browser
     resistive 

     touch screen
     

     View Slide

171. a dual visual viewport

     (the bottom one is the primary visual viewport)
     3d screen, but only
     2d is supported in
     the browser
     resistive 

     touch screen
     

     View Slide

172. a dual visual viewport

     (the bottom one is the primary visual viewport)
     3d screen, but only
     2d is supported in
     the browser
     resistive 

     touch screen
     

     View Slide

173. View Slide

174. View Slide

175. vr headsets
     

     View Slide

176. View Slide

177. View Slide

178. very expensive
     

     View Slide

179. but…
     

     View Slide

180. View Slide

181. View Slide

182. View Slide

183. webvr
     webgl on steroids
     

     View Slide

184. head tracking and camera geometry
     project the 3d scene to two different eyes
     

     View Slide

185. View Slide

186. View Slide

187. View Slide

188. ?weird browsers!
     

     View Slide

189. “We cannot predict future behavior 

     from a current experience that sucks”
     

     – Jason Grigsby
     http://blog.cloudfour.com/on-the-device-context-continuum/
     

     View Slide

190. but wait…
     

     View Slide

191. browsers!
     weird
     

     View Slide

192. browsers!
     weird
     

     View Slide

193. browsers!
     browsers
     browsers
     browser
     browsers!
     browsers
     rowsers
     browsers
     browsers
     brows
     browsers
     wsers!
     browsers
     

     View Slide

194. one arm arm injury new parent
     permanent situational
     https://www.microsoft.com/en-us/design/practice
     

     View Slide

195. View Slide

196. thank you
     niels leenheer

     @html5test
     

     View Slide