With Internet Explorer 9 Beta is out, I’m poking around with some of the new features available. One of the new features called website pinning allows you to “pin” a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn’t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called “Jump Lists” and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.
The code to make jump lists available is very straightforward. A new meta tag called “msapplication-task” is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:
and here’s the code I added to my site to make that happen:
<meta name="application-name" content="Rey Bango Front-end Developer"/>
<meta name="msapplication-tooltip" content="Launch Rey Bango’s Blog"/>
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />
<link rel="shortcut icon" href="/images/favicon.ico" />
The content attribute allows you to specify the name, action and icon that you’d like to use for your jump list nav entry. Here’s a list of the available meta elements that you can use to format your jump lists:
|application-name||The name of the shortcut. If missing, the document title is used instead.|
|msapplication-tooltip||Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop.|
|msapplication-starturl||The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed.|
|msapplication-navbutton-color||The color of the Back and Forward buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see Color Table. If this meta element is absent, the color is based on the shortcut icon.|
|msapplication-window||The initial size of the pinned site browser window. Content sub-elements provide size as number N, separated by a semicolon.
Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance.
I could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:
<meta name="msapplication-starturl" content="https://blog.reybango.com/about/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
What About Other Browsers?
Unfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it’s a slick feature and I honestly don’t know if other browser makers could do something like this. Let’s see if they consider adopting this type of UX.
To actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process: