Web on TV: Strategies for Success

1. Interacting with TVs
2. Problems & how to fix them
3. Easy ways to test without a TV
4. Ideal content for TV

Solution： font-size: 2.5em;

Caution:

• transform: scale(2.5); is slow
• TV's built-in zoom is too limited

Solution: Remove non-essential elements

Caution:

• Consider hiding rather than removing some elements

Solution: <div tabindex="0">Click</div>
daniemon.com/tech/utils/spatial.html

Caution:

• Many links on a page can make it awkward to scroll
• Don't forget focus: a:hover, a:focus { ... }

Solution: nav-left:#item9; nav-right:#item1;
daniemon.com/tech/css3/navdir

Caution:

• Remember to change CSS when you edit IDs

Solution: If possible, make it unnecessary

Caution:

• Only the [0-9], [OK] & [Back] keys are available

Solution 1: CSS Media Queries (daniemon.com/tech/utils/webtv.html)

Solution 2: Ask the user

Caution:

• TVs can lie sometimes
• The "tv" Media Type is no longer used

Solution: Use CSS, not JavaScript, and keep it minimal

Caution:

• Animating top/left is better than animating size
• Your PC can fool you. Test on a TV

Opera: [Shift] + [↑ ↓ ← →]

1. Install VirtualBox (virtualbox.org)
2. Add Opera TV emulator (opera.com/tv/emulator)
3. Install video codecs
4. Create a shared local folder

• Has a prime place in most family's living rooms
• Large, bright screen with good speakers
• Everyone, young & old, knows how to use it
• Many people can watch at the same time