User Experiences: Customizing Pinned Sites

With this week’s beta release, IE9 brings the most familiar experiences of Windows and makes them available for websites and the people who browse them. Users can pin sites in the taskbar just as they pin applications, and launch web tasks directly, the same way they launch everything else in Windows. Websites can program jump lists for pinned sites, to make common tasks easier for their users as part of the desktop experience. Sites can also program notifications when the user pins them in the task bar. The browser has a clean new design that reinforces the site’s visuals, with a large site icon, and that icon’s colors reflected in the back and forward buttons. IE9 does far more than provide shortcuts to sites on the desktop and reduce the space used in the browser interface.

In this post I describe how you, developers, can make the most of these capabilities in Windows and make your web sites shine.

People use many of their websites more like applications and not just webpages to be read. Examples include: Hotmail, Gmail, Bing, Yahoo Finance, CNN, Pandora, Hulu, Netflix, and many others. Today, websites don’t have a direct presence on the PC and you have to effectively “boot twice” – once for the OS, once for the browser – to get to them. To break this barrier and help sites to shine through Windows7, IE9 introduces the ability for any site to be pinned to the Taskbar, the most used interface in Windows. Pinning a site is as easy as dragging a tab to the Taskbar. Alternatively, people who have the taskbar position to the left, right, or top of the screen, can drag the favicon on the IE address bar and drop it on the taskbar to pin a site.

Tear tab out of the browser:

CNN tab being dragged out of IE9

Drop Tab on Taskbar:

CNN tab being dragged onto the Taskbar

After the site is pinned, notice that the focus is on the site. The sites brand shines through to the frame, with a large site icon, and the back and forward buttons match the site’s color.

CNN pinned site

Developers can customize the pinned experience for their site using a series of APIs called msSiteMode. The APIs are divided in two groups.

The first group defines a set of properties that are set on the site. These properties apply to any one using the site when it is pinned. This functionality is defined using meta-tags.

The second group defines a set of dynamic APIs that are used to surface information that is specific to an individual user. This functionality is defined using JavaScript APIs.

With IE9’s msSiteMode APIs, sites can surface notifications and status updates, enable common site and individual page commands, and provide quick access to commonly used destinations. For example, look at how the internet music site Jango allows you to interact directly with the site from thumbnail toolbar buttons, without having the browser window in the foreground.

Jango thumbnail controls from the Taskbar

This functionality enables new ways for people interact with your sites, and allows you to create a personalized experience for your users that is consistent with the way native applications work on Windows 7.

Jump List Commands

The Windows 7 Jump List brings to the surface commonly used destinations (nouns) and tasks (verbs) of an application. For commands applicable to the whole site, use Jump List Tasks to get the information in the hands of your customers. It allows people to perform common tasks without launching the site in advance.

The following screenshot shows how a site like Amazon could surface its most common navigation and site functionality directly from the Jump List by using Tasks. These commands can also be updated by the site at a later time. This functionality allows you to display site specific information that is fairly static and not updated frequently in the Jump List. These destinations will act as entry points on your site when the browser is not running.

Amazon jumplist from the Taskbar

The functionality is surfaced via HTML meta elements. The name of the meta element is msapplication-task with the name, destination, and icon of the Task in the content:

<META name="msapplication-task" content="name=Task 1;action-uri=https://host/Page1.html;icon-uri=https://host/icon1.ico"/>

Meta elements were chosen to represent Jump List Tasks because they provide a way to associate generic site destinations with a document without having to display them. They help us to define information on the page that is parsed but can be ignored if the site is not pinned. They also provide a mechanism to define site installation data that can be used by a user driven installation as well as an API installation. In a similar fashion, Google uses meta tags to control specific search engine crawling and indexing.

Custom Categories

As a developer, you can define custom categories or lists to provide quick access to commonly used destinations on your sites. Using these custom categories, people swiftly return to previously viewed sites, access unique user information (such as radio stations), or keep track of site interactions (perhaps a shopping list). Selecting one of these custom items will navigate directly to that item.

The next example shows a reminder item that is stored in a custom
“Notifications” category list. This functionality allows you to display user specific information dynamically in the Jump List to facilitate navigation. Because this information is persisted after the browser is closed, people can use these destinations as entry points into your site.

