402
Edge 396
521
Safari 8
Chrome 45
0
555
336
467
Internet Explorer 11
Firefox 40
desktop browsers results on html5test.com
Slide 3
402
Edge 396
521
Safari 8
Chrome 45
0
555
336
467
Internet Explorer 11
Firefox 40
desktop browsers results on html5test.com
Slide 4
402
Edge 396
521
Safari 8
Chrome 45
0
555
16
336
467
Internet Explorer 6
Internet Explorer 11
Firefox 40
desktop browsers results on html5test.com
Slide 5
?weird browsers?
Slide 6
browsers and devices that do not adhere to current expectations
Slide 7
?weird browsers?
Slide 8
?weird browsers?
Slide 9
game consoles
Slide 10
portable game consoles
Slide 11
smart tvs
Slide 12
e-readers
Slide 13
smartwatches
Slide 14
photo cameras
Slide 15
Andre Jay Meissner
cars
Slide 16
comparable with mobile before the iphone and android everybody is trying to figure it out
Slide 17
Slide 18
Slide 19
smart tvs, set-top boxes and consoles
Slide 20
“big screen browsers”
Slide 21
Slide 22
television browsers are pretty good the last generation of television sets use operating systems that originate from mobile
Slide 23
281
Google TV
418
LG WebOS 414 238
Panasonic Firefox OS
LG Netcast
0
555
301
407
Panasonic Samsung Viera 2014
465
Samsung Tizen 449
Opera Devices smart tv results on html5test.com
Slide 24
53
309
Playstation 3
Playstation TV
98
328
Xbox 360
Playstation 4
286
Xbox One
0
555
66
311
Wii
Wii U
console results on html5test.com
Slide 25
Slide 26
1 control
Slide 27
the biggest challenge of of television browsers
Slide 28
navigation (without mouse or touchscreen)
Slide 29
d-pad
Slide 30
navigation with the d-pad
Slide 31
but it can be worse: moving the cursor with the arrow keys
Slide 32
alternatives
Slide 33
analog controllers
Slide 34
remotes with trackpad
Slide 35
remotes with airmouse
Slide 36
second screen
Slide 37
many manufacturers also create apps for controlling the smart tv, console or set-top box
Slide 38
Slide 39
Slide 40
Slide 41
text input (without keyboard)
Slide 42
d-pads
Slide 43
text input with the d-pad
Slide 44
alternatives
Slide 45
remotes with keyboards
Slide 46
wireless keyboards
Slide 47
and apps
Slide 48
Slide 49
Slide 50
gesture control (throw your hands up in the air, and wave ’em like you just don’t care)
Slide 51
navigation with gesture control
Slide 52
can we control these input methods directly from javascript?
complication:
meta viewport is not supported it is not possible to get the same layout viewport width in all of the different browsers
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
Slide 90
800 pixels
nintendo wii
Slide 91
980 pixels
nintendo wii u
Slide 92
960 pixels
lg webos
Slide 93
1024 pixels
google tv
Slide 94
1041 of 1050 pixels
microsoft xbox 360
Slide 95
1200 of 1236 pixels
microsoft xbox one
Slide 96
1226 pixels
lg netcast
Slide 97
1824 pixels
sony playstation 3
Slide 98
1920 pixels
sony playstation 4
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
Slide 100
device pixels != device pixels (of course not)
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
Slide 102
3 distance to the screen
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
Slide 104
fluid design++
the size of the contents is determined by the width of the viewport
Slide 105
1
use percentages for positioning .left { width: 60%; } .right { left: 60%; width: 40%; }
Slide 106
2
base the fontsize on the viewport document.body.style.fontSize = ((window.innerWidth / 1920) * 300) + ‘%’;
Slide 107
3
or maybe use viewport units – with polyfill body { font-size: 3vw; } .left { width: 60vw; height: 100vh; } .right { width: 40vw; height: 100vh; }
Slide 108
4
use a safe margin around the contents body { padding: 5%; }
Slide 109
youtube tv website
Slide 110
identifying smart tv’s (css for televisions)
Slide 111
1
×
css media types @media tv { body {
font-size: 300%; } }
Slide 112
1
css media types
all television browsers use the css media type ‘screen’
3
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+
Slide 117
4
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
Slide 118
4 be careful with feature detection
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/
Slide 120
if (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( success, failure ); } else { // alternative }
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
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
Slide 123
Slide 124
e-readers
Slide 125
187
280
Kindle Touch
Kobo
157
Sony Reader
0
555
52
196
Kindle 3
Pocketbook
e-reader results on html5test.com