Weird Browsers

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

Transcript

1. ?weird browsers? frontend ne — march 3rd 2016 @html5test
4. 400 
 Safari 9 521 
 Chrome 48 478 
 Firefox 44 555 0 desktop browsers results on html5test.com 458 
 Edge 13
5. 400 
 Safari 9 555 0 desktop browsers results on html5test.com 521 
 Chrome 48 458 
 Edge 13 478 
 Firefox 44
6. 402 
 Edge 12 400 
 Safari 9 521 
 Chrome 48 555 0 desktop browsers results on html5test.com 16 
 Internet Explorer 6 458 
 Edge 13 336 
 Internet Explorer 11 478 
 Firefox 44
8. ?weird browsers?
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. cars Andre Jay Meissner
33. smart tvs, set-top boxes and consoles
34. “big screen browsers”
36. television browsers are pretty good the last generation of television sets use operating systems that originate from mobile
37. 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
38. 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
39. 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
41. 1 control
42. the biggest challenge of 
 of television browsers
43. navigation (without mouse or touchscreen)
44. d-pad
45. navigation with the d-pad
46. but it can be worse: moving the cursor with the arrow keys
47. alternatives
48. analog controllers
49. remotes with trackpad
50. remotes with airmouse
51. second screen
52. many manufacturers also create apps for controlling the smart tv, console or set-top box
55. text input (without keyboard)
56. d-pads
57. text input with the d-pad
58. alternatives
59. remotes with keyboards
60. wireless keyboards
61. and apps
63. gesture control (throw your hands up in the air,
 and wave ’em like you just don’t care)
64. navigation with gesture control
65. can we control these input methods 
 directly from javascript?
66. the d-pad maybe
67. keyboard events window.addEventListener("keypress", function(e) {
 e.preventDefault(); // no navigation
 ... }); 1
68. the gamepad maybe
69. the gamepad api var gamepads = navigator.getGamepads();
 for (var i = 0; i < gamepads.length; i++) {
 ...
 } 1
70. wii u api window.setInterval(function() {
 var state = window.wiiu.gamepad.update();
 ... }, 100); 2
71. the webcam maybe
72. the getusermedia api navigator.getUserMedia(
 { audio: true, video: { width: 1280, height: 720 } },
 function(stream) { ... },
 function(error) { ... }
 ); 1
73. 2 the difference between 
 a television and a monitor
74. overscan (let’s make it a bit more complicated)
75. due to historical reasons televisions will 
 not show the borders of the image
76. the television enlarges all images 
 from the hdmi input by 5% 1920 pixels
77. the television enlarges all images 
 from the hdmi input by 5% 1920 pixels
78. the image is then cropped to 
 1920 by 1080 pixels
79. the image is then cropped to 
 1920 by 1080 pixels
80. overscan causes blurry output +5%
81. solution 1 overscan correction
82. the browser does not use
 the edges of the image 1920 pixels
83. the television will enlarge 
 the image by 5% 1920 pixels
84. and the content is now fully visible, the unused border is cropped out of the final image
85. but not every television set enlarges the 
 image by exactly 5%, this can vary between manufacturers and models
86. configure the correct overscan correction 
 in the system preferences
87. the playstation 4 will always show the browser without overscan correction in full screen mode
88. the playstation 4 will always show the browser without overscan correction in full screen mode
89. solution 2 no overscan
90. it is possible to disable overscan 
 on many television sets ‘screen fit’, ‘pixel perfect’ or ‘just scan’
91. the playstation 3 always shows the 
 browser with overscan correction
92. the viewport (i really need some aspirin!)
93. the visual viewport determines which part of the website will be visible measured in 
 device pixels the visual viewport
94. the visual viewport determines which part of the website will be visible measured in 
 device pixels the visual viewport
95. the visual viewport the visual viewport determines which part of the website will be visible measured in 
 device pixels
96. the layout viewport the layout viewport determines the width in css pixels on which the site will be rendered
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 default layout viewport is different on 
 every smart tv, console or set-top box between 800 and 1920 css pixels
