Introduction to Pinned Sites

  • Article

Users of Windows Internet Explorer 9 and Internet Explorer 10  can pin any website to the Windows 7 taskbar or Windows 8 Start screen just as they pin applications. When a website is pinned, it can be opened quickly and conveniently. A Pinned site is more than just a shortcut, however. With very little effort, developers can access features of the Windows 7 taskbar or Windows 8 Start screen from their websites—features that can greatly improve a user's ability to navigate, control, and interact with the sites they visit.

Note  For more info about pinned sites on new Windows UI Start screen, see Pinned sites in Windows 8

 

This introduction describes the features of the Windows 7 taskbar that Pinned sites can implement, shows you how a Pinned site window differs from a normal instance of Internet Explorer 9, and explains why, as a site developer, you might add Pinned site features to the websites that you create.

  • What is a Pinned Site?
    • Benefits of Pinned sites
    • Taskbar Basics
    • The Pinned site API
  • Related topics

What is a Pinned Site?

The Windows 7 taskbar and new Windows UI Start screen show both actively running applications and shortcuts to applications that you use frequently. By pinning an application to the taskbar or Start screen, you can quickly find and launch the applications you care about most. Using Internet Explorer 9, you can also pin websites to the desktop taskbar, which enables you to launch sites the same way you launch other applications in Windows. Although any website (http and https only) can be pinned, only those sites that use the features of the taskbar are likely to remain pinned there for very long.

Benefits of Pinned sites

Websites that implement the Pinned site API can feel more like a native Windows application. Site developers can build a more compelling website that have higher engagement by:

  • Declaring a static list of tasks for fast navigation to common destinations within a site.
  • Creating a dynamic list of destinations that are personalized and relevant to the user.
  • Drawing the user back to the website by flashing the taskbar button or displaying a icon overlay.
  • Adding remote controls and commands to the taskbar's preview window.
  • Making the browser look and feel like your site by changing the color of the Back and Forward buttons.
  • Promoting a high-resolution site icon that extends your site's brand outside the browser.

Note  Pinned site functionality is available in all document modes of Internet Explorer 9, and in Internet Explorer 10 on Windows 8. You can add Pinned site features without converting your site to support the latest version of HTML or CSS.

 

Taskbar Basics

The following graphic shows the taskbar elements in Windows 7.

Feature Description
Taskbar button When you click a Pinned site button on the taskbar, the website launches in a new browser window that has been customized specifically for the site. The site icon is visible on the taskbar button.
Overlay icons A 16x16 pixel notification icon that appears on top of the normal site icon. This notification indicates that something has changed in the website, such as new mail arriving, receiving a chat request, or being outbid in an auction. The notification is visible only when the site is running. The 16x16 pixel notification icon isn't available in the new Windows UI Start screen.
Jump List The Jump List can contain static and dynamic tasks that act as shortcuts into the Pinned site. A user can further customize their experience by pinning these items to the Jump List.
Jump List category A Pinned site can create and fill a single custom Jump List category by using script in the webpage. This list is dynamic.
Jump List tasks In addition to the Jump List category, a Pinned site can predefine a list of tasks in metadata. This list is static.
Thumbnail Toolbar A Pinned site can create up to seven buttons that appear on the taskbar thumbnail window. These buttons can be visible or hidden, active or inactive, or toggle between different button states. The Thumbnail Toolbar isn't available in Internet Explorer 10 on the new Windows UI .

 

At the very least, Pinned sites should define a list of tasks for the most frequently used features of the website. Beyond that, site developers can create a custom Jump List category for additional tasks and user-specific destinations. More advanced sites can provide icon overlays to notify you about the status of a website, such as the number of new messages in your Inbox. Finally, some sites might also benefit from remote controls on the Thumbnail Toolbar.

The Pinned site API

You implement Pinned site functionality by using the following two programming models:

The scenarios in the topics that follow explain how to add Pinned site features to your webpage. For an full index of development tasks, see How to Use this Documentation.

Fresh Tweets 2.0 - demo for Windows 8

High Quality Visuals for Pinned Sites in Windows 8

How to Build a Pinned Site in Less than a Day

Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9

PDC'10 Session: Taking Advantage of Pinned Sites with Internet Explorer 9 and Windows 7