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 Silverlight to 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!

Comments (13)

  1. D. Lambert says:

    I think it’s great that you’ve done this work, but frankly a little disappointing that the VS Express products can’t use the Silverlight Tools that you used to build the VS Express web site.  Are there plans to support the Silverlight Tools on VS Express?

  2. zzz says:

    The site opens in <0.5 seconds which is good however the silverlight portion of it says "loading" for something like 20 seconds.

    This doesn’t make any sense at all because you would expect the html+images web page has to do multiple requests to download all the html,js etc but only one request to download a compressed silverlight package containing the entire site.

    Something to investigate/work on there as people expect sites to open under a second.

  3. @ Head says:

    Earlier today I followed Soma&#39;s link to the updated Visual Studio Express pages . Soma gave emphasis

  4. Mark says:

    Yeah it was slow for me too.  Besides it took a lot of different technologies to put a simple site like that together. Pretty much par for the course with Microsoft.

    They have a habit a taking technologies that work like Visual Basic, Visual FoxPro and FrontPage, killing them off then giving of something new based on (.BLOAT) that performs worse, requires a lot more code and then spin it as progress.  I just don’t get it ?!?!?!? These technologies  deserve the same fate as Vista.

  5. Somasegar says:

    Hi Lambert,

    We are planning on adding SL tooling support to Visual Web Developer later this year.

    -somasegar

  6. D. Lambert says:

    Fantastic – I think the Express tools are a great way for beginning developers to get started in .Net development, and I think SL has the "eye candy" factor that will appeal to new developers as well as people looking to upgrade.  Thanks!

  7. P says:

    Googleability — how did you guys manage to make this page indexable and googleable? I wasn’t able to select any of the text in this, so I couldn’t copy anything from it into another window.

    Also, CTRL+Click did not work in the Silverlight portions. I was not able to open any of the links in a new tab.

  8. Happy Thursday says:

    This is a great example of a really *bad* use of RIA technology. This is not an "application" it is a website. And as "P" pointed out above, it breaks all the normal website UI standards. It is not searchable, you cannot CTRL or SHIFT+ Click the links. You cannot deep link to a specific "page".

    This sort of design went out of fashion a couple years after Flash became popular. Please let’s not start it again with Silverlight. SL2 is a great tool for rich internet **applications** … not websites.

    A slightly less offensive design here would have been to work Silverlight controls into specific sections of the site. Such as the top toolbar (though you would still need textual links or a sitemap for searchability).

  9. Somasegar says:

    Hi – you are absolutely right in that SL2 is a great tool for rich internet applications.

    However, as I mentioned in this blog post this web site was done using Silverlight 1.0.

    -somasegar

  10. [原文发表地址]: Giving VS Express website a new life with Silverlight [原文发表时间]: Friday, March 21, 2008 8:26

  11. MegP_MS says:

    Hi P – You asked about how this site is indexed and available to search engines.  The VS Express site was launched as a static html site prior to deploying the SL content.  The search engines are able to pick the site up then and index it.  Furthermore, the static html site still exists; however, if SL is loaded on the computer, the SL page will take priority over the static page.

  12. Peter says:

    I totally disagree with "Happy Thursday" that SL2.0 is great for just RIA’s and not sites.  From what I understand, text will be indexable, the back button will work as expected, etc.  Take a look at the keynote from MIX ’08 at visitmix.com to see more about that.