Monday, April 11, 2011

Internet Explorer 9 introduces a new feature: pinned sites that offer better integration with the Windows 7 desktop. Basically this comes down to the capability to add a website to the Windows 7 taskbar and it can be controlled from the website what jumplist items will appears for the taskbar pinned item. In this jumplist, a website can put links to specific frequently visited areas of the website. You can start diving into all the details of the new capabilities of Internet Explorer 9 pinned sites in this MSDN article:
Out of curiosity, we've now also implemented this feature for the TMS website and this is how it looks:

Each jumplist item that was added is specified via a meta tag on the web page. The structure of the meta tag for a jump list item is:

The name attribute "msapplication-task" specifies this is a jump list item, the content attribute the caption of the jump list item, the link to a section of the website is set via the action attribute and finally, an icon can be specified via the icon attribute. Note that the image must effectively be an icon. The jump list item doesn't support any other image formats.
For some reason, Microsoft decided that 5 jump list items are enough, which seems a bit limited in my opinion. Other than this, there is also a Javascript API to manipulate jump list items and to overlay images on the taskbar pinned item. This could be used for example to show a small balloon indicator with a number of new items on the website. Also here, a limitation is that the overlay can only be a static image, so, to be able to handle any number of "new items" that can be indicated, you'd need to build a large set of overlay images all with different numbers.
All in all, the new pinned sites are a nice & practical feature in Internet Explorer 9 for frequently visited website. I have been told that future versions of Chrome would also support it. So, make your website also taskbar pin ready.

Bruno Fierens


This blog post has not received any comments yet.

Add a new comment:
  You will receive a confirmation mail with a link to validate your comment, so please use a valid email address.
Change Image
Fill in the characters from the image above:

All fields are required.

Previous  |  Next  |  Index