Designing web interfaces for TVs
Building functional design for TV browsers, where modern CSS is off the table and every manufacturer follows its own spec.
Built for a client. Visuals and names are left out on purpose.
How navigation works
Navigation on a TV can be seen as a grid system. Your focus moves to the closest interactive element on the page, based on its position. That element has to be valid HTML, or HTML generated by JavaScript.
The constraints
You can't rely on regular modern CSS and HTML, because many TVs don't support it. Newer models might, older ones don't. And even when a TV does support a feature, it might implement it in its own way and to its own spec.
In practice that means no modern positioning: no flexbox, no grid, no automatic alignment. The reliable tools are margin and position: absolute. Colour has the same problem. Gradients and opacity work inconsistently and can look odd, think visible banding.
Keep it stupid simple
So how do you create functional design for the web on (older) TVs? KISS: Keep It Stupid Simple.
Considering these constraints, and how long it can take TV browsers to adopt new properties, you might as well build something native. That would have been a good course of action too, but the company I worked for had its own way of working. Building for the web allowed us to adapt and improve rapidly, and with so many TVs each following their own implementation, that is key.