Weird Browsers @ grunnjs

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?

Transcript

1. ?weird browsers?
   grunnjs — september 9th 2015
   

   View Slide

2. 402
   

   Edge
   396
   

   Safari 8
   521
   

   Chrome 45
   467
   

   Firefox 40
   555
   0
   336
   

   Internet Explorer 11
   desktop browsers results on html5test.com
   

   View Slide

3. 402
   

   Edge
   396
   

   Safari 8
   467
   

   Firefox 40
   555
   0
   336
   

   Internet Explorer 11
   desktop browsers results on html5test.com
   521
   

   Chrome 45
   

   View Slide

4. 402
   

   Edge
   396
   

   Safari 8
   521
   

   Chrome 45
   467
   

   Firefox 40
   555
   0
   336
   

   Internet Explorer 11
   desktop browsers results on html5test.com
   16
   

   Internet Explorer 6
   

   View Slide

5. ?weird browsers?
   

   View Slide

6. browsers and devices that do not

   adhere to current expectations
   

   View Slide

7. ?weird browsers?
   

   View Slide

8. ?weird browsers?
   

   View Slide

9. game consoles
   

   View Slide

10. portable game consoles
    

    View Slide

11. smart tvs
    

    View Slide

12. e-readers
    

    View Slide

13. smartwatches
    

    View Slide

14. photo cameras
    

    View Slide

15. cars
    Andre Jay Meissner
    

    View Slide

16. comparable with mobile before 

    the iphone and android
    everybody is trying to figure it out
    

    View Slide

17. View Slide

18. View Slide

19. smart tvs, set-top boxes
    and consoles
    

    View Slide

20. “big screen browsers”
    

    View Slide

21. View Slide

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

    View Slide

23. 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 Slide

24. 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 Slide

25. View Slide

26. 1
    control
    

    View Slide

27. the biggest challenge of 

    of television browsers
    

    View Slide

28. navigation
    (without mouse or touchscreen)
    

    View Slide

29. d-pad
    

    View Slide

30. navigation with the d-pad
    

    View Slide

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

    View Slide

32. alternatives
    

    View Slide

33. analog controllers
    

    View Slide

34. remotes with trackpad
    

    View Slide

35. remotes with airmouse
    

    View Slide

36. second screen
    

    View Slide

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

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. text input
    (without keyboard)
    

    View Slide

42. d-pads
    

    View Slide

43. text input with the d-pad
    

    View Slide

44. alternatives
    

    View Slide

45. remotes with keyboards
    

    View Slide

46. wireless keyboards
    

    View Slide

47. and apps
    

    View Slide

48. View Slide

49. View Slide

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

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

    View Slide

51. navigation with gesture control
    

    View Slide

52. can we control these input methods 

    directly from javascript?
    

    View Slide

53. the d-pad
    maybe
    

    View Slide

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

    e.preventDefault(); // no navigation

    ...
    });
    1
    

    View Slide

55. the gamepad
    maybe
    

    View Slide

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

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

    ...

    }
    1
    

    View Slide

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

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

    ...
    }, 100);
    2
    

    View Slide

58. the webcam
    no*
    

    View Slide

59. gestures
    no*
    

    View Slide

60. 2
    the difference between 

    a television and a monitor
    

    View Slide

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

    View Slide

62. due to historical reasons televisions will 

    not show the borders of the image
    

    View Slide

63. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels
    

    View Slide

64. the television enlarges all images 

    from the hdmi input by 5%
    1920 pixels
    

    View Slide

65. the image is then cropped to 

    1920 by 1080 pixels
    

    View Slide

66. the image is then cropped to 

    1920 by 1080 pixels
    

    View Slide

67. overscan causes blurry output
    +5%
    

    View Slide

68. solution 1
    overscan correction
    

    View Slide

69. the browser does not use

    the edges of the image
    1920 pixels
    

    View Slide

70. the television will enlarge 

    the image by 5%
    1920 pixels
    

    View Slide

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

    View Slide

72. but not every television set enlarges the 

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

    View Slide

73. configure the correct overscan correction 

    in the system preferences
    

    View Slide

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

    View Slide

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

    View Slide

76. solution 2
    no overscan
    

    View Slide

77. it is possible to disable overscan 

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

    View Slide

78. the playstation 3 always shows the 

    browser with overscan correction
    

    View Slide

79. the viewport
    (i really need some aspirine!)
    

    View Slide

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

    device pixels
    the visual viewport
    

    View Slide

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

    device pixels
    the visual viewport
    

    View Slide

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

    device pixels
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

86. the default layout viewport is different on 

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

    View Slide

87. it is possible to change the width of the 

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

    View Slide

88. 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

89. 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

90. nintendo wii
    800 pixels
    

    View Slide

91. nintendo wii u
    980 pixels
    

    View Slide

92. lg webos
    960 pixels
    

    View Slide

93. google tv
    1024 pixels
    

    View Slide

94. microsoft xbox 360
    1041 of 1050 pixels
    

    View Slide

95. microsoft xbox one
    1200 of 1236 pixels
    

    View Slide

96. lg netcast
    1226 pixels
    

    View Slide

97. sony playstation 3
    1824 pixels
    

    View Slide

98. sony playstation 4
    1920 pixels
    

    View Slide

99. 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

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

     View Slide

101. 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

102. 3
     distance to the screen
     

     View Slide

103. “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

104. fluid design++
     the size of the contents is determined 

     by the width of the viewport
     

     View Slide

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

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

     View Slide

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

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

     View Slide

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

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

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

     View Slide

108. use a safe margin around the contents
     body {

     padding: 5%;

     }
     4
     

     View Slide

109. youtube tv website
     

     View Slide

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

     View Slide

111. css media types
     @media tv {

     body {

     font-size: 300%;
     }
     }
     1
     ×
     

     View Slide

112. css media types
     all television browsers use the 

     css media type ‘screen’
     1
     

     View Slide

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

     document.body.className += " television";

     }
     2
     ×
     

     View Slide

114. screen size
     monitors and phones often use 

     hd resolutions, television browsers
     often use other resolutions
     2
     

     View Slide

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

     document.body.className += " television";

     }
     3
     ×
     

     View Slide

116. 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

117. 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

118. 4
     be careful with

     feature detection
     

     View Slide

119. “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

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

     success, failure

     );
     }

     else {

     // alternative

     }
     

     View Slide

121. 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

122. 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

123. View Slide

124. e-readers
     

     View Slide

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

     Pocketbook
     280
     

     Kobo
     157
     

     Sony Reader
     52
     

     Kindle 3
     187
     

     Kindle Touch
     

     View Slide

126. infrared touch screen
     

     View Slide

127. led’s sensors
     

     View Slide

128. 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

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

     View Slide

130. microscopic electrostatic charged balls
     

     View Slide

131. microscopic electrostatic charged balls
     + –
     – +
     

     View Slide

132. + –
     – +
     microscopic electrostatic charged balls
     

     View Slide

133. microscopic electrostatic charged balls
     

     View Slide

134. View Slide

135. maybe css animations and transitions 

     weren’t such a great idea after all
     

     View Slide

136. two completely different colors can look 

     exactly the same in black and white
     

     View Slide

137. two completely different colors can look 

     exactly the same in black and white
     

     View Slide

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

     View Slide

139. css monochrome mediaquery
     @media (monochrome) {

     ...
     }
     1
     ×
     

     View Slide

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

     they have a color screen
     1
     

     View Slide

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

     View Slide

142. View Slide

143. portable consoles
     

     View Slide

144. 66
     

     Nintendo DSi
     309
     

     Sony PlayStation Vita
     311
     

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

     Nintendo 3DS
     

     View Slide

145. View Slide

146. two screens
     (surprisingly normal)
     

     View Slide

147. 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

148. 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

149. 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

150. 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

151. View Slide

152. ?weird browsers!
     

     View Slide

153. “We cannot predict future behavior 

     from a current experience that sucks”
     

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

     View Slide

154. thank you
     niels leenheer

     @html5test
     

     View Slide