Erwyn van der Meer

The new interactive-TV (iTV) website of the Rabobank has gone live this week. In this case going live, means being featured in the Windows Media Center Online Spotlight for the Netherlands. Check out this screenshot:



You can see the URL of the Online Spotlight in this screenshot, but you must have a Media Center PC to view it as in the screenshot above. This page will redirect any other user agent to the Media Center product page on the Microsoft site.

Or you can do as I did: trick IE6.0 to sent a HTTP user-agent header with a value of something like Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Media Center PC 4.0; .NET CLR 1.0.3705; MediaCenter 5.1.2710.27320). You can fake the user agent string in Firefox through the User Agent Switcher Extension, but the Online Spotlight page will look absolutely horrible in Firefox.

Rabobank is the first Dutch bank with a TV banking site. In the UK TV banking has been available with some banks since 1999.

If you would like to see what Rabobank TV looks like, you can access it directly through itv.rabobank.nl. This will even work in Firefox, Opera or Pocket Internet Explorer without faking your user-agent string! I haven't tested in Safari, because I don't have a Mac.

Here is what the site looks like in Firefox:



At the bottom it has a disclaimer that says (translated from Dutch) "Rabobank is optimized for Windows Media Center and may not work optimally in your browser". The disclaimer is there, because the site does provide a better user experience in Windows Media Center and IE6.0. However all content, including video, is accessible from all devices that support XHTML 1.0. One caveat: video is currently only available in Windows Media Video 9 format, so your device has to support this format.  For example, it works on my Pocket PC using WiFi.

Rabobank TV consists of two parts: the content site http://itv.rabobank.nl/ and the secure TV banking site https://itvbankieren.rabobank.nl/. The content site was built using ASP.NET 2.0 on the Windows platform by LogicaCMG for the Rabobank. The secure site uses another technology on a non-Windows platform and was built internally at the Rabobank. The graphical design for both sites was done by  another company. If you are a customer of the Rabobank the TV-banking site allows you to check up on your accounts, pay bills, move money from your savings account to your checkings account, etc. All using a remote control. Using a keyboard or mouse is optional.

The TV banking site is currently only accessible using Windows Media Center. I wasn't deeply involved in the development and design of the secure site, so I will not talk about the technology used by the TV banking site.

Although Rabobank TV has been optimized for Windows Media Center/IE6.0, the content site is quite unique in how it is built. I am not aware of any other Media Center hosted HTML application that even remotely works in other browsers. Rabobank TV works in Firefox because of the requirement that  Rabobank TV should be able to support other iTV devices with only a couple of weeks of additional development effort. Exampes of iTV devices are set-top boxes that are distributed by cable companies. The more advanced versions have embedded web browsers that can display content from the Internet.

The magic of our solution: using XHTML 1.0, CSS 2.1 and unobtrusive JavaScript. Of course that's no real magic for developing ordinary websites, because it's the current best practice.

However, developing for Windows Media Center has some unique challenges. One reason is that its underlying browser is IE6.0 (with its usual CSS non-conformance problems). This is amplified by some WMC specific issues that force us to use IE's quirks mode. Another reason are the bad examples in the Windows Media Center SDK provided by Microsoft. All Media Center websites that I am aware of follow these bad practices. For example, check out Reuters, Nederland 4, Free Record Shop and Fox Sports in IE6.0 and Firefox.

More details on our solution to follow in an upcoming blog post. I'll end with a screenshot of a Rabobank TV page showing realtime(*) AEX quotes:



(*) In the middle of the night the difference between delayed stock quotes and realtime quotes is not that impressive ;)


Filed under: .NET