Weird Browsers @ Webworker NRW

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.

De023a9aff4c7a5ede3a81e8c76f17b5?s=128

Niels Leenheer

August 11, 2016
Tweet

Transcript

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

  2. None
  3. None
  4. 370 
 Safari 9.1 492 
 Chrome 51 461 


    Firefox 48 555 0 desktop browsers results on html5test.com 460 
 Edge 14
  5. 555 0 desktop browsers results on html5test.com 370 
 Safari

    9.1 492 
 Chrome 51 461 
 Firefox 48 460 
 Edge 14
  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
  7. None
  8. ?weird browsers?

  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. ?weird browsers?

  24. ?weird browsers?

  25. game consoles

  26. portable game consoles

  27. smart tvs

  28. e-readers

  29. smartwatches

  30. photo cameras

  31. fridges

  32. cars

  33. vr headsets

  34. None
  35. smart tvs, set-top boxes and consoles

  36. “big screen browsers”

  37. None
  38. television browsers are pretty good the last generation of television

    sets use operating systems that originate from mobile
  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
  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
  41. None
  42. 1 control

  43. the biggest challenge of 
 of television browsers

  44. navigation (without mouse or touchscreen)

  45. d-pad

  46. navigation with the d-pad

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

    arrow keys
  48. alternatives

  49. analog controllers

  50. remotes with trackpad

  51. remotes with airmouse

  52. second screen

  53. many manufacturers also create apps for controlling the smart tv,

    console or set-top box
  54. None
  55. None
  56. text input (without keyboard)

  57. d-pads

  58. text input with the d-pad

  59. alternatives

  60. remotes with keyboards

  61. wireless keyboards

  62. and apps

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

    wave ’em like you just don’t care)
  65. navigation with gesture control

  66. can we control these input methods 
 directly from javascript?

  67. the d-pad maybe

  68. keyboard events window.addEventListener("keypress", function(e) {
 e.preventDefault(); // no navigation
 ...

    }); 1
  69. the gamepad maybe

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

    = 0; i < gamepads.length; i++) {
 ...
 } 1
  71. wii u api window.setInterval(function() {
 var state = window.wiiu.gamepad.update();
 ...

    }, 100); 2
  72. the webcam maybe

  73. the getusermedia api navigator.getUserMedia(
 { audio: true, video: { width:

    1280, height: 720 } },
 function(stream) { ... },
 function(error) { ... }
 ); 1
  74. 2 the difference between 
 a television and a monitor

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

  76. due to historical reasons televisions will 
 not show the

    borders of the image
  77. the television enlarges all images 
 from the hdmi input

    by 5% 1920 pixels
  78. the television enlarges all images 
 from the hdmi input

    by 5% 1920 pixels
  79. the image is then cropped to 
 1920 by 1080

    pixels
  80. the image is then cropped to 
 1920 by 1080

    pixels
  81. overscan causes blurry output +5%

  82. solution 1 overscan correction

  83. the browser does not use
 the edges of the image

    1920 pixels
  84. the television will enlarge 
 the image by 5% 1920

    pixels
  85. and the content is now fully visible, the unused border

    is cropped out of the final image
  86. but not every television set enlarges the 
 image by

    exactly 5%, this can vary between manufacturers and models
  87. configure the correct overscan correction 
 in the system preferences

  88. the playstation 4 will always show the browser without overscan

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

    correction in full screen mode
  90. solution 2 no overscan

  91. it is possible to disable overscan 
 on many television

    sets ‘screen fit’, ‘pixel perfect’ or ‘just scan’
  92. the playstation 3 always shows the 
 browser with overscan

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

  94. the visual viewport determines which part of the website will

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

    be visible measured in 
 device pixels the visual viewport
  96. the visual viewport the visual viewport determines which part of

    the website will be visible measured in 
 device pixels
  97. the layout viewport the layout viewport determines the width in

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

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

    css pixels on which the site will be rendered
  100. the default layout viewport is different on 
 every smart

    tv, console or set-top box between 800 and 1920 css pixels
  101. it is possible to change the width of the 


    layout viewport with the ‘meta viewport’ tag <meta name="viewport" content=“width=device-width"> <meta name="viewport" content="width=1024"> physical device pixels device scale factor
  102. complication:
 meta viewport is not supported it is not possible

    to get the same layout viewport 
 width in all of the different browsers
  103. complication:
 device pixel ratio is not supported there is no

    proper way to show images with the same resolution as the physical screen
  104. nintendo wii 800 pixels

  105. nintendo wii u 980 pixels

  106. lg webos 960 pixels

  107. microsoft xbox 360 1041 of 1050 pixels

  108. microsoft xbox one 1200 of 1236 pixels

  109. sony playstation 3 1824 pixels

  110. sony playstation 4 1920 pixels

  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
  112. device pixels != device pixels (of course not)

  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
  114. 3 distance to the screen

  115. 20 inch

  116. 20 inch

  117. 10 foot

  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
  119. Make your text 
 and images two to 
 three

    times bigger
  120. Make your text 
 and images two to 
 three

    times bigger
  121. Make your text 
 and images two to 
 three

    times bigger
  122. youtube tv website

  123. responsive design the size of the contents is determined 


    by the width of the viewport
  124. use percentages for positioning .left { width: 60%; }
 .right

    { left: 60%; width: 40%; } 1
  125. base the fontsize on the viewport document.body.style.fontSize = 
 ((window.innerWidth

    / 1920) * 300) + '%'; 2
  126. or maybe use viewport units – with polyfill body {

    font-size: 3vw; }
 .left { width: 60vw; height: 100vh; }
 .right { width: 40vw; height: 100vh; } 3
  127. use a safe margin around the contents body {
 padding:

    5%;
 } 4
  128. identifying smart tv’s (css for televisions)

  129. css media types @media tv {
 body {
 font-size: 300%;

    } } 1 ×
  130. css media types all television browsers use the 
 css

    media type ‘screen’ 1
  131. screen size if (screen.width == 1920 && screen.height == 1080)

    {
 document.body.className += " television";
 } 2 ×
  132. screen size monitors and phones often use 
 hd resolutions,

    television browsers often use other resolutions 2
  133. useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) {
 document.body.className += "

    television";
 } 3 ×
  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
  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
  136. 4 be careful with
 feature detection

  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/
  138. if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
 else {


    // alternative
 }
  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
  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
  141. is there a future for web apps 
 on the

    big screen?
  142. None
  143. the new apple tv does not ship 
 with a

    browser by default
  144. android tv does not ship 
 with a browser by

    default
  145. None
  146. e-readers

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

    
 Kobo 147 
 Sony Reader 152 
 Kindle Touch
  148. infrared touch screen

  149. led’s sensors

  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
  151. e-ink screens (slow, slower, slowest)

  152. microscopic electrostatic charged balls

  153. microscopic electrostatic charged balls + – – +

  154. + – – + microscopic electrostatic charged balls

  155. microscopic electrostatic charged balls

  156. None
  157. maybe css animations and transitions 
 weren’t such a great

    idea after all
  158. two completely different colors can look 
 exactly the same

    in black and white
  159. two completely different colors can look 
 exactly the same

    in black and white
  160. identifying e-readers (css for e-ink screens)

  161. css monochrome mediaquery @media (monochrome) {
 ... } 1 ×

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

    have a color screen 1
  163. useragent sniffing there is no universal marker in the useragent

    string, but we can recognise individual manufacturers and models 2
  164. None
  165. portable consoles

  166. 258 
 Sony PlayStation Vita 257 
 New Nintendo 3DS

    portable console results html5test.com 555 0 83 
 Nintendo 3DS 65 
 Nintendo DSi
  167. None
  168. two screens (surprisingly normal)

  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
  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
  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
  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
  173. None
  174. None
  175. vr headsets

  176. None
  177. None
  178. very expensive

  179. but…

  180. None
  181. None
  182. None
  183. webvr webgl on steroids

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

    two different eyes
  185. None
  186. None
  187. None
  188. ?weird browsers!

  189. “We cannot predict future behavior 
 from a current experience

    that sucks” 
 – Jason Grigsby http://blog.cloudfour.com/on-the-device-context-continuum/
  190. but wait…

  191. browsers! weird

  192. browsers! weird

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

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

  195. None
  196. thank you niels leenheer
 @html5test