A Simple IE9 Site Pinning Pattern, and One Gotcha

Artikkeli
02/17/2011

IE9 is running hot these days, with a hot start with the beta and now the recently released RC. There are even some new site pinning features in the RC. After working with several customers recently on implementations, let’s go through a simple implementation pattern. I want to update a few learnings since I last posted on this topic. The basic pattern here is house the static jump list and a fixed static jump list in the home page. This is a simple way to start with site pinning, and is not the best guidance if you can truly leverage dynamic jump lists.

Enhance the Favicon

Be sure to update your icon file with the additional sizes.

Basic: 16x16; 32x32

Recommended: 16x16; 32x32; 48x48 to support 120 DPI

Optimal: 16x16; 24x24; 32x32; 64x64 to support up to 144 DPI

In a standard configuration, the taskbar icon will be 32x32, the Jump List destination icon will be 16x16, the thumbnail preview buttons will be 16x16, and the overlay icons will be 16x16. The image on the top left hand corner of the pinned site browser window holds a 24x24 version of the specified favicon. Using different .ico files, from the site favicon, to represent actions or destinations on the Jump List items and tasks will make it easier for your users to quickly identify the tasks they want to execute.

Prepare Your Site

While IE9 Standards mode is not required, be nice to your users and indicate the standards level that your supports. C’mon, be a big boy!

<meta http-equiv="X-UA-Compatible" content="IE=9">

Definitely indicate where your favicon is located. And include the higher resolution images.

<link rel="icon" type="image/x-icon" href="favicon.ico">

Apply the install meta elements on all pages in the site

    1: <meta name="application-name" content="Your Web Site" />
    2: <meta name="msapplication-tooltip" content="Your Tag Line" />
    3: <meta name="msapplication-starturl" content="https://www.YourSite.com/" />
    4: <meta name="msapplication-navbutton-color" content="#ff8a00" />

These elements are already well documented, but pay special attention to msapplication-starturl. Here’s the gotcha. One recurring issue that I’ve seen is that an incorrect value here can give you fits. If not set correctly, there is no jump list and no error message. There are several ways to set the value, but the easiest is a fully qualified URL to your home page root. In most cases, you will store your jump list in your home page and this page is probably the default page in your domain root. Just make sure that it has the WWW and trailing slash, and points to the folder. One way to check: what does your address bar look like when you’re viewing the home page.

Apply the runtime meta elements for your static jump list

These elements are read each time the pinned site is opened up. Nothing much new here from my previous post.

    1: <meta name="msapplication-task" content="name=News;action-uri=https://www.YourSite.com/news;icon-uri=favicon.ico" />

Create a dynamic jump list

If your site does not have AJAX style interactions already today, then the cool dynamic jump list scenarios might not be there for you easily. So, just create the items up front on every home page re-visit. Yes, dynamic jump lists were intended for user specific experiences, but you can use them to extend your static list limit of 5. Here’s a sample.

    1: try
    2: {
    3:     if (window.external.msIsSiteMode())
    4:     {
    5:         window.external.msSiteModeClearJumplist();
    6:         window.external.msSiteModeCreateJumplist('Your Heading');
    7:         window.external.msSiteModeAddJumpListItem('News Flash', 'https://www.YourSite.com/news/1', 'newsflash.ico');
    8:  
    9:         window.external.msSiteModeShowJumpList();
   10:  
   11:         window.external.msSiteModeActivate();
   12:     }
   13: } catch (e)
   14: { // different browser :-)

A Few Learnings:

You may or may not need to clear the list, depends on your scheme. If you’re adding items over time, you may not want to reset the list. If you’re doing a batch style scheme (where you want the last few updates to show), then you might want to minimize the items and therefore do a reset.
It’s now OK to repeatedly call msSiteModeCreateJumpList. Before the RC, re-creating the category would reset the list of items. Now, it’s non-destructive. This is important, as calling msSiteModeAddJumpListItem doesn’t work unless you’ve previously created the list. The list does live across sessions.
If you want to allow the consumer to view the updated list immediately, call msSiteModeShowJumpList.
Another nice effect is msSiteModeActivate, which makes the taskbar button flash. It should be used within reason, but it’s a nice addition to the notification capabilities. Also goes nicely with overlay icons.
One interesting addition is to have an item that indicates when the jump list was last updated. The item not only serves as a reminder that the consumer might be missing something, it also provides a way to refresh the item. Just point it to the home page.
Also check out a new topic, Creating a First-Run Experience

Discoverability

There has been a lot of discussion and thought around this topic. Personally, I would have added a visual indicator built into the chrome that allows a consumer to see that the current site supports “site pinning”. But, those decisions happen above my pay grade. In the mean time, you’ll want to inform your customers that you have site pinning capabilities. Huffington Post has a nice model for this – showing a temporary message to IE9 users at the top of their page. You could also dedicate some ad space or other real estate to consumers for a special message.

New in the RC is the ability to tag an image that you would build. This image can be dragged to the task bar, and site pinning will be initiated. All it takes is the msPinSite class, and a cool, informative image from you. When the image is dragged, the user will see a favicon in the drag window, which is your hint that you set this up correctly.

    1: <img src="WeSupportSitePinning.gif" class="msPinSite"/>

Conclusion

We have some really interesting partners taking interest in IE9 site pinning. I think the best scenarios are yet to come. I can’t wait to see the innovative implementations at the launch. But, you don’t have to wait – jump on it today. Smile with tongue out

Jaa