desktop browsers results on html5test.com
2006 2008 2010 2012 2014 2016
19 33
113
265
312
360
433
460
Edge
Internet Explorer
Slide 6
Slide 6 text
new since internet explorer 6
Slide 7
Slide 7 text
JSON encoding and decoding
Canvas 2D graphics
Video
Audio
Geolocation
SVG graphics
Semantic elements
Video subtitles App-cache offline support
File API’s
Form validation
HTML5 parser
Color input type
Drag and drop
IndexedDB
Page Visibility
URL API
Device Orientation
Full Screen
Pointer events
Web Crypto
Media source extensions
Mutation Observer
Typed Arrays
Internationalisation
ES6: Promises
Responsive images
Adaptive streaming
Pointerlock
ObjectRTC
Blend modes
WebAuthentication
Fetch
Beacons
Speech synthesis
Streams
CSS border image
Slide 8
Slide 8 text
Content security policy
PNG transparency support
CSS opacity
CSS transitions
CSS transforms
CSS animations
Native XMLHTTP
DOM3 events
VP9 video codec
WOFF fonts
CSS Selectors
CSS Grid Layout
ARIA
XPath
CSS 3D transforms
Selection API
ES6: WeakMap Touch events
CSS Gradients
CSS calc
CSS Snap Points
High Resolution Timing
Sandboxed iframes
Navigation Timing
Screen orientation
WebDriver
TLS 1.2
SVG External content
Regions
Image sourceset
HSTS
Data URLs
Slide 9
Slide 9 text
Local storage
Session storage
Web Workers
Gamepad
Notifications
Session history
Web Sockets WebGL
WebAudio
Async script execution
Cross-origin Resource Sharing
Access the webcam
ECMAScript 5
CSS Multicolumn
Cross-document messaging
Device Motion
HTTP/2
WebRTC
ASM.js CSS Filters
Exclusions
CSS Flexbox
Canvas 2D Path ES6 Classes
Console logging
CSS unset
Date input types
Encrypted Media Extensions
HTTP/2 server push
IME API
Media Queries Level 4
Message Channels
ES6: Template strings
ES6: Subclassing
ES6: Arrow functions
ES6: Generators
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
weird browsers
Slide 12
Slide 12 text
no, this talk is not about internet explorer 6
Slide 13
Slide 13 text
the web is weird by definition
Slide 14
Slide 14 text
the web is not a single platform
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
?weird browsers?
Slide 17
Slide 17 text
?weird browsers?
Slide 18
Slide 18 text
game consoles
Slide 19
Slide 19 text
portable
game consoles
Slide 20
Slide 20 text
smart tvs
Slide 21
Slide 21 text
e-readers
Slide 22
Slide 22 text
smartwatches
Slide 23
Slide 23 text
photo cameras
Slide 24
Slide 24 text
fridges
Slide 25
Slide 25 text
cars
Slide 26
Slide 26 text
vr headsets
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
smart tvs and
game consoles
Slide 29
Slide 29 text
“big screen browsers”
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
television browsers are pretty good
the last generation of television sets use
operating systems that originate on mobile
Slide 32
Slide 32 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 33
Slide 33 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
428
Xbox One with Edge
Slide 34
Slide 34 text
controlling the browser
1
Slide 35
Slide 35 text
the biggest challenge of
of big screen browsers
Slide 36
Slide 36 text
navigation
(without mouse or touchscreen)
Slide 37
Slide 37 text
d-pad
Slide 38
Slide 38 text
d-pad
Slide 39
Slide 39 text
alternatives
Slide 40
Slide 40 text
analog controllers
Slide 41
Slide 41 text
remotes
with trackpad
Slide 42
Slide 42 text
remotes
with airmouse
Slide 43
Slide 43 text
second screen
Slide 44
Slide 44 text
many manufacturers also create apps for
controlling the smart tv, console or set-top box
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
text input
(without keyboard)
Slide 47
Slide 47 text
d-pads
Slide 48
Slide 48 text
text input with the d-pad
Slide 49
Slide 49 text
alternatives
Slide 50
Slide 50 text
remotes
with keyboards
Slide 51
Slide 51 text
wireless keyboards
Slide 52
Slide 52 text
and apps
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
gesture control
(throw your hands up in the air,
and wave ’em like you just don’t care)
Slide 55
Slide 55 text
navigation with gesture control
Slide 56
Slide 56 text
can we control these input methods
directly from javascript?
the difference between
a television and a monitor
2
Slide 64
Slide 64 text
overscan
(let’s make it a bit more complicated)
Slide 65
Slide 65 text
due to historical reasons televisions will
not show the borders of the image
Slide 66
Slide 66 text
the television enlarges all images
from the hdmi input by 5%
1920 pixels
Slide 67
Slide 67 text
the television enlarges all images
from the hdmi input by 5%
1920 pixels
Slide 68
Slide 68 text
the image is then cropped to
1920 by 1080 pixels
Slide 69
Slide 69 text
the image is then cropped to
1920 by 1080 pixels
Slide 70
Slide 70 text
overscan causes blurry output
+5%
Slide 71
Slide 71 text
solution 1
overscan correction
Slide 72
Slide 72 text
the browser does not use
the edges of the image
1920 pixels
Slide 73
Slide 73 text
the television will enlarge
the image by 5%
1920 pixels
Slide 74
Slide 74 text
and the content is now fully visible, the unused
border is cropped out of the final image
Slide 75
Slide 75 text
but not every television set enlarges the
image by exactly 5%, this can vary between
manufacturers and models
Slide 76
Slide 76 text
configure the correct overscan correction
in the system preferences
Slide 77
Slide 77 text
the playstation 4 will always show the browser
without overscan correction in full screen mode
Slide 78
Slide 78 text
the playstation 4 will always show the browser
without overscan correction in full screen mode
Slide 79
Slide 79 text
solution 2
no overscan
Slide 80
Slide 80 text
it is possible to disable overscan
on many television sets
‘screen fit’, ‘pixel perfect’ or ‘just scan’
Slide 81
Slide 81 text
the playstation 3 always shows the
browser with overscan correction
Slide 82
Slide 82 text
the viewport
(i really need some aspirin!)
Slide 83
Slide 83 text
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport
Slide 84
Slide 84 text
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
the visual viewport
Slide 85
Slide 85 text
the visual viewport
the visual viewport
determines which
part of the website
will be visible
measured in
device pixels
Slide 86
Slide 86 text
the layout viewport
the layout viewport
determines the width
in css pixels on which
the site will be
rendered
Slide 87
Slide 87 text
the layout viewport
the layout viewport
determines the width
in css pixels on which
the site will be
rendered
Slide 88
Slide 88 text
the layout viewport
the layout viewport
determines the width
in css pixels on which
the site will be
rendered
Slide 89
Slide 89 text
the default layout viewport is different on
every smart tv, console or set-top box
between 800 and 1920 css pixels
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
microsoft xbox one (with edge)
1200 of 1236 pixels
Slide 96
Slide 96 text
sony playstation 3
1824 pixels
Slide 97
Slide 97 text
sony playstation 4
1920 pixels
Slide 98
Slide 98 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 99
Slide 99 text
device pixels != device pixels
(of course not)
Slide 100
Slide 100 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 101
Slide 101 text
distance to the screen
3
Slide 102
Slide 102 text
20 inch
Slide 103
Slide 103 text
20 inch
Slide 104
Slide 104 text
10 foot
Slide 105
Slide 105 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 106
Slide 106 text
Make your text
and images two to
three times bigger
Slide 107
Slide 107 text
Make your text
and images two to
three times bigger
Slide 108
Slide 108 text
Make your text
and images two to
three times bigger
Slide 109
Slide 109 text
youtube on the big screen
Slide 110
Slide 110 text
youtube on the big screen
Slide 111
Slide 111 text
identifying smart tv’s
(css for televisions)
Slide 112
Slide 112 text
css media types
@media tv {
body {
font-size: 300%;
}
}
×
1
Slide 113
Slide 113 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 118
Slide 118 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 119
Slide 119 text
be careful with
feature detection
4
Slide 120
Slide 120 text
“Basically every feature that talks to the
operating system or hardware, is suspect.”
– Me, just now
http://blog.html5test.com/2015/08/the-problems-with-feature-detection/
Slide 121
Slide 121 text
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
success, failure
);
}
else {
// alternative
}
Slide 122
Slide 122 text
failure is called with a “permission denied” error code
1
no callback at all to success or failure
2
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
success, failure
);
}
Slide 123
Slide 123 text
success is called with longitude = 0 and latitude = 0
3
success is called with the coordinates of
Mountain View, USA
4
if (!!navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
success, failure
);
}
Slide 124
Slide 124 text
No content
Slide 125
Slide 125 text
e-readers
Slide 126
Slide 126 text
e-reader results on html5test.com
555
0
154
Pocketbook
280
Kobo
147
Sony Reader
152
Kindle Touch