Erwyn van der Meer

The new www.rabobank.nl web site has just gone live. I am proud to have been one of the members of the team at the Rabobank that developed this web site. The development of this site was the project I blogged about back in August 2005. Rabobank is one of the largest Dutch banks. It was the first Dutch bank with a website in 1994. Rabobank has the largest online-banking customer base in Europe.

This is what the new site looks like:



As you can see, this site looks great in Mozilla Firefox. But it also looks great in Internet Explorer 6.0. The site is rendered using XHTML 1.0 Strict. It uses CSS 2.1 and JavaScript in a non-obtrusive way. That means the site degrades gracefully if JavaScript and/or CSS are turned off or not available in the browser. The site is also highly accessible for people with disabilities ("drempels weg" in Dutch). This can best be seen by turning CSS and JavaScript off using the Web Developer Toolbar extension for Firefox. Without CSS and JavaScript the page is rendered as:



The home page is now just one long column with lots of links. In the picture above I have split up the text in three columns for easier display. What was displayed as a drop down list box in the first screen shot (with CSS+JavaScript turned on), is just a bullet list of links in this rendition. And that is just what a list of links should be semantically. So if you look at the HTML source for the page you see something like: <ul><li><a ..>..</a></li><li>..</li></ul>. When JavaScript is enabled, this list is transformed to a drop down list box. If you look really carefully at the two versions, you can actually see some accessibility issues (all of the same kind). Guess which one? The cause is probably that the content editors that maintain this page (using a Content Management System) mostly look at the stylized version. The fix should be easy.

Most pages on the new site are static content (XHTML files) on the webserver. Most dynamic pages are rendered using ASP.NET 1.1. One of the larger modules that was developed in .NET is the "Naar uw Bank" ("To your Bank" in English) module. It has mapping functionality and you can get directions to get to a Rabobank office near you (or on the other side of the Netherlands if you like).



Above you can see a page from "Naar uw Bank". It uses Lokatienet web services (server-side) to get the directions and the URL of  the map. The mark up for this page is a combination of dynamic mark up generated by ASP.NET and a navigation context page. The navigation context page is the static content page from the Content Management System that linked to this dynamic page. In this case the navigation context page is http://www.rabobank.nl/particulieren/lokalebanken/uhr/. Check out my blog post from August 2005 for an explanation of how this works.

Thanks a lot to all of the project members at the Rabobank for making the new www.rabobank.nl possible. I have learned some good lessons during this project that I could apply to the development of another website for the Rabobank. That website will soon go live as well. Going live in this case means that it will appear in the Online Spotlight of Windows Media Center for the Netherlands. This web site is the Windows Media Center project I blogged about. More details about Rabobank TV (and the URL ;) to follow in the near future. If you are really good with DNS queries for the rabobank.nl domain you can already look at the site. It has already gone live in the sense that it is available if you know the URL.
Filed under: .NET