Well the IE9 Beta has been live for nearly a month now, so no doubt many a developer out there has started exploiting some of the cool features of IE9. One such feature is the ability to pin your site to the Windows 7 taskbar. This means sites in IE9, can now behave in the same way as your everyday Windows 7 desktop apps. The following post talks to some of the implementation scenarios for Pinning and SiteMode. To help illustrate this a little, I’ve used some screenshots from Gorillaz.com, who have made the most of the Pinning and Custom Jump Lists features in IE9. I worked with them directly on their implementation.

Why Pin?

Well, it means your favourite sites will always be there in the task-bar. Only a click away. You won’t have to launch the browser and find it in your favourites. Any site can be Pinned in IE9 without the developer having to do anything. But, if the developer take’s advantage of this feature they can present to the user up to 5 typical tasks that the user may want to do on the site. So, it makes navigation of the site a snap. Furthermore, site owners/developers can create a Custom Jump List, to allow users  to store recent history of their activity on the site, or indeed it’s an opportunity for the site to push up to the minute content back to the user. The choice of scenario is down to the site here. Not to mention also that Taskbar icon overlays and Thumb-Bar Previews are available to sites that exploit IE9 Pinning and Jump List features.

However, as ever, and indeed given IE9 is in Beta, there are some things you should know about what it takes to implement Pinning and Custom Jump Lists. First of all, some terminology busting. I know there can be some misinterpretation over IE9 concepts like SiteMode and Pinning. It seems the terms can be used synonymously, when in fact, while related, they do mean different things.

What is Site Mode?

SiteMode essentially means that an IE9 site can exploit the Pinning features like Tasks and Custom Jump Lists. If a site is in SiteMode, these features will show up. A site can be in SiteMode in two situations:

1. A user elects to add their site to the Windows 7 Start Menu. This is initiated via script, which the developer has to implement on the site.
2. A user drags, the FavIcon of the site from the browser address-bar, or the Tab to the Windows 7 Taskbar. At this point the site is in SiteMode. Indeed the site is also Pinned at this point. But, if a user was to subsequently right click on the Site Icon in the taskbar and Unpin the site. The site, if still opened in the browser, will still appear in the Task-bar and is still considered to be in SiteMode.

To pin the site to the taskbar, drag the Favicon from the IE9 address bar or Tab.

What is Pinning?

This is quite a simple concept. Pinning is always user initiated. Pinning can happen in 3 places in IE9:

1. Start Menu: Even if the user has added their site to the Start Menu (as mentioned above in SiteMode definition).it may not be Pinned. The user has to right click on their site in the Start Menu and elect to Pin it. Once pinned, the site will appear at the top of the Start Menu.
2. The Taskbar: The user can drag the FavIcon from the address bar, (or they can drag a tab) to the Windows 7 task-bar. Note that by design in Windows, only a user can pin a specific item to the Windows Taskbar. This ensures predictable, safe and controlled user experience. The user is always in control of the taskbar.
3. In the Custom Jump List: If you right click on a link in a Custom Jump List, a user will have the option of Pinning this link. A separate Pinned section containing this link will appear in the Jump List.

Building a Custom Jump List

So, as you can see, SiteMode and Pinning are two different concepts. Okay, so now that you understand these concepts, here is an important consideration when building a Custom Jump List. At present it is not possible to do the following in IE9 Beta:

• You cannot detect if a Custom Jump List exists. You can override an existing Custom Jump List, by simply creating a new one, but you can’t determine if one exists.
• There is no way to handle a consistent first run experience using the events available in the SiteMode API. There is only 1 event, and it fires when a site is added to the Start Menu. However, remember a site can enter SiteMode when it is pinned to the Task-bar. So how do you know when to create a Jump List for the first time, if you are unclear of when a site first enters SiteMode?

The above is important when creating a Custom Jump List, because on subsequent visits to the site, as a developer you won’t know whether the Custom List needs to be created or simply added to with new content.  Ideally you should know if a Custom Jump List exists, before adding content to it. There is no way to know this. So how do you get around this, particularly if you want to implement a scenario like “Most Recently Used”.

Well at the moment, the solution is for a developer to recreate the jump list whenever there is a new browser session. I’m saying every session here, and not every page load, as you should be able to tell if this is the first time a user has activated a session via a cookie or equivalent. It also means that any content state you wish to persist between user sessions for Pinned sites may have to be stored on the server, and then pre-populated in the Custom Jump List when the user session starts. Essentially the logic might be:

1. A user opens a web-page in IE9, and a page load happens.
2. A Javascript detect (IsSiteMode) determines that the Site is in IE9 SiteMode. So Tasks and Custom Jump Lists can be used. (Woot!!)
3. If it’s the first time this “code is being called” this session, then
   1. Create a Custom Jump List  (“My Custom Jump List”)
   2. Add previously stored user activity to the Jump List, if this is necessary. **
   3. Update Cache, Session or Cookie to reflect that it’s not a first time session.

Now that the Custom Jump List is created, you can add links to it, as a user interacts with the site.

** Note 1: You will only need to prepopulate the newly created Jump List, if you need to retain content that was in the Custom Jump List from the previous session. The question to ask is “Is this important for the scenario you are trying to build?” A couple of scenarios for you to consider:

1. “Most Recently Used” scenario. At a basic level, if you just want to implement a Most Recently Used (MRU) list, this is really easy to do. Just keep adding entries to the Jump List. IE9 will implement FIFO logic for your entries. It will not duplicate entries and will scroll entries when the number of entries is too large to show. However, if you need to retain Custom Jump List content between site sessions  (so the user doesn’t lose what they looked at preciously) then you will need to store this jump list content for the user. If you don’t do this, then you will build a new MRU list for every new session.

“Gorillaz Links” is a Custom Jump List of Most Recently Used favourites and content.

2. “Latest Content” scenario. If you are just updating content in the Custom Jump List on every visit, and the content is not user specific, then it may be fine for you not to worry about pre-population of past content, and just concern yourself with adding new content from that session. For example, a blogger or photographer may simply want the Custom Jump List to contain links to their latest Photos and/or Blog Posts. This content could be the same for all users. That way their latest content is there in the Jump List between browser sessions. ***

*** Note 2: There is no push mechanism to the Custom Jump List once a site has been closed in the browser. Yes, even if the site is Pinned to the Taskbar or in the Start Menu. The SiteMode API which allows you to create the Custom Jump List can only be interrogated when the site is open in the browser. You could implement a meta-refresh on the site, so that Custom Jump Lists could be updated with new content, if the site remains open but is not being used.

That’s it. If you have any feedback or questions on the above, then fire away. Of course you can find all the SiteMode API documentation on MSDN. Here are some useful resources:

• MSDN Pinning and Custom Jump Lists
• IE9 Desktop Integration Using Pinning - Windows Summit (Note, you will need to quickly register on the Windows Summit site before being able to access this material)