Smart-TV Development: The Basics
So you’re a web developer who has been asked by their company to look at developing an app for Smart TVs? Or are you maybe interested in joining a company specialised in developing for the big screen, like Triple? Then I’m certain you might be wondering: what is so special about this? Isn’t it just a website but for bigger screens? Well, yes and no. There are definitely some peculiars that you should be taking into account.
In this blog we take a look at some of those things you should be taking care of, when developing for the big screen. These are the basics of Smart TV development.
Resolutions
First and foremost is a feature of developing for Smart TV that’s very nice, for developers at least. With normal web development, you’re usually dealing with different resolutions and sizes of screens. A website should work on mobile, tablets and normal computers. There’s a similar principle for televisions, it’s however much simpeler.
Televisions are generally only available in 16x9 resolutions. This means you really only have to develop apps for a certain subset of resolutions, that you’ll find on TVs. The most common ones that you’ll find are 1280x720 (HD) and 1920x1080 (Full HD). As televisions are becoming bigger, we are also slowly moving to the 4K/UHD (3840x2160) territory. Apps are often however upscaled by the devices themselves, so this is not common, yet.
The impact on developers from this is actually really nice. You don’t need to work with any responsiveness. You can code your styles and images just for those resolutions. No percentages or flexboxes, just plain pixels. Since you know the exact size of the screens you’ll be supporting, and they don’t get resized at all, you know exactly how to position your elements. It makes for very easy development that’s relatively faultless.
Focus Management
It’s probably the most scary element, and also the most error-prone: focus management. For those unaware of what this is, let me quickly explain how televisions work. On a normal computer you would be navigating around websites with a mouse. Televisions however don’t (mind you, there are edge cases) have a mouse at all. They have a TV-remote for navigation instead. We often refer to the navigation on a TV-remote as the ‘D-Pad’ (short for Directional Pad). Arrows that go up, down, left and right. And that’s how you navigate around a TV-interface.
In order for us let the user know where they are on the screen, we need to show it to them. If you’ve ever used Netflix on your Smart TV, you might have seen a white border around the individual items. Or a menu item might have changed colour when you ‘focus’ it. This principle is called ‘focus management’. It’s the principle of allowing the user to navigate on the page or interface, by showing them their current position. So when the user clicks left, the item to the left receives the focus. When the users clicks down, the item below receives focus.
Now, you might think, that sounds very easy. And in many cases it is. But if your page consists of a lot of different items with different sizes, you somehow need to know where the focus should go. And there are several different ways of implementing this functionality. You could make it declarative, which means you’re telling each button ‘if I go down, I focus this’. Or you could use a principle called ‘spatial navigation’, which makes use of some math to calculate the nearest button to focus. Netflix has written this really interesting article on focus management and the different types, if you’re interested in a deeper and better explanation.
Example Libraries
I can imagine it might be a daunting task to take on, especially after having read the aforementioned Netflix article. Luckily there are some open source implementations available. They are a great way to start (or good inspiration). These libraries are available for some of the major frontend frameworks out there, as well as for vanilla javascript.
React: https://github.com/NoriginMedia/Norigin-Spatial-Navigation
VueJS: https://github.com/twcapps/vue-spatialnavigation
Vanilla: https://github.com/luke-chang/js-spatial-navigation
The Video Player
Resolutions you’re developing for, check. Focus management, check. That means you’re about ready to start developing your app. You can start placing your menu, your carousels, and your buttons. But what is a TV app without playing video on it? That’s exactly the next point in our list: how to play video.
We’re possibly already getting into more advanced territory here. The world of video playback is very big, and there are many options available in terms of security, types of video and what not. But we’re here for the basics. So what is the easiest?
Just as on regular websites, you have the option to make use of the so-called HTML5 video element. This element manages all types of video playback, and can easily be used to play your MP4 video’s, or even Youtube content. So if your goal is to just use MP4s, you are done with just this. However, as mentioned, the world of video is a lot bigger than that. Maybe you have heard about DRM, or Digital Rights Management, before. It’s a security layer to make sure video isn’t pirated. If you’re getting into this advanced territory, you might be better off looking for a dedicated video player. You can read more about video players in this blog post.
Conclusion
The topics we’ve discussed, really are only the very basics. You’ll come across a lot more difficult topics as you develop further. For example, how do you handle developing for different types of Smart TV, like LG and Samsung? Because in fact they are different, and behave ever so slightly different. Still, the fundamentals we’ve demonstrated here, are very crucial for you to succeed. If you get the resolution and styling down properly, and have an easy way to implement focus, you’re already half-way there. You can just start adding features, like the video player. Before you know it you have a fully fledged app ready.
Has this sparked your interest? For more information, be sure to read some of my more in-dept blogs about developing for Smart TV. Or you might even be interested in a job in the field! If that’s the case, you’re welcome to reach out directly, or apply to Triple via the website.
Thank you for reading!
