377
Edge 12
555
0
desktop browsers results on html5test.com
19
Internet Explorer 6
312
Internet Explorer 11
370
Safari 9.1
492
Chrome 51
461
Firefox 48
460
Edge 14
433
Edge 13
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
?weird browsers?
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
?weird browsers?
Slide 24
Slide 24 text
?weird browsers?
Slide 25
Slide 25 text
game consoles
Slide 26
Slide 26 text
portable game consoles
Slide 27
Slide 27 text
smart tvs
Slide 28
Slide 28 text
e-readers
Slide 29
Slide 29 text
smartwatches
Slide 30
Slide 30 text
photo cameras
Slide 31
Slide 31 text
fridges
Slide 32
Slide 32 text
cars
Slide 33
Slide 33 text
vr headsets
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
smart tvs, set-top boxes
and consoles
Slide 36
Slide 36 text
“big screen browsers”
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
television browsers are pretty good
the last generation of television sets use
operating systems that originate from mobile
Slide 39
Slide 39 text
427
LG WebOS
218
Google TV
199
LG Netcast
490
Samsung Tizen
478
Opera Devices
261
Panasonic
Viera
smart tv results on html5test.com
555
0
371
Panasonic
Firefox OS
352
Samsung
2014
Slide 40
Slide 40 text
289
Playstation 4
57
Playstation 3
258
Playstation TV
108
Xbox 360
256
Wii U
65
Wii
555
0
console results on html5test.com
401
Xbox One with Edge
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
1
control
Slide 43
Slide 43 text
the biggest challenge of
of television browsers
Slide 44
Slide 44 text
navigation
(without mouse or touchscreen)
Slide 45
Slide 45 text
d-pad
Slide 46
Slide 46 text
navigation with the d-pad
Slide 47
Slide 47 text
but it can be worse:
moving the cursor with the arrow keys
Slide 48
Slide 48 text
alternatives
Slide 49
Slide 49 text
analog controllers
Slide 50
Slide 50 text
remotes with trackpad
Slide 51
Slide 51 text
remotes with airmouse
Slide 52
Slide 52 text
second screen
Slide 53
Slide 53 text
many manufacturers also create apps for
controlling the smart tv, console or set-top box
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
text input
(without keyboard)
Slide 57
Slide 57 text
d-pads
Slide 58
Slide 58 text
text input with the d-pad
Slide 59
Slide 59 text
alternatives
Slide 60
Slide 60 text
remotes with keyboards
Slide 61
Slide 61 text
wireless keyboards
Slide 62
Slide 62 text
and apps
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
gesture control
(throw your hands up in the air,
and wave ’em like you just don’t care)
Slide 65
Slide 65 text
navigation with gesture control
Slide 66
Slide 66 text
can we control these input methods
directly from javascript?
2
the difference between
a television and a monitor
Slide 75
Slide 75 text
overscan
(let’s make it a bit more complicated)
Slide 76
Slide 76 text
due to historical reasons televisions will
not show the borders of the image
Slide 77
Slide 77 text
the television enlarges all images
from the hdmi input by 5%
1920 pixels
Slide 78
Slide 78 text
the television enlarges all images
from the hdmi input by 5%
1920 pixels
Slide 79
Slide 79 text
the image is then cropped to
1920 by 1080 pixels
Slide 80
Slide 80 text
the image is then cropped to
1920 by 1080 pixels
Slide 81
Slide 81 text
overscan causes blurry output
+5%
Slide 82
Slide 82 text
solution 1
overscan correction
Slide 83
Slide 83 text
the browser does not use
the edges of the image
1920 pixels
Slide 84
Slide 84 text
the television will enlarge
the image by 5%
1920 pixels
Slide 85
Slide 85 text
and the content is now fully visible, the unused
border is cropped out of the final image
Slide 86
Slide 86 text
but not every television set enlarges the
image by exactly 5%, this can vary between
manufacturers and models
Slide 87
Slide 87 text
configure the correct overscan correction
in the system preferences
Slide 88
Slide 88 text
the playstation 4 will always show the browser
without overscan correction in full screen mode
Slide 89
Slide 89 text
the playstation 4 will always show the browser
without overscan correction in full screen mode
Slide 90
Slide 90 text
solution 2
no overscan
Slide 91
Slide 91 text
it is possible to disable overscan
on many television sets
‘screen fit’, ‘pixel perfect’ or ‘just scan’
Slide 92
Slide 92 text
the playstation 3 always shows the
browser with overscan correction
Slide 93
Slide 93 text
the viewport
(i really need some aspirin!)
Slide 94
Slide 94 text
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport
Slide 95
Slide 95 text
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport
Slide 96
Slide 96 text
the visual viewport
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
Slide 97
Slide 97 text
the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered
Slide 98
Slide 98 text
the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered
Slide 99
Slide 99 text
the layout viewport
the layout viewport
determines the
width in css pixels
on which the site
will be rendered
Slide 100
Slide 100 text
the default layout viewport is different on
every smart tv, console or set-top box
between 800 and 1920 css pixels
Slide 101
Slide 101 text
it is possible to change the width of the
layout viewport with the ‘meta viewport’ tag
physical device pixels
device scale factor
Slide 102
Slide 102 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 103
Slide 103 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 104
Slide 104 text
nintendo wii
800 pixels
Slide 105
Slide 105 text
nintendo wii u
980 pixels
Slide 106
Slide 106 text
lg webos
960 pixels
Slide 107
Slide 107 text
microsoft xbox 360
1041 of 1050 pixels
Slide 108
Slide 108 text
microsoft xbox one
1200 of 1236 pixels
Slide 109
Slide 109 text
sony playstation 3
1824 pixels
Slide 110
Slide 110 text
sony playstation 4
1920 pixels
Slide 111
Slide 111 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 112
Slide 112 text
device pixels != device pixels
(of course not)
Slide 113
Slide 113 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 114
Slide 114 text
3
distance to the screen
Slide 115
Slide 115 text
20 inch
Slide 116
Slide 116 text
20 inch
Slide 117
Slide 117 text
10 foot
Slide 118
Slide 118 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 119
Slide 119 text
Make your text
and images two to
three times bigger
Slide 120
Slide 120 text
Make your text
and images two to
three times bigger
Slide 121
Slide 121 text
Make your text
and images two to
three times bigger
Slide 122
Slide 122 text
youtube tv website
Slide 123
Slide 123 text
responsive design
the size of the contents is determined
by the width of the viewport
Slide 124
Slide 124 text
use percentages for positioning
.left { width: 60%; }
.right { left: 60%; width: 40%; }
1
Slide 125
Slide 125 text
base the fontsize on the viewport
document.body.style.fontSize =
((window.innerWidth / 1920) * 300) + '%';
2
Slide 126
Slide 126 text
or maybe use viewport units – with polyfill
body { font-size: 3vw; }
.left { width: 60vw; height: 100vh; }
.right { width: 40vw; height: 100vh; }
3
Slide 127
Slide 127 text
use a safe margin around the contents
body {
padding: 5%;
}
4
Slide 128
Slide 128 text
identifying smart tv’s
(css for televisions)
Slide 129
Slide 129 text
css media types
@media tv {
body {
font-size: 300%;
}
}
1
×
Slide 130
Slide 130 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 135
Slide 135 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 136
Slide 136 text
4
be careful with
feature detection
Slide 137
Slide 137 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 138
Slide 138 text
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
success, failure
);
}
else {
// alternative
}
Slide 139
Slide 139 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 140
Slide 140 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 141
Slide 141 text
is there a future for web apps
on the big screen?
Slide 142
Slide 142 text
No content
Slide 143
Slide 143 text
the new apple tv does not ship
with a browser by default
Slide 144
Slide 144 text
android tv does not ship
with a browser by default
Slide 145
Slide 145 text
No content
Slide 146
Slide 146 text
e-readers
Slide 147
Slide 147 text
e-reader results on html5test.com
555
0
154
Pocketbook
280
Kobo
147
Sony Reader
152
Kindle Touch