Forgot your password?
typodupeerror
GUI Graphics Television The Internet Technology

Inside Netflix's WebKit-Based UI For TV Devices 39

Posted by timothy
from the making-things-pretty dept.
DeviceGuru writes with this interesting snippet on a modern approach to GUI design: "Netflix uses WebKit, JavaScript, HTML5, and CSS3 to build user interfaces that are delivered to millions of game consoles, Blu-ray players, Internet-connected TVs, and devices such as the Roku player and D-Link Boxee Box. Matt McCarthy and Kim Trott, device UI engineering managers at Netflix, have just published 50 presentation slides from their recent talk at OSCON 2011 in which they explained how Netflix develops its WebKit-based user interfaces."
This discussion has been archived. No new comments can be posted.

Inside Netflix's WebKit-Based UI For TV Devices

Comments Filter:
  • We don't need no stinking slides.

  • by Dolphinzilla (199489) on Saturday September 10, 2011 @09:42AM (#37361908) Journal

    I read the presentation and I found it interesting because of the challenges of developing the interface for a wide variety of platforms with vastly differing capabilities. I am in a constant battle with my own software guys to get them to develop for a lower performance hardware, instead of always giving me code that needs the next generation hardware to have an acceptable user experience. Sometime I miss the old days when software developers HAD to think about the hardware they were running on and optimize their software appropriately. I can remember when some software would actually run TOO fast when it was run on newer faster computers....Those days are long gone, many of the software guys I know have little understanding of what goes on under the hood and really don't care unfortunately - I am going to make sure some of them read this presentation

  • Some performance tips make sense. CSS transforms basically paint an image into GPU memory, so this makes a lot of sense:

    Keep layers small
    – Don’t inadvertently create gigantic layers
    – Memory consumption = width x height x 4 (bit depth)

    However, other tips don't make as much sense:

    Use closures sparingly & only where necessary

    Closures are in the heart of JavaScript. You can't avoid them even if you want to. Instead, learn to write destruction lifecycles for your objects in which you expressively remove references that may cause leaks.

  • by TouchAndGo (1799300) on Saturday September 10, 2011 @11:50AM (#37362548)

    All I know is that the UI on the WD live tv recently changed to more closely match the travesty that they turned their webpage into, and whoever is designing their UIs needs a kick in the head.

    • by Dahamma (304068)

      Yep. PS3 is also the same Netflix pile of ugly, which is such a shame because the possibilities on that platform are nearly endless.

      Then again, it does follow Netflix' business model - only make it usable enough to keep the customer subscribed, not to keep them using it. With a flat rate streaming subscription the more usable they make it, the smaller their profit margin...

  • by 0xdeadbeef (28836)

    I was impressed with it until I tried to use Netflix on my iPad and it crawled like a sloth in molasses. Recently, I browsed through the movie selection on my Xbox for the first time and a long while, and was blown away with how smooth and slick the user interface is.

    Native, even using something like .Net, will always beat HTML.

  • by whitefox (16740) on Saturday September 10, 2011 @01:59PM (#37363232)
    Is this the same stack they use on their website? The same one that renders their website unusable on iPads?
  • by guanxi (216397) on Saturday September 10, 2011 @03:50PM (#37363852)

    Different platforms have different needs and capabilities. Why is the UI in my very limited Roku interface (with its very limted controller [gawkerassets.com]) the same as the one on my very capable Windows laptop (i.e., on their website)?

    Maybe it seems cost-effective (if you don't count user frustration), but the horizontal-scrolling UI works when it's controlled by hardware arrow keys (Roku), but it's much less than optimal on a webpage (Windows). And my Windows laptop can handle much more functionality than a Roku; too bad they removed all/most non-Roku functionality from the website.

    In the slideshow, they acknowledge there are differences between platform UI needs, but they seem to try a one-size-fits all approach. Doesn't Netflix have the resources to develop multiple interfaces?

  • It's so slow on the Wii! I recently upgraded from an ancient installation on the wii and was surprised to find out it was less buggy but much slower. They must have gone from native code to web-based. Bleh.
  • So it it uses webkit and all these open standards why cant i use netflix on my linux box?
    • by Y-Crate (540566)

      So it it uses webkit and all these open standards why cant i use netflix on my linux box?

      Because the studios said so.

      • by NuShrike (561140)

        re Linux, it's on all Android 2.2 and 2.3+. Closest you're going to get at this point.

        • by tlhIngan (30335)

          re Linux, it's on all Android 2.2 and 2.3+. Closest you're going to get at this point.

          It's on SOME Android devices. Not all. Only the ones with some DRM mechanism on there.

          Now, if you've got a rooted device, you can hack-install it on non-approved devices.

Nothing is rich but the inexhaustible wealth of nature. She shows us only surfaces, but she is a million fathoms deep. -- Ralph Waldo Emerson

Working...