Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Niels Leenheer - Weird browsers - code.talks 2015

715 views

Published on

code.talks 2015 hosted by ABOUT YOU

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Niels Leenheer - Weird browsers - code.talks 2015

  1. 1. ?weird browsers? code.talks 2015 — september 30th 2015
  2. 2. this slide is inspirational as fuck
  3. 3. 402
 Edge 12 400
 Safari 9 521
 Chrome 45 466
 Firefox 41 5550 desktop browsers results on html5test.com
  4. 4. 402
 Edge 12 400
 Safari 9 466
 Firefox 41 5550 desktop browsers results on html5test.com 521
 Chrome 45
  5. 5. 402
 Edge 12 400
 Safari 9 521
 Chrome 45 466
 Firefox 41 5550 desktop browsers results on html5test.com 16
 Internet Explorer 6 458
 Edge 13 336
 Internet Explorer 11
  6. 6. ?weird browsers? code.talks 2015 — september 30th 2015
  7. 7. browsers and devices that do not
 adhere to current expectations
  8. 8. if ('ontouchstart' in window) { element.addEventListener(‘touchstart’, function(e) {
 ...
 }); }
 else {
 element.addEventListener(‘click’, function(e) {
 ...
 }); }
  9. 9. ?weird browsers?
  10. 10. ?weird browsers?
  11. 11. game consoles
  12. 12. portable game consoles
  13. 13. smart tvs
  14. 14. e-readers
  15. 15. smartwatches
  16. 16. photo cameras
  17. 17. cars AndreJayMeissner
  18. 18. comparable with mobile before 
 the iphone and android everybody is trying to figure it out
  19. 19. smart tvs, set-top boxes and consoles
  20. 20. “big screen browsers”
  21. 21. television browsers are pretty good the last generation of television sets use operating systems that originate from mobile
  22. 22. 418
 LG WebOS 281
 Google TV 238
 LG Netcast 465
 Samsung Tizen 449
 Opera Devices 301
 Panasonic
 Viera smart tv results on html5test.com 5550 414
 Panasonic
 Firefox OS 407
 Samsung
 2014
  23. 23. 328
 Playstation 4 53
 Playstation 3 309
 Playstation TV 98
 Xbox 360 286
 Xbox One 311
 Wii U 66
 Wii 5550 console results on html5test.com
  24. 24. 1 control
  25. 25. the biggest challenge of 
 of television browsers
  26. 26. navigation (without mouse or touchscreen)
  27. 27. d-pad
  28. 28. navigation with the d-pad
  29. 29. but it can be worse: moving the cursor with the arrow keys
  30. 30. alternatives
  31. 31. analog controllers
  32. 32. remotes with trackpad
  33. 33. remotes with airmouse
  34. 34. second screen
  35. 35. many manufacturers also create apps for controlling the smart tv, console or set-top box
  36. 36. text input (without keyboard)
  37. 37. d-pads
  38. 38. text input with the d-pad
  39. 39. alternatives
  40. 40. remotes with keyboards
  41. 41. wireless keyboards
  42. 42. and apps
  43. 43. gesture control (throw your hands up in the air,
 and wave ’em like you just don’t care)
  44. 44. navigation with gesture control
  45. 45. can we control these input methods 
 directly from javascript?
  46. 46. the d-pad maybe
  47. 47. keyboard events window.addEventListener("keypress", function(e) {
 e.preventDefault(); // no navigation
 ... }); 1
  48. 48. the gamepad maybe
  49. 49. the gamepad api var gamepads = navigator.getGamepads();
 for (var i = 0; i < gamepads.length; i++) {
 ...
 } 1
  50. 50. wii u api window.setInterval(function() {
 var state = window.wiiu.gamepad.update();
 ... }, 100); 2
  51. 51. the webcam no*
  52. 52. gestures no*
  53. 53. 2 the difference between 
 a television and a monitor
  54. 54. overscan (let’s make it a bit more complicated)
  55. 55. due to historical reasons televisions will 
 not show the borders of the image
  56. 56. the television enlarges all images 
 from the hdmi input by 5% 1920 pixels
  57. 57. the television enlarges all images 
 from the hdmi input by 5% 1920 pixels
  58. 58. the image is then cropped to 
 1920 by 1080 pixels
  59. 59. the image is then cropped to 
 1920 by 1080 pixels
  60. 60. overscan causes blurry output +5%
  61. 61. solution 1 overscan correction
  62. 62. the browser does not use
 the edges of the image 1920 pixels
  63. 63. the television will enlarge 
 the image by 5% 1920 pixels
  64. 64. and the content is now fully visible, the unused border is cropped out of the final image
  65. 65. but not every television set enlarges the 
 image by exactly 5%, this can vary between manufacturers and models
  66. 66. configure the correct overscan correction 
 in the system preferences
  67. 67. the playstation 4 will always show the browser without overscan correction in full screen mode
  68. 68. the playstation 4 will always show the browser without overscan correction in full screen mode
  69. 69. solution 2 no overscan
  70. 70. it is possible to disable overscan 
 on many television sets ‘screen fit’, ‘pixel perfect’ or ‘just scan’
  71. 71. the playstation 3 always shows the 
 browser with overscan correction
  72. 72. the viewport (i really need some aspirine!)
  73. 73. the visual viewport determines which part of the website will be visible measured in 
 device pixels the visual viewport
  74. 74. the visual viewport determines which part of the website will be visible measured in 
 device pixels the visual viewport
  75. 75. the visual viewport the visual viewport determines which part of the website will be visible measured in 
 device pixels
  76. 76. the layout viewport the layout viewport determines the width in css pixels on which the site will be rendered
  77. 77. the layout viewport the layout viewport determines the width in css pixels on which the site will be rendered
  78. 78. the layout viewport the layout viewport determines the width in css pixels on which the site will be rendered
  79. 79. the default layout viewport is different on 
 every smart tv, console or set-top box between 800 and 1920 css pixels
  80. 80. 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
  81. 81. complication:
 meta viewport is not supported it is not possible to get the same layout viewport 
 width in all of the different browsers
  82. 82. complication:
 device pixel ratio is not supported there is no proper way to show images with the same resolution as the physical screen
  83. 83. nintendo wii 800 pixels
  84. 84. nintendo wii u 980 pixels
  85. 85. lg webos 960 pixels
  86. 86. google tv 1024 pixels
  87. 87. microsoft xbox 360 1041 of 1050 pixels
  88. 88. microsoft xbox one 1200 of 1236 pixels
  89. 89. lg netcast 1226 pixels
  90. 90. sony playstation 3 1824 pixels
  91. 91. sony playstation 4 1920 pixels
  92. 92. 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
  93. 93. device pixels != device pixels (of course not)
  94. 94. 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
  95. 95. 3 distance to the screen
  96. 96. “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
  97. 97. fluid design++ the size of the contents is determined 
 by the width of the viewport
  98. 98. use percentages for positioning .left { width: 60%; }
 .right { left: 60%; width: 40%; } 1
  99. 99. base the fontsize on the viewport document.body.style.fontSize = 
 ((window.innerWidth / 1920) * 300) + '%'; 2
  100. 100. or maybe use viewport units – with polyfill body { font-size: 3vw; }
 .left { width: 60vw; height: 100vh; }
 .right { width: 40vw; height: 100vh; } 3
  101. 101. use a safe margin around the contents body {
 padding: 5%;
 } 4
  102. 102. youtube tv website
  103. 103. identifying smart tv’s (css for televisions)
  104. 104. css media types @media tv {
 body {
 font-size: 300%; } } 1 ×
  105. 105. css media types all television browsers use the 
 css media type ‘screen’ 1
  106. 106. screen size if (screen.width == 1920 && screen.height == 1080) {
 document.body.className += " television";
 } 2 ×
  107. 107. screen size monitors and phones often use 
 hd resolutions, television browsers often use other resolutions 2
  108. 108. useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) {
 document.body.className += " television";
 } 3 ×
  109. 109. 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
  110. 110. 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
  111. 111. 4 be careful with
 feature detection
  112. 112. “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/
  113. 113. if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition(
 success, failure
 ); }
 else {
 // alternative
 }
  114. 114. 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
  115. 115. 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
  116. 116. is there a future for web apps 
 on the big screen?
  117. 117. the new apple tv does not ship 
 with a browser by default
  118. 118. android tv does not ship 
 with a browser by default
  119. 119. e-readers
  120. 120. e-reader results on html5test.com 5550 196
 Pocketbook 280
 Kobo 157
 Sony Reader 52
 Kindle 3 187
 Kindle Touch
  121. 121. infrared touch screen
  122. 122. led’s sensors
  123. 123. 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
  124. 124. e-ink screens (slow, slower, slowest)
  125. 125. microscopic electrostatic charged balls
  126. 126. microscopic electrostatic charged balls + – – +
  127. 127. + – – + microscopic electrostatic charged balls
  128. 128. microscopic electrostatic charged balls
  129. 129. maybe css animations and transitions 
 weren’t such a great idea after all
  130. 130. two completely different colors can look 
 exactly the same in black and white
  131. 131. two completely different colors can look 
 exactly the same in black and white
  132. 132. identifying e-readers (css for e-ink screens)
  133. 133. css monochrome mediaquery @media (monochrome) {
 ... } 1 ×
  134. 134. css monochrome mediaquery all tested e-readers act like 
 they have a color screen 1
  135. 135. useragent sniffing there is no universal marker in the useragent string, but we can recognise individual manufacturers and models 2
  136. 136. portable consoles
  137. 137. 66
 Nintendo DSi 309
 Sony PlayStation Vita 311
 New Nintendo 3DS portable console results html5test.com 5550 80
 Nintendo 3DS
  138. 138. two screens (surprisingly normal)
  139. 139. 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
  140. 140. 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
  141. 141. 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
  142. 142. 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
  143. 143. ?weird browsers!
  144. 144. “We cannot predict future behavior 
 from a current experience that sucks” 
 – Jason Grigsby http://blog.cloudfour.com/on-the-device-context-continuum/
  145. 145. thank you niels leenheer
 @html5test

×