Rain Rabbit

A couple years ago, I attended the mobile-focused Breaking Development conference in Orlando, Florida, and one of the talks that I found fascinating was Jason Grigsby’s talk on the web browsers that are being installed on televisions.

The conclusion was that these browsers are basically all crap, but I felt a lot of their limitations were based on bad technological implementations, and assumed they would eventually get better over time. The thing that stuck with me, however, is how we as designers might consider the TV browsing audience when we serve up page layouts, particularly as it applies to responsive web design.

HDTVs have a screen height of 1080 pixels and a ratio of around 16:9, which is close to my 2011 iMac, so the obvious answer is to just serve up the widescreen styles right? No, actually, we’re going to run into problems with this, because while resolutions may be comparable between a TV and a modern desktop computer, the context is different. Users sit up real close to their desktop machines, but all the way across the room from their TVs. Text that is easily visible at work becomes totally illegible during relaxation.

The bad news is, while the stylesheet spec accounts for TVs with the "television" media type, no TV recognizes this, because no designer has ever supported it. And no designer has ever supported it, because no TV has ever recognized it! What media type do TVs recognize? “Screen”, of course, because they want to be able to see your pretty styles.

Aside from device detection—I have no idea what this kind of support looks like—it seems we may be out of luck.

I do, however, hold one glimmer of possibility with another solution, though I have not actually tested it to see if the hypothesis holds: designing with ems.

When you use ems for your media query triggers, you're using proportional units, related to the size of the text on the screen. As the base text size gets bigger, so, too, do your rems. When you resize text in your browser, like when your display is rendering it too small to read, smaller media queries will be applied, which will reflow your designs appropriate to the width of the screen.

One interesting implication here is that your TV may actually end up getting your mobile designs, just in case the “on-the-go mobile context” myth needed another nail in the coffin.