Giving VS Express website a new life with Silverlight

We recently revamped the website for the Visual Studio Express Editions and made it Silverlight enabled.

The approach was to add Silverlight without making it look like we just dropped something new into our existing site without any thought. I loved how the site turned out and decided that it would make an interesting case study for people out there who are thinking about taking their own website and giving it a new life with Silverlight.

According to the team, taking a static html site and making it into a Silverlight site was a fun process. We had two people work on it, a developer responsible for writing the XAML and JavaScript and a graphic designer. In keeping with the vision of the VS Express site of being simple, engaging and light (not many deep pages), we wanted to make sure the site clearly conveyed what Visual Studio Express was, how the tools can help someone and how someone could benefit from learning and using them, while at the same time keeping it cool and cutting edge. We also did not want to completely replace the existing Web site, so we reused the existing graphics that we already had.

Each Express product has a lot to offer that we want to showcase, but our goal was to keep things “thin”. The previous Visual Studio Express site had Product Tours we wanted to continue to offer; however, using static HTML would be a significant amount of HMTL coding, significant increase in the number of pages, and the menu navigation would get too complex. Silverlight offered the best solution in that it allowed us to create hot spots on a screenshot of the product and associate the hotspots with an image.  Using Silverlight, we were able to contain substantial interactive content and numerous graphical links on one landing page, instead of splitting the core navigation into several HTML pages. The end user experience is much more fluid.

We were able to reconstruct the graphical page layout in Microsoft Expression Blend, adding panels and buttons for any new and dynamic features. Blend also let us add transitional animations, such as panels opening and closing, and button rollover effects. We developed a Javascript class to wire up interactivity and supply the interface with some content from an external XML data source. The final application was embedded in a layered webpage alongside other HTML elements.  Blend allowed us to easily create and alter user interface animations during development. This helped for aesthetic consistency and the creation of small visual cues for user interaction

One of the main goals was to enable the visitor to view the site whether or not they have Silverlight installed. This is enabled by a simple JavaScript test on the client side. If Silverlight is not installed, the area would contain the Silverlight content is sized to position the "Install Silverlight" link in the center of the page, and a timer is set to periodically look to see if Silverlight is installed which enables the page to update itself if the visitor chooses to install Silverlight. This removes the need for the visitor to refresh the window. If Silverlight is installed, the default content is hidden. We included a inplaceInstallPrompt attribute on the call to create Silverlightto ensure that the visitor is not sent to a new page to install Silverlight. This creates a better experience for the visitors, as the complete Silverlight install can then happen within the context of the site. The timer then ensures that once Silverlight is installed, the new content is displayed.

The tools and frameworks that were used for this project were the Silverlight 1.0 runtime and the SIlverlight SDK along with Visual Studio 2008 Team Suite, Expression Blend, and Microsoft Silverlight Tools Beta 1 for Visual Studio 2008.

Over time, we are taking more and more of our existing web properties and enabling Silverlight content to deliver richer and more immersive experiences.

Namaste!