Rahul Dravid

About The Project

Rahul Sharad Dravid is a former Indian cricketer and captain of the Indian national team. He is the Director of Cricket Operations at the National Cricket Academy, Bengaluru, India. He also monitors the progress of India A and India under-19 cricket teams. It was an honor and a privilege to work on a website for Mr. Dravid.

The Challenges

The site was designed by Narayan Gopalan of Interaction Design Ideas. The home page has a unique layout comprising of six image sliders, each starting and changing at a random time interval, and the images are in black and white and they become colorful on focus. At the time, developers usually accomplished this effect with two images, one for color, and one for desaturated, and transitioned between them “on hover”, pretty straight forward for a single-use case. For a smoother transition, you would have to pre-load the alternate image. I didn’t have the luxury to do that since I had six sliders, each containing anywhere between 5 to 10 images.

I decided to experiment with css-filters that had just become available, but with minimal browser support. I explained the situation to the stakeholders and told them that the worst-case scenario would be that images would always appear with color, and they agreed. Earlier versions of IE supported -ms-filters, but this was later discontinued from IE10 onwards but IE10 supported SVG filters. With a combination of -webkit-filters, -ms-filters, SVG filters and a whole lot of experimentation, a smooth transitioning effect was achieved across all browsers with major market share at the time.

Another challenge was the grid layout in the inside pages, these would be dynamic. This was before flexbox/CSS grids were a thing. The effect was achieved using a little javascript script that arranged the “boxes” into a neat grid after page load based on the available space. The site also features a bespoke HTML5 audio-player as well.

Last Updated: 14 April 2020.
Project Year: 2012