Optimizing the Silverlight Install Experience

Last night I put the finishing touches on my March 2008 Wicked Code column for MSDN Magazine. Titled “Tips, Tricks, and Best Practices for Developing Silverlight 1.0 Applications,” it offers up an assortment of—surprise!—tips, tricks, and best practices for building better, faster, and more maintainable Silverlight apps.

One of the best practices documented in the article has to do with improving the install experience for users who visit your site and don’t have Silverlight installed. As a teaser, and because this is information that needs to be out there, here is a brief excerpt from the column. There’s more (LOTS more) in the column, including sample code, but you’ll have to wait for the magazine to get that!

Too many Silverlight applications offer an underwhelming install experience to users who  don’t have Silverlight installed, as exemplified by the barren landscape pictured below. Silverlight.createObjectEx—the function that’s typically called to instantiate a Silverlight control—displays a “Get Microsoft Silverlight” button when Silverlight isn’t present. Clicking the button transports the user to the Silverlight Web site to download and install Silverlight. You can improve the experience somewhat by setting Silverlight.createObjectEx’s inplaceInstallPrompt parameter to true, enabling the user to download and install Silverlight without leaving the Web page. But even that leaves something to be desired, especially when Silverlight comprises most or all of the content on the page.

Microsoft recently published a document that should be required reading for Silverlight developers. Titled “Silverlight Installation Experience Guide,” it’s available for downloading along with sample code from Microsoft’s Web site. The document outlines a general technique for displaying HTML content (including a “Get Microsoft Silverlight” button and browser-specific instructions) in a Silverlight DIV when Silverlight isn’t installed, and XAML content when it is. The idea is to paint a picture of what the user would see if Silverlight were installed, and hopefully to entice him or her to click the button.

The sample application accompanying this article demonstrates one way to offer an improved install experience. The screen shot below shows what the home page looks like to a visitor who doesn’t have Silverlight installed. Behind the “Get Microsoft Silverlight” button is a shaded version of the same UX the user would see if Silverlight were installed. Because the call to Silverlight.createObjectEx includes an inplaceInstallPrompt=”true” parameter, the user can install Silverlight without leaving the Web page. And to top it off, the home page includes logic to create the Silverlight control after installation is complete, eliminating the need for a manual refresh. (This feature works great in IE because IE doesn’t have to be restarted after Silverlight is installed. It’s powerless to work in browsers that require a restart, unfortunately.)

The JavaScript that drives the install experience lives in Default.html. Most Silverlight applications structure the code and markup that creates a Silverlight control like this:

The sample app, which uses timer-driven animations to revolve an automobile, structures it this way instead: