A presentation at Fronteers @ VI Company in in Rotterdam, Netherlands by Niels Leenheer
?vreemde browsers? fronteers — 3 juni 2015
402 Edge 396 526 Safari 8 Chrome 43 0 555 336 467 Internet Explorer 11 Firefox 38 resultaten van desktop-browsers op html5test.com
402 Edge 396 526 Safari 8 Chrome 43 0 555 336 467 Internet Explorer 11 Firefox 38 resultaten van desktop-browsers op html5test.com
402 Edge 396 526 Safari 8 Chrome 43 0 555 16 336 467 Internet Explorer 6 Internet Explorer 11 Firefox 38 resultaten van desktop-browsers op html5test.com
?vreemde browsers?
browsers en apparaten die niet aan de huidige verwachtingen voldoen
?vreemde browsers?
?vreemde browsers?
game consoles
portable game consoles
smart tv’s
e-readers
smartwatches
fotocamera’s
Andre Jay Meissner auto’s
vergelijkbaar met mobiel vóór de komst van de iphone en android iedereen doet maar wat
smart tv’s en consoles
televisie-browsers zijn best goed de laatste generatie televisies gebruikt besturingssystemen die afkomstig zijn van mobiel
281 Google TV 443 414 238 Panasonic Firefox OS LG Netcast LG WebOS 0 555 301 414 Panasonic Viera Samsung 2014 465 Samsung Tizen 449 Opera Devices resultaten van smart tv’s op html5test.com
53 328 Playstation 3 Playstation TV 98 328 Xbox 360 Playstation 4 286 Xbox One 0 555 66 265 Wii Wii U resultaten van console’s op html5test.com
1 bediening
het grootste probleem van televisie-browsers is de bediening
navigatie (zonder muis of touchscreen)
d-pad
navigeren met de d-pad
maar het kan erger: de cursor sturen met de pijltjestoetsen
alternatieven
analoge controllers
afstandbediening met trackpad
afstandbediening met airmouse
second screen
veel fabrikanten brengen ook apps uit voor de bediening van de smart tv, console of set-top box
tekstinvoer (zonder toetsenbord)
d-pads
tekst invoeren met de d-pad
alternatieven
afstandsbedieningen met toetsenbord
draadloze toetsenborden
en wederom apps
gesture control (als een gek in de lucht zwaaien)
navigeren met gesture control
kunnen we deze invoermethodes rechtstreeks gebruiken in javascript?
de d-pad misschien
1 keyboard events window.addEventListener(“keypress”, function(e) { e.preventDefault(); // no navigation … });
de gamepad misschien
1 de gamepad api var gamepads = navigator.getGamepads(); for (var i = 0; i < gamepads.length; i++) { … }
2 wii u api window.setInterval(function() { var state = window.wiiu.gamepad.update(); … }, 100);
de webcam nee*
gestures nee*
2 het verschil tussen een televisie en een monitor
overscan (laten we het even moeilijk maken)
vanwege historische redenen laten televisies de randen van het beeld niet zien
1920 pixels het beeld dat via hdmi binnenkomt wordt door de televisie vergroot met 5%
1920 pixels het beeld dat via hdmi binnenkomt wordt door de televisie vergroot met 5%
daarna wordt het beeld bijgesneden tot 1920 bij 1080 pixels
daarna wordt het beeld bijgesneden tot 1920 bij 1080 pixels
overscan zorgt voor onscherp beeld +5%
oplossing 1 overscan-correctie
1920 pixels de browser gebruikt de randen van het beeld niet
1920 pixels het beeld zal door de televisie worden vergroot met ongeveer 5%
de inhoud is nu volledig zichtbaar, de zwarte randen zijn verdwenen
maar niet elke televisie vergroot exact 5%, dit kan per merk en model verschillen
configureer de juiste overscan-correctie in de systeeminstellingen
de playstation 4 laat in fullscreen-mode de browser altijd zonder overscan-correctie zien
de playstation 4 laat in fullscreen-mode de browser altijd zonder overscan-correctie zien
oplossing 2 geen overscan
het is soms mogelijk om overscan uit te zetten bij televisies dit heet ‘screen fit’, ‘pixel perfect’ of ‘just scan’
de playstation 3 laat de browser altijd met overscan-correctie zien
de viewport (heeft iemand aspirine bij zich?)
de visual viewport de visual viewport bepaalt welk gedeelte van de website zichtbaar is gemeten in device pixels
de visual viewport de visual viewport bepaalt welk gedeelte van de website zichtbaar is gemeten in device pixels
de visual viewport de visual viewport bepaalt welk gedeelte van de website zichtbaar is gemeten in device pixels
de layout viewport de layout viewport bepaalt de breedte in css pixels waarop de website wordt afgebeeld
de layout viewport de layout viewport bepaalt de breedte in css pixels waarop de website wordt afgebeeld
de layout viewport de layout viewport bepaalt de breedte in css pixels waarop de website wordt afgebeeld
iedere smart tv, console of set-top box heeft z’n eigen standaard layout viewport-breedte tussen 800 en 1920 css pixels
met de ‘meta viewport’ is het mogelijk om breedte van de layout viewport te veranderen fysieke device pixels device scale factor
<meta name=”viewport” content=“width=device-width”> <meta name=”viewport” content=”width=1024”>probleem: meta viewport wordt niet ondersteund geen mogelijkheid de layout viewport gelijk te krijgen tussen verschillende browsers
probleem: device pixel ratio wordt niet ondersteund dus geen goede ondersteuning voor het tonen van afbeeldingen die bij de resolutie van het scherm passen
800 pixels nintendo wii
980 pixels nintendo wii u
960 pixels lg webos
1024 pixels google tv
1041 of 1050 pixels microsoft xbox 360
1200 of 1236 pixels microsoft xbox one
1226 pixels lg netcast
1824 pixels sony playstation 3
1920 pixels sony playstation 4
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
device pixels != device pixels (echt waar)
soms zijn device pixels geen fysieke device pixels, maar virtuele device pixels de browser werkt bijvoorbeeld op een lagere resolutie en wordt ge-upscaled naar de resolutie van het beeldscherm
3 afstand tot het scherm
“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
fluid design zorg ervoor dat de grootte van de inhoud wordt geleid door de breedte van de viewport
1 gebruik percentages voor positionering .left { width: 60%; } .right { left: 60%; width: 40%; }
2 baseer de fontgrootte op de viewport document.body.style.fontSize = ((window.innerWidth / 1920) * 300) + ‘%’;
3 of misschien viewport units – met polyfill body { font-size: 3vw; } .left { width: 60vw; height: 100vh; } .right { width: 40vw; height: 100vh; }
4 gebruik een veilige marge om de inhoud heen body { padding: 5%; }
youtube tv website
herkennen van smart tv’s (css speciaal voor televisies)
1 × css media types @media tv { body { font-size: 300%; } }
1 css media types alle televisie-browsers gebruiken css media type ‘screen’
2 × schermgrootte if (screen.width == 1920 && screen.height == 1080) { document.body.className += ” television”; }
2 schermgrootte monitoren en telefoons hebben soms hd-resoluties, televisie-browsers hebben vaak andere resoluties
3 × useragent sniffing if (navigator.userAgent.search(/TV/i) >= 0) { document.body.className += ” television”; }
3 useragent sniffing niet alle televisies zijn herkenbaar Mozilla/5.0 (X11; Linux; ko-KR) AppleWebKit/534.26+ (KHTML, like Gecko) Version/5.0 Safari/534.26+
4 couch mode de enige betrouwbare manier om een website voor televisie te optimaliseren is twee verschillende sites maken… of de bezoeker de mogelijkheid te geven om couch mode aan te zetten
4 wees voorzichtig met feature-detectie
alle features die praten met het besturingssysteem of de hardware zijn verdacht…
if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( success, failure ); } 1 failure wordt aangeroepen met een “permission denied”-foutcode 2 helemaal geen callback naar success of failure
if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( success, failure ); } 3 success wordt aangeroepen met longitude = 0 en latitude = 0 4 success wordt aangeroepen met de coördinaten van Mountain View, USA
e-readers
187 280 Kindle Touch Kobo 157 Sony Reader 0 555 52 196 Kindle 3 Pocketbook resultaten van e-readers op html5test.com
infrarood touchscherm
led’s sensors
mouse events down/up move amazon kindle touch ja pocketbook basic touch ja kobo glow ja ja sony reader ja ja touch events 1 vinger
e-ink beeldschermen (traag, trager, traagst)
microscopische balletjes die geladen zijn
microscopische balletjes die geladen zijn + – – +
microscopische balletjes die geladen zijn + – – +
microscopische balletjes die geladen zijn
misschien zijn css animaties en transitions toch niet zo’n goed idee
twee contrastrijke kleuren kunnen exact hetzelfde lijken in zwart/wit
twee contrastrijke kleuren kunnen exact hetzelfde lijken in zwart/wit
herkennen van e-readers (css voor e-ink beeldschermen)
1 × css monochrome mediaquery @media all and (monochrome) { … }
1 css monochrome mediaquery alle geteste e-readers doen net alsof ze een kleurenscherm hebben
2 useragent sniffing er is geen universele marker in de useragent-string, maar we kunnen wel individuele merken en modellen herkennen
portable consoles
66 Nintendo DSi 80 311 Nintendo 3DS New Nintendo 3DS 0 555 309 Sony PlayStation Vita resultaten van portable consoles op html5test.com
twee schermen (eigenlijk verrassend normaal)
een dubbele viewport (de onderste is de primaire visual viewport) 3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive touch scherm
een dubbele viewport (de onderste is de primaire visual viewport) 3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive touch scherm
een dubbele viewport (de onderste is de primaire visual viewport) 3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive touch scherm
een dubbele viewport (de onderste is de primaire visual viewport) 3d beeldscherm, maar alleen 2d wordt ondersteund in de browser resistive touch scherm
?vreemde browsers! niels leenheer @html5test
meer weten? smart tv browsers @patrick_h_lauke console browsers @anna_debenham
meer weten? viewports en meer @ppk
A talk about weird browsers in smart tv’s, consoles and e-books. Presented during a Fronteers meeting at VI company in Rotterdam. Sorry dutch only.
