As with many developments that extend functionality, regardless of the browser involved, I suppose that’s true. For me, however, the decision to make use of those features is driven less by time and inclination than by client demand. If your client or boss wants users to be able to do things like pin their website to the taskbar, the question is not whether to do it, but how to doit, and do it so that it helps to meet your client’s goals.

Microsoft clearly wants Internet Explorer 9 to not just be a window into a website, but a means of delivering a great user experience while helping website owners achieve their goals. What pinned sites offer is a way to build the relationship between the website owner and the website user—the customer, if it’s a commercial website—without the browser getting in the way.

As IE9 browser share grows, that has the potential to be worth millions to website owners in terms of user engagement. According to BuildMyPinnedSite.com, some big websites have already weighed-in on the value:

The notion of decreasing the role of the browser is widespread – everyone is reducing the amount of screen space taken up by browser chrome, toolbars, scrollbars in order to deliver more content. IE9 takes that a step further by communicating browser-based information without the user having to go to the browser at all, or at least not until they need to.

Pinned sites are a key part of that approach, by making the taskbar icon much more than a quick link to a particular website or application. The icon itself can be used to deliver information and empower the user without having to load pages in the browser. The aim is to send the user back to the browser when the content warrants it. Simple, smart and potentially very powerful.

In this article, we’re going to look at just how to do that. If you need to refresh yourself on the basics of pinned sites, take a look back at our earlier article or go to BuildMyPinnedSite.com to build your own site in a few minutes.

Now, let’s get stuck in.

Why Use Pinned sites?

Pinned sites are a way of extending the functionality of your website onto the desktop. Users can pin your site to the taskbar, start menu, or desktop and once they do, you can unlock some great features you might not otherwise have access to like Favicons, Jump Lists, Notifications and Thumbnail Toolbars.

These features allow you to customize the information a website provides to a user via the taskbar (or desktop, or start menu) icon.

Let’s jump right in and see how Notifications work.

Notifications – Letting the User Know Something Has Changed

Notifications are pretty self explanatory: they allow you to notify the user of changes to your website. Two examples of using Notifications are changing the appearance of the icon overlay for your pinned site, and flashing the pinned site icon to get the user’s attention. Let’s take a look at changing the icon overlay.

Icon Overlays

By default when you create a pinned site, the default icon is the favorite icon from the website. Adding an icon overlay creates a visual effect that the user notices instantly.

The first thing you must check is whether or not the site was launched as a pinned site. Finding this out is easy by making a call to msIsSiteMode. It’ll return undefined if it’s not.

bstrDescription – an optional string value that provides an accessible description of the icon overlay.

The following example displays the functionality I want to focus on. When the website is launched as a pinned site, every four seconds it updates the icon overlay to either display the traffic lights as on or off.

The image below shows the icon overlay when the traffic lights are on.

Figure 1. Traffic Lights On

The image below shows the icon overlay when the traffic lights are off.

Figure 2. Traffic Lights Off

Flashing Pinned Site Buttons

If an icon overlay isn’t getting your users’ attention, then flashing the pinned site button will. Enabling this feature is as easy as calling msSiteModeActivate. This function expects no parameters. To demonstrate how to use this feature I created a sample page that contains one input button. If after four seconds the user doesn’t click the button, the pinned site button will flash.

The following image shows the pinned site when it is in the foreground.

Figure 3. Pinned site Not Active

And this image shows the pinned site when it is sitting behind another window.

Figure 4. Pinned site Active

A caveat when you’re using this is that the pinned site must be behind another window. If the pinned site is in the foreground, this method does nothing and you maybe sitting there wondering why nothing is happening.

Working with the Thumbnail Toolbar Buttons

Working with icon overlays is cool, but to give your site that extra touch of class you can make use of the Thumbnail Toolbar Buttons. In a nutshell, the thumbnail toolbar lets you create interactive controls that supplement the behavior of your webpage. When the user clicks a button, the onmsthumbnailclick is raised, which means you can react to what the user is doing. To create the thumbnail toolbar you call the msSiteModeAddThumbBarButtonfunction. There are two parameters for msSiteModeAddThumbBarButton and they are:

bstrIconUrl – a required string value of the absolute URL of an icon.

bstrTooltip – a required string value of the name of the button, which is displayed as a tooltip.

Once you have defined your toolbar buttons, you need to call msSiteModeShowThumbBar. This enables the thumbnail toolbar preview of a pinned site. You can include up to seven buttons on the toolbar. Once you call msSiteModeShowThumbBar, new buttons cannot be added to the toolbar. The following example demonstrates how to get a thumbnail toolbar up and running.

The toolbar buttons in this example are an apple, grape and an orange. I want to extend this example and add the functionality to react when the user clicks a toolbar button. Here’s the code to do that.

If you want to do more than disable the button, you can also update the icon on the button by calling msSiteModeAddButtonStyle. This defines an alternative icon image and tooltip for the specified button. There are three parameters for msSiteModeAddButtonStyle and they are:

uiButtonID – a required integer value that specifies the ID of the button that was clicked.

Even this article has really only scratched the surface of what you can do with pinned sites, but I hope it’s given you some perspective on how to set up the extended functionality that Internet Explorer 9 offers, and see why website owners might want their developers to implement that functionality.

And I haven’t even taken apart what you can do with Jump Lists – that’s a whole new article in itself.

I don’t think there’s much doubt that not only IE9 but other browsers will take pinned sites further in the near future. Getting the browser out of the way is going to be a key part of building the relationships between website owners and website users.

What do you think? Can you see the potential for pinned sites? Can you afford to ignore that kind of functionality? Or do you think there are better ways to build those relationships?

SitePoint Content Partner

This tutorial has been made possible by the support of Microsoft. In cooperation with Microsoft and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you.

Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET, ASPInsider, Telerik Insider and a regular presenter at conferences and user groups throughout Australia and New Zealand. Follow him on twitter @malcolmsheridan.