$30 off During Our Annual Pro Sale. View Details »

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.

Niels Leenheer

August 11, 2016
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

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