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 <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> 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 "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" 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:

<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>

and here's the code I added to my site to make that happen: 

[code language="html"]
&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;
&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;
&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;
&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;
&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;
[/code]

The <em>content</em> attribute allows you to specify the name, action and icon that you'd like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. 

<table style="border: 1px solid #000">
<tbody>
<tr>
<td>Name</td><td>Content</td>
</tr>
<tr>
<td>application-name</td>
<td>The name of the shortcut. If missing, the document title is used instead. </td>
</tr>
<tr>
<td>msapplication-tooltip</td><td>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. </td>
</tr>
<tr>
<td>msapplication-starturl</td>
<td>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. </td>
</tr>
<tr>
<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> 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 <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>
</tr>
<tr>
<td>msapplication-window</td>
<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.
				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>

				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. 
</td>
</tr>
</tbody>
</table>