100. 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
101. complication:
 meta viewport is not supported it is not possible to get the same layout viewport 
 width in all of the different browsers
102. complication:
 device pixel ratio is not supported there is no proper way to show images with the same resolution as the physical screen
103. nintendo wii 800 pixels
104. nintendo wii u 980 pixels
105. lg webos 960 pixels
106. microsoft xbox 360 1041 of 1050 pixels
107. microsoft xbox one 1200 of 1236 pixels
108. sony playstation 3 1824 pixels
109. sony playstation 4 1920 pixels
110. 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
111. device pixels != device pixels (of course not)
112. 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
113. 3 distance to the screen
114. 20 inch
115. 20 inch
116. 10 foot
117. “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
118. Make your text 
 and images two to 
 three times bigger
119. Make your text 
 and images two to 
 three times bigger
120. Make your text 
 and images two to 
 three times bigger
121. youtube tv website
122. responsive design the size of the contents is determined 
 by the width of the viewport
123. use percentages for positioning .left { width: 60%; }
 .right { left: 60%; width: 40%; } 1
124. base the fontsize on the viewport document.body.style.fontSize = 
 ((window.innerWidth / 1920) * 300) + '%'; 2
125. or maybe use viewport units – with polyfill body { font-size: 3vw; }
 .left { width: 60vw; height: 100vh; }
 .right { width: 40vw; height: 100vh; } 3
126. use a safe margin around the contents body {
 padding: 5%;
 } 4
127. identifying smart tv’s (css for televisions)
128. css media types @media tv {
 body {
 font-size: 300%; } } 1 ×
129. css media types all television browsers use the 
 css media type ‘screen’ 1
130. screen size if (screen.width == 1920 && screen.height == 1080) {
 document.body.className += " television";
 } 2 ×
131. screen size monitors and phones often use 
 hd resolutions, television browsers often use other resolutions 2
132. useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) {
 document.body.className += " television";
 } 3 ×
133. 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
134. 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
135. 4 be careful with
 feature detection
136. “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/
137. if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
 else {
 // alternative
 }
138. 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
139. 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
140. is there a future for web apps 
 on the big screen?
142. the new apple tv does not ship 
 with a browser by default
143. android tv does not ship 
 with a browser by default
145. e-readers
146. e-reader results on html5test.com 555 0 196 
 Pocketbook 280 
 Kobo 157 
 Sony Reader 52 
 Kindle 3 187 
 Kindle Touch
147. infrared touch screen
148. led’s sensors
149. 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
150. e-ink screens (slow, slower, slowest)
151. microscopic electrostatic charged balls
152. microscopic electrostatic charged balls + – – +
153. + – – + microscopic electrostatic charged balls
154. microscopic electrostatic charged balls
156. maybe css animations and transitions 
 weren’t such a great idea after all
157. two completely different colors can look 
 exactly the same in black and white
158. two completely different colors can look 
 exactly the same in black and white
159. identifying e-readers (css for e-ink screens)
160. css monochrome mediaquery @media (monochrome) {
 ... } 1 ×
161. css monochrome mediaquery all tested e-readers act like 
 they have a color screen 1
162. useragent sniffing there is no universal marker in the useragent string, but we can recognise individual manufacturers and models 2
164. portable consoles
165. 66 
 Nintendo DSi 309 
 Sony PlayStation Vita 311 
 New Nintendo 3DS portable console results html5test.com 555 0 80 
 Nintendo 3DS
167. two screens (surprisingly normal)
168. 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
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
174. ?weird browsers!
175. “We cannot predict future behavior 
 from a current experience that sucks” 
 – Jason Grigsby http://blog.cloudfour.com/on-the-device-context-continuum/
176. but wait…
177. browsers! weird
178. browsers! weird
179. browsers! browsers browsers browser browsers! browsers rowsers browsers browsers brows browsers wsers! browsers
180. one arm arm injury new parent permanent situational https://www.microsoft.com/en-us/design/practice
182. thank you niels leenheer
 @html5test