Pro Yearly is on sale from $80 to $50! »

Weird Browsers @ TechDays NL 2016

Weird Browsers @ TechDays NL 2016

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

October 05, 2016
Tweet

Transcript

  1. #weirdbrowsers Weird Browsers Niels Leenheer @html5test

  2. None
  3. 383
 Safari 10 499
 Chrome 53 463
 Firefox 49 555

    0 desktop browsers results on html5test.com 460
 Edge 14
  4. 383
 Safari 10 555 0 desktop browsers results on html5test.com

    463
 Firefox 49 460
 Edge 14 499
 Chrome 53
  5. desktop browsers results on html5test.com 2006 2008 2010 2012 2014

    2016 19 33 113 265 312 360 433 460 Edge Internet Explorer
  6. new since internet explorer 6

  7. JSON encoding and decoding Canvas 2D graphics Video Audio Geolocation

    SVG graphics Semantic elements Video subtitles App-cache offline support File API’s Form validation HTML5 parser Color input type Drag and drop IndexedDB Page Visibility URL API Device Orientation Full Screen Pointer events Web Crypto Media source extensions Mutation Observer Typed Arrays Internationalisation ES6: Promises Responsive images Adaptive streaming Pointerlock ObjectRTC Blend modes WebAuthentication Fetch Beacons Speech synthesis Streams CSS border image
  8. Content security policy PNG transparency support CSS opacity CSS transitions

    CSS transforms CSS animations Native XMLHTTP DOM3 events VP9 video codec WOFF fonts CSS Selectors CSS Grid Layout ARIA XPath CSS 3D transforms Selection API ES6: WeakMap Touch events CSS Gradients CSS calc CSS Snap Points High Resolution Timing Sandboxed iframes Navigation Timing Screen orientation WebDriver TLS 1.2 SVG External content Regions Image sourceset HSTS Data URLs
  9. Local storage Session storage Web Workers Gamepad Notifications Session history

    Web Sockets WebGL WebAudio Async script execution Cross-origin Resource Sharing Access the webcam ECMAScript 5 CSS Multicolumn Cross-document messaging Device Motion HTTP/2 WebRTC ASM.js CSS Filters Exclusions CSS Flexbox Canvas 2D Path ES6 Classes Console logging CSS unset Date input types Encrypted Media Extensions HTTP/2 server push IME API Media Queries Level 4 Message Channels ES6: Template strings ES6: Subclassing ES6: Arrow functions ES6: Generators
  10. None
  11. weird browsers

  12. no, this talk is not about internet explorer 6

  13. the web is weird by definition

  14. the web is not a single platform

  15. None
  16. ?weird browsers?

  17. ?weird browsers?

  18. game consoles

  19. portable
 game consoles

  20. smart tvs

  21. e-readers

  22. smartwatches

  23. photo cameras

  24. fridges

  25. cars

  26. vr headsets

  27. None
  28. smart tvs and 
 game consoles

  29. “big screen browsers”

  30. None
  31. television browsers are pretty good the last generation of television

    sets use 
 operating systems that originate on mobile
  32. 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
  33. 289
 Playstation 4 57
 Playstation 3 258
 Playstation TV 108


    Xbox 360 256
 Wii U 65
 Wii 555 0 console results on html5test.com 428
 Xbox One with Edge
  34. controlling the browser 1

  35. the biggest challenge of 
 of big screen browsers

  36. navigation (without mouse or touchscreen)

  37. d-pad

  38. d-pad

  39. alternatives

  40. analog controllers

  41. remotes 
 with trackpad

  42. remotes 
 with airmouse

  43. second screen

  44. many manufacturers also create apps for 
 controlling the smart

    tv, console or set-top box
  45. None
  46. text input (without keyboard)

  47. d-pads

  48. text input with the d-pad

  49. alternatives

  50. remotes
 with keyboards

  51. wireless keyboards

  52. and apps

  53. None
  54. gesture control (throw your hands up in the air,
 and

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

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

  57. the d-pad maybe

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


    ... });
  59. the gamepad maybe

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

    = 0; i < gamepads.length; i++) {
 ...
 } 1
  61. the webcam maybe

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

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

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

  65. due to historical reasons televisions will 
 not show the

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

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

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

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

    pixels
  70. overscan causes blurry output +5%

  71. solution 1 overscan correction

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

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

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

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

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

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

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

    correction in full screen mode
  79. solution 2 no overscan

  80. it is possible to disable overscan 
 on many television

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

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

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

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

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

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

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

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

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

    tv, console or set-top box between 800 and 1920 css pixels
  90. nintendo wii 800 pixels

  91. nintendo wii u 980 pixels

  92. lg webos 960 pixels

  93. microsoft xbox 360 1041 of 1050 pixels

  94. microsoft xbox one 1200 of 1236 pixels

  95. microsoft xbox one (with edge) 1200 of 1236 pixels

  96. sony playstation 3 1824 pixels

  97. sony playstation 4 1920 pixels

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

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

  102. 20 inch

  103. 20 inch

  104. 10 foot

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

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

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

    times bigger
  109. youtube on the big screen

  110. youtube on the big screen

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

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

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

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

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

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

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

  120. “Basically every feature that talks to the 
 operating system

    or hardware, is suspect.” 
 – Me, just now http://blog.html5test.com/2015/08/the-problems-with-feature-detection/
  121. if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
 else {


    // alternative
 }
  122. failure is called with a “permission denied” error code 1

    no callback at all to success or failure 2 if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
  123. success is called with longitude = 0 and latitude =

    0 3 success is called with the coordinates of 
 Mountain View, USA 4 if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
  124. None
  125. e-readers

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

    147
 Sony Reader 152
 Kindle Touch
  127. infrared touch screen

  128. led’s sensors

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

  131. microscopic electrostatic charged balls

  132. microscopic electrostatic charged balls + – – +

  133. + – – + microscopic electrostatic charged balls

  134. microscopic electrostatic charged balls

  135. None
  136. maybe css animations and transitions 
 weren’t such a great

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

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

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

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

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

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

    string, but we can recognise individual manufacturers and models 2
  143. None
  144. vr headsets vr headsets vr headsets

  145. oculus rift

  146. htc vive

  147. microsoft hololens

  148. very expensive

  149. but…

  150. google cardboard

  151. google daydream

  152. samsung gear vr

  153. None
  154. webvr (webgl on steroids)

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

    two different eyes
  156. Chrome Firefox Samsung Internet Edge or experimental build nightly builds

    soon behind a flag or
  157. Chrome Firefox Samsung Internet Edge or experimental build nightly builds

    soon behind a flag or
  158. https://iswebvrready.org

  159. None
  160. None
  161. None
  162. ?weird browsers!

  163. “We cannot predict future behavior
 from a current experience that

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

  165. browsers! weird

  166. browsers! weird

  167. browsers! browsers browsers browsers browsers! browsers browsers browsers browsers browse

    browsers wsers! browsers
  168. None
  169. thank you niels leenheer
 @html5test