In the run-up to the launch of Internet Explorer 9, Microsoft has been highlighting its dedication to ensuring developers can use the same markup across multiple browsers without requiring convoluted hacks to achieve consistency. While the rendering engine has been much improved with a focus on supporting CSS3 and HTML5 features, the browser itself isn't left out in terms of new capabilities, either. In this series of articles, we'll be looking at how developers can leverage new features in the browser to showcase their content effectively.
Website Pinning
Like Web Slices, introduced in IE8 and supported here on Neowin, IE9 includes features that enables developers to push their content beyond the confines of the browser window, allowing users to access their favourite content quickly and easily. A user is now able to drag the browser tab to the Windows 7 taskbar, where it is pinned similarly to other applications. The first benefit of this to your visitors is easy access to your site.
Developer note 1: To facilitate this feature, ensure your site's favicon includes versions in higher resolutions; Microsoft recommends dimensions of 16x16, 24x24 and 32x32.
There's more, however. The Jump List of your pinned web application, a feature included in Windows 7 and shown when the user hovers over a taskbar item, can be customised by a site through the inclusion of extra markup in your pages. Give it a try on Neowin and you should see something new.
Developer note 2: Jump Lists require extra markup in the head element of your web page, in the form of IE9-specific meta tags
Open up Neowin's markup in your favourite text editor and you'll see some of the code we've added:
Looking at these lines in turn, it's not difficult to see how the Jump List is generated. Customization of the name and tooltip of your pinned web application, as well as the URL to which it navigates upon clicking is defined in the application-name, msapplication-tooltip and msapplication-starturl tags respectively.
Multiple msapplication-task tags allow you to specify the name, page URL and icon URL of the Jump List item. These then appear in a Tasks section of the Jump List, as shown in the image below.
In the second part of this series of articles, we'll look more at this feature and its capabilities. IE9 includes rich developer support for customising this pinned site, including the use of overlay icons (to notify users of unread messages, for example) and dynamically-generated Jump List items via JavaScript. We'll take a look at this in the coming days.
44 Comments - Add comment