402
Edge 12
400
Safari 9
521
Chrome 46
466
Firefox 41
555
0
desktop browsers results on html5test.com
16
Internet Explorer 6
458
Edge 13
336
Internet Explorer 11
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
?weird browsers?
Slide 9
Slide 9 text
browsers and devices that do not
adhere to current expectations
Slide 10
Slide 10 text
if ('ontouchstart' in window) {
element.addEventListener(‘touchstart’, function(e) {
...
});
}
else {
element.addEventListener(‘click’, function(e) {
...
});
}
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
?weird browsers?
Slide 13
Slide 13 text
?weird browsers?
Slide 14
Slide 14 text
game consoles
Slide 15
Slide 15 text
portable game consoles
Slide 16
Slide 16 text
smart tvs
Slide 17
Slide 17 text
e-readers
Slide 18
Slide 18 text
smartwatches
Slide 19
Slide 19 text
photo cameras
Slide 20
Slide 20 text
cars
Andre Jay Meissner
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
smart tvs, set-top boxes
and consoles
Slide 23
Slide 23 text
“big screen browsers”
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
television browsers are pretty good
the last generation of television sets use
operating systems that originate from mobile
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
1
control
Slide 30
Slide 30 text
the biggest challenge of
of television browsers
Slide 31
Slide 31 text
navigation
(without mouse or touchscreen)
Slide 32
Slide 32 text
d-pad
Slide 33
Slide 33 text
navigation with the d-pad
Slide 34
Slide 34 text
but it can be worse:
moving the cursor with the arrow keys
Slide 35
Slide 35 text
alternatives
Slide 36
Slide 36 text
analog controllers
Slide 37
Slide 37 text
remotes with trackpad
Slide 38
Slide 38 text
remotes with airmouse
Slide 39
Slide 39 text
second screen
Slide 40
Slide 40 text
many manufacturers also create apps for
controlling the smart tv, console or set-top box
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
text input
(without keyboard)
Slide 44
Slide 44 text
d-pads
Slide 45
Slide 45 text
text input with the d-pad
Slide 46
Slide 46 text
alternatives
Slide 47
Slide 47 text
remotes with keyboards
Slide 48
Slide 48 text
wireless keyboards
Slide 49
Slide 49 text
and apps
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
gesture control
(throw your hands up in the air,
and wave ’em like you just don’t care)
Slide 52
Slide 52 text
navigation with gesture control
Slide 53
Slide 53 text
can we control these input methods
directly from javascript?
the gamepad api
var gamepads = navigator.getGamepads();
for (var i = 0; i < gamepads.length; i++) {
...
}
1
Slide 58
Slide 58 text
wii u api
window.setInterval(function() {
var state = window.wiiu.gamepad.update();
...
}, 100);
2
Slide 59
Slide 59 text
the webcam
no*
Slide 60
Slide 60 text
2
the difference between
a television and a monitor
Slide 61
Slide 61 text
overscan
(let’s make it a bit more complicated)
Slide 62
Slide 62 text
due to historical reasons televisions will
not show the borders of the image
Slide 63
Slide 63 text
the television enlarges all images
from the hdmi input by 5%
1920 pixels
Slide 64
Slide 64 text
the television enlarges all images
from the hdmi input by 5%
1920 pixels
Slide 65
Slide 65 text
the image is then cropped to
1920 by 1080 pixels
Slide 66
Slide 66 text
the image is then cropped to
1920 by 1080 pixels
Slide 67
Slide 67 text
overscan causes blurry output
+5%
Slide 68
Slide 68 text
solution 1
overscan correction
Slide 69
Slide 69 text
the browser does not use
the edges of the image
1920 pixels
Slide 70
Slide 70 text
the television will enlarge
the image by 5%
1920 pixels
Slide 71
Slide 71 text
and the content is now fully visible, the unused
border is cropped out of the final image
Slide 72
Slide 72 text
but not every television set enlarges the
image by exactly 5%, this can vary between
manufacturers and models
Slide 73
Slide 73 text
configure the correct overscan correction
in the system preferences
Slide 74
Slide 74 text
the playstation 4 will always show the browser
without overscan correction in full screen mode
Slide 75
Slide 75 text
the playstation 4 will always show the browser
without overscan correction in full screen mode
Slide 76
Slide 76 text
solution 2
no overscan
Slide 77
Slide 77 text
it is possible to disable overscan
on many television sets
‘screen fit’, ‘pixel perfect’ or ‘just scan’
Slide 78
Slide 78 text
the playstation 3 always shows the
browser with overscan correction
Slide 79
Slide 79 text
the viewport
(i really need some aspirin!)
Slide 80
Slide 80 text
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport
Slide 81
Slide 81 text
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport
Slide 82
Slide 82 text
the visual viewport
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
Slide 83
Slide 83 text
the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered
Slide 84
Slide 84 text
the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered
Slide 85
Slide 85 text
the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered
Slide 86
Slide 86 text
the default layout viewport is different on
every smart tv, console or set-top box
between 800 and 1920 css pixels
Slide 87
Slide 87 text
it is possible to change the width of the
layout viewport with the ‘meta viewport’ tag
physical device pixels
device scale factor
Slide 88
Slide 88 text
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
Slide 89 text
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
Slide 90 text
nintendo wii
800 pixels
Slide 91
Slide 91 text
nintendo wii u
980 pixels
Slide 92
Slide 92 text
lg webos
960 pixels
Slide 93
Slide 93 text
microsoft xbox 360
1041 of 1050 pixels
Slide 94
Slide 94 text
microsoft xbox one
1200 of 1236 pixels
Slide 95
Slide 95 text
sony playstation 3
1824 pixels
Slide 96
Slide 96 text
sony playstation 4
1920 pixels
Slide 97
Slide 97 text
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 98
Slide 98 text
device pixels != device pixels
(of course not)
Slide 99
Slide 99 text
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 100
Slide 100 text
3
distance to the screen
Slide 101
Slide 101 text
“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 102
Slide 102 text
responsive design
the size of the contents is determined
by the width of the viewport
Slide 103
Slide 103 text
use percentages for positioning
.left { width: 60%; }
.right { left: 60%; width: 40%; }
1
Slide 104
Slide 104 text
base the fontsize on the viewport
document.body.style.fontSize =
((window.innerWidth / 1920) * 300) + '%';
2
Slide 105
Slide 105 text
or maybe use viewport units – with polyfill
body { font-size: 3vw; }
.left { width: 60vw; height: 100vh; }
.right { width: 40vw; height: 100vh; }
3
Slide 106
Slide 106 text
use a safe margin around the contents
body {
padding: 5%;
}
4
Slide 107
Slide 107 text
youtube tv website
Slide 108
Slide 108 text
identifying smart tv’s
(css for televisions)
Slide 109
Slide 109 text
css media types
@media tv {
body {
font-size: 300%;
}
}
1
×
Slide 110
Slide 110 text
css media types
all television browsers use the
css media type ‘screen’
1
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
Slide 115
Slide 115 text
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
Slide 116
Slide 116 text
4
be careful with
feature detection
Slide 117
Slide 117 text
“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 118
Slide 118 text
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
success, failure
);
}
else {
// alternative
}
Slide 119
Slide 119 text
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 120
Slide 120 text
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 121
Slide 121 text
is there a future for web apps
on the big screen?
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
the new apple tv does not ship
with a browser by default
Slide 124
Slide 124 text
android tv does not ship
with a browser by default
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
?weird browsers!
Slide 127
Slide 127 text
“We cannot predict future behavior
from a current experience that sucks”
– Jason Grigsby
http://blog.cloudfour.com/on-the-device-context-continuum/