Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Weird Browsers @ London Ajax

Weird Browsers @ London Ajax

Now that everybody builds responsive sites and mobile has become the new normal, 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 console handle your websites and are e-readers really capable of browsing the web?

Niels Leenheer

January 12, 2016
Tweet

More Decks by Niels Leenheer

Other Decks in Technology

Transcript

  1. ?weird browsers?
    london ajax — januari 12th 2016
    @html5test

    View full-size slide

  2. 400

    Safari 9
    521

    Chrome 47
    468

    Firefox 43
    555
    0
    desktop browsers results on html5test.com
    458

    Edge 13

    View full-size slide

  3. 400

    Safari 9
    468

    Firefox 43
    555
    0
    desktop browsers results on html5test.com
    521

    Chrome 47
    458

    Edge 13

    View full-size slide

  4. 402

    Edge 12
    400

    Safari 9
    521

    Chrome 47
    468

    Firefox 43
    555
    0
    desktop browsers results on html5test.com
    16

    Internet Explorer 6
    458

    Edge 13
    336

    Internet Explorer 11

    View full-size slide

  5. ?weird browsers?

    View full-size slide

  6. browsers and devices that do not

    adhere to current expectations

    View full-size slide

  7. if ('ontouchstart' in window) {
    element.addEventListener(‘touchstart’, function(e) {

    ...

    });
    }

    else {

    element.addEventListener(‘click’, function(e) {

    ...

    });
    }

    View full-size slide

  8. ?weird browsers?

    View full-size slide

  9. ?weird browsers?

    View full-size slide

  10. game consoles

    View full-size slide

  11. portable game consoles

    View full-size slide

  12. smartwatches

    View full-size slide

  13. photo cameras

    View full-size slide

  14. cars
    Andre Jay Meissner

    View full-size slide

  15. smart tvs, set-top boxes
    and consoles

    View full-size slide

  16. “big screen browsers”

    View full-size slide

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

    View full-size slide

  18. 418

    LG WebOS
    281

    Google TV
    238

    LG Netcast
    465

    Samsung Tizen
    449

    Opera Devices
    301

    Panasonic

    Viera
    smart tv results on html5test.com
    555
    0
    414

    Panasonic

    Firefox OS
    407

    Samsung

    2014

    View full-size slide

  19. 328

    Playstation 4
    53

    Playstation 3
    309

    Playstation TV
    98

    Xbox 360
    286

    Xbox One
    311

    Wii U
    66

    Wii
    555
    0
    console results on html5test.com

    View full-size slide

  20. 328

    Playstation 4
    53

    Playstation 3
    309

    Playstation TV
    98

    Xbox 360
    286

    Xbox One
    311

    Wii U
    66

    Wii
    555
    0
    console results on html5test.com
    426

    Xbox One with Edge

    View full-size slide

  21. the biggest challenge of 

    of television browsers

    View full-size slide

  22. navigation
    (without mouse or touchscreen)

    View full-size slide

  23. navigation with the d-pad

    View full-size slide

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

    View full-size slide

  25. alternatives

    View full-size slide

  26. analog controllers

    View full-size slide

  27. remotes with trackpad

    View full-size slide

  28. remotes with airmouse

    View full-size slide

  29. second screen

    View full-size slide

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

    View full-size slide

  31. text input
    (without keyboard)

    View full-size slide

  32. text input with the d-pad

    View full-size slide

  33. alternatives

    View full-size slide

  34. remotes with keyboards

    View full-size slide

  35. wireless keyboards

    View full-size slide

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

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

    View full-size slide

  37. navigation with gesture control

    View full-size slide

  38. can we control these input methods 

    directly from javascript?

    View full-size slide

  39. the d-pad
    maybe

    View full-size slide

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

    e.preventDefault(); // no navigation

    ...
    });
    1

    View full-size slide

  41. the gamepad
    maybe

    View full-size slide

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

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

    ...

    }
    1

    View full-size slide

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

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

    ...
    }, 100);
    2

    View full-size slide

  44. the webcam
    maybe

    View full-size slide

  45. the getusermedia api
    navigator.getUserMedia(

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

    function(stream) { ... },

    function(error) { ... }

    );
    1

    View full-size slide

  46. 2
    the difference between 

    a television and a monitor

    View full-size slide

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

    View full-size slide

  48. due to historical reasons televisions will 

    not show the borders of the image

    View full-size slide

  49. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels

    View full-size slide

  50. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels

    View full-size slide

  51. the image is then cropped to 

    1920 by 1080 pixels

    View full-size slide

  52. the image is then cropped to 

    1920 by 1080 pixels

    View full-size slide

  53. overscan causes blurry output
    +5%

    View full-size slide

  54. solution 1
    overscan correction

    View full-size slide

  55. the browser does not use

    the edges of the image
    1920 pixels

    View full-size slide

  56. the television will enlarge 

    the image by 5%
    1920 pixels

    View full-size slide

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

    View full-size slide

  58. but not every television set enlarges the 

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

    View full-size slide

  59. configure the correct overscan correction 

    in the system preferences

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. solution 2
    no overscan

    View full-size slide

  63. it is possible to disable overscan 

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

    View full-size slide

  64. the playstation 3 always shows the 

    browser with overscan correction

    View full-size slide

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

    View full-size slide

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

    device pixels
    the visual viewport

    View full-size slide

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

    device pixels
    the visual viewport

    View full-size slide

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

    device pixels

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  72. the default layout viewport is different on 

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

    View full-size slide

  73. it is possible to change the width of the 

    layout viewport with the ‘meta viewport’ tag


    physical device pixels
    device scale factor

    View full-size slide

  74. complication:

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

    width in all of the different browsers

    View full-size slide

  75. complication:

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

    View full-size slide

  76. nintendo wii
    800 pixels

    View full-size slide

  77. nintendo wii u
    980 pixels

    View full-size slide

  78. lg webos
    960 pixels

    View full-size slide

  79. microsoft xbox 360
    1041 of 1050 pixels

    View full-size slide

  80. microsoft xbox one
    1200 of 1236 pixels

    View full-size slide

  81. sony playstation 3
    1824 pixels

    View full-size slide

  82. sony playstation 4
    1920 pixels

    View full-size slide

  83. 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 full-size slide

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

    View full-size slide

  85. 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 full-size slide

  86. 3
    distance to the screen

    View full-size slide

  87. “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 full-size slide

  88. responsive design
    the size of the contents is determined 

    by the width of the viewport

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

    View full-size slide

  92. use a safe margin around the contents
    body {

    padding: 5%;

    }
    4

    View full-size slide

  93. youtube tv website

    View full-size slide

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

    View full-size slide

  95. css media types
    @media tv {

    body {

    font-size: 300%;
    }
    }
    1
    ×

    View full-size slide

  96. css media types
    all television browsers use the 

    css media type ‘screen’
    1

    View full-size slide

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

    document.body.className += " television";

    }
    2
    ×

    View full-size slide

  98. screen size
    monitors and phones often use 

    hd resolutions, television browsers
    often use other resolutions
    2

    View full-size slide

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

    document.body.className += " television";

    }
    3
    ×

    View full-size slide

  100. 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 full-size slide

  101. 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 full-size slide

  102. 4
    be careful with

    feature detection

    View full-size slide

  103. “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 full-size slide

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

    success, failure

    );
    }

    else {

    // alternative

    }

    View full-size slide

  105. 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 full-size slide

  106. 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 full-size slide

  107. is there a future for web apps 

    on the big screen?

    View full-size slide

  108. the new apple tv does not ship 

    with a browser by default

    View full-size slide

  109. android tv does not ship 

    with a browser by default

    View full-size slide

  110. e-reader results on html5test.com
    555
    0
    196

    Pocketbook
    280

    Kobo
    157

    Sony Reader
    52

    Kindle 3
    187

    Kindle Touch

    View full-size slide

  111. infrared touch screen

    View full-size slide

  112. led’s sensors

    View full-size slide

  113. 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 full-size slide

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

    View full-size slide

  115. microscopic electrostatic charged balls

    View full-size slide

  116. microscopic electrostatic charged balls
    + –
    – +

    View full-size slide

  117. + –
    – +
    microscopic electrostatic charged balls

    View full-size slide

  118. microscopic electrostatic charged balls

    View full-size slide

  119. maybe css animations and transitions 

    weren’t such a great idea after all

    View full-size slide

  120. two completely different colors can look 

    exactly the same in black and white

    View full-size slide

  121. two completely different colors can look 

    exactly the same in black and white

    View full-size slide

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

    View full-size slide

  123. css monochrome mediaquery
    @media (monochrome) {

    ...
    }
    1
    ×

    View full-size slide

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

    they have a color screen
    1

    View full-size slide

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

    View full-size slide

  126. portable consoles

    View full-size slide

  127. 66

    Nintendo DSi
    309

    Sony PlayStation Vita
    311

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

    Nintendo 3DS

    View full-size slide

  128. two screens
    (surprisingly normal)

    View full-size slide

  129. 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 full-size slide

  130. 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 full-size slide

  131. 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 full-size slide

  132. 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 full-size slide

  133. ?weird browsers!

    View full-size slide

  134. “We cannot predict future behavior 

    from a current experience that sucks”

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

    View full-size slide

  135. browsers!
    weird

    View full-size slide

  136. browsers!
    weird

    View full-size slide

  137. browsers!
    browsers
    browsers
    browser
    browsers!
    browsers
    rowsers
    browsers
    browsers
    brows
    browsers
    wsers!
    browsers

    View full-size slide

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

    View full-size slide

  139. thank you
    niels leenheer

    @html5test

    View full-size slide