Jango Jumplist from the Taskbar

The functionality is surfaced via JavaScript APIs. You use msSiteModeCreateJumplist to create the custom category:

window.external.msSiteModeCreateJumplist('List1');

msSiteModeAddJumpListItem to add items to the in-memory representation of the category:

window.external.msSiteModeAddJumpListItem('Item 1', 'https://host/Item1.html', 'https://host/images/item1.ico');

and msSiteModeShowJumplist to display the list in the Jump List:

window.external.msSiteModeShowJumplist();

Notifications & Status

The taskbar allows Windows applications to show overlay icons to surface notifications or status updates. With IE9 you can use the msSiteMode APIs to apply multiple overlay icons to provide a rich set of notifications for your web sites.

The following example shows how you can use a search and numbers icons overlaid on the taskbar to let people know about results found using Twitter. This functionality allows you to notify people that the site requires their attention. Because this can be done while the browser window is minimized or obscured, it makes it easier to get people’s attention while they are working on other tasks.

Twitter TaskBar icons showing how icons can be layered on top of each other

The functionality is surfaced via JavaScript APIs. You use msSiteModeSetIconOverlay to turn the overlay on:

window.external.msSiteModeSetIconOverlay('https://host/images/overlay1.ico', 'Overlay 1');

And msSiteModeClearIconOverlay to turn the overlay off:

window.external.msSiteModeClearIconOverlay();

Thumbnail toolbar commands

Windows 7’s thumbnail toolbars allow users to access the application’s functionality even when the application is not in focus (or even visible). With msSiteMode APIs, people can access the site without the need to switch to it. The thumbnail toolbar buttons generate events that are sent to the webpage running inside the pinned site window. The events are sent back to the page to handle. Interactions with the page require the browser instance to be running but the browser window doesn’t have to in the foreground. It can be minimized.

The following example shows how these buttons might be used to control a website with podcasts or videos. Using this functionality, people can pause a running podcast without having to switch to the window, just like Windows Media Player. This functionality allows you to surface site commands that can directly interact with the webpage without accessing it.

Channel9 video player controls from the Taskbar

The thumbnail toolbar for sites are surfaced via JavaScript APIs. You use msSiteModeAddThumbBarButton to add a button to the in-memory Thumbnail toolbar:

btn1 = window.external.msSiteModeAddThumbBarButton( 'https://host/images/button1.ico', 'button 1');

And you use msSiteModeShowThumbBar to display the buttons in the Thumbnail toolbar area:

window.external.msSiteModeShowThumbBar();

Customizing the frame

We made several changes to the browser frame when you pin a site. To help bring the site’s identity into the frame, a large favicon is shown in top left corner of the frame. The icon also acts as a home button for the pinned site so users can easily get back to the starting point for the site. The icon uses the .ico file format which natively handles multiple different sizes within a single package. The 24x24 icon is used within the frame and the 32x32 icon is used on the Taskbar. By specifying a larger icon size, it is prominently placed as the top left button and serves as a way to navigate to the home page of the site. In addition, using different .ico files than your site’s main icon will make it easier for your users to quickly identify the tasks in your Jump List.

The back and forward buttons take on the dominant color of the site icon to help re-enforce the site’s branding. In addition, you can override the default and set the color of the navigation buttons displayed inside the browser window for your site. The example below shows how a site can specify a color code to navigation buttons to match the site icon.

Channel9 Pinned site icons and back/forward buttons

By providing a large site icon and customizing the color of the back and forward button, it is clear that the site is the focus. You can even have fun with the navigation button colors to match special occasions or events. The button color is surfaced via HTML meta element. The name of the meta element is msapplication-navbutton-color and the content is a CSS color value.

<meta name="msapplication-navbutton-color" content="red"/>

Sites on the Taskbar bring immediate focus and access to your site, and the browser recedes in the background. By using these APIs you can make your site shine and provide a familiar Windows7 experience for your site. For sample code on how to use these APIs please visit the Test Drive site.

For additional examples on how to add this to your site, you can reference the msSiteMode API Cookbook. We’re looking forward to seeing the kinds of pinned sites developers will create, and please send your feedback on the developer experience for pinned sites.

Israel Hilerio, Ph.D.
Principal Program Manager
Internet Explorer