Optimizing Your Site for Internet Explorer 9's New Features: Part 1

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.

Report a problem with article
Previous Story

Microsoft Internet Explorer 9 beta preview

Next Story

Bing overtakes Yahoo! for the first time

44 Comments

Commenting is disabled on this article.

I do wonder...

I created a favicon in all the recommended sizes, just like Neowin did here. On the taskbar, the 32x32 icon looks great. However, when you launch your website from this taskbar button, they seem to use a smaller (16x16) size which is then resized to 32x32 for the top-left icon in IE9. Which looks ugly. Any clues why they don't just use the 32x32 version there?

It's the same on CNN and Facebook as well.


It's better then before but I'm totally disappointed with IE9 Beta(YES! It's still beta), it still can't render page correctly...as for an example Neowin.net..when i put my cursor on banner (that image sliding thing)...other bowsers show white shadow but IE9 doesn't. I've already faced another problem with Facebook. In IE9 when i get new notification it shows but doesn't update just notification menu. Just high lights my old notification. Totally annoying.

I would have preferred some sort of open source agreement on this.

Hopefully Google, Mozilla and Opera swallow some pride and support it to.

thatguyandrew1992 said,

Even the regular fav icon isn't appearing on my website. hm

i tried it on my full site (thebettertwin.co.uk) and it does display the favicon and even changes the buttons orange (without me actually specifying) but i get no jumplists no matter what i try.

No password manager or bookmark syncing to windows live skydrive
now those are features we need, and the reason I'm going straight back to Chrome.

qdave said,
There is a weird issue with favorites indeed!

I know what you mean, opens on the right and docks on the left. the Icon that you click to dock it does point towards the left though

If you add some meta tags for tasks let's say, and you add these after somebody has pinned their site, will the menu update or will they have to repin?

Tanshin said,
If you add some meta tags for tasks let's say, and you add these after somebody has pinned their site, will the menu update or will they have to repin?

I believe jump list items update for a user the next time the user opens the site on their machine.

xiphi said,

Just drag the tab to the taskbar.
thanks, it seems that having my taskbar on the top doesn't allow me to pin favorites. Since the windows collides with the taskbar, it only maximizes the windows. I found a long way to ping favorites. Tools > File > Add to Start Menu > Start Menu (Orb) > Right click on favorite > Ping to Taskbar

Mouettus said,
on another note. I don't feel like I want to add my entire bookmarks collection on my taskbar
just add the most important ones to you

Mouettus said,
on another note. I don't feel like I want to add my entire bookmarks collection on my taskbar

Why don't you just not do it then?

how many new news on the front page since the last time I visited --> a little number in the bottom right corner

that would be neat!

Julius Caro said,
How is having to code for IE9 differently a step forward? We've spent years trying to stop having to do it...

I think you're getting confused. The OS integration stuff is essentially "added extras" You site is still the core part of the browser experience, and IE9s mantra is "same markup", i.e. (excuse the pun) having the same markup presented the same in all browsers. The meta element isn't an IE specific element, just its use in this particular scenario is.

Julius Caro said,
How is having to code for IE9 differently a step forward? We've spent years trying to stop having to do it...

This is just for pinning the site on the taskbar, you missed something(or everything) there...

robert_dll said,

This is just for pinning the site on the taskbar, you missed something(or everything) there...

I hope these tasks can be carried out by the user as well. I like the feature, but it makes sense to have it user driven. Not every site is going to spend the time implementing this, and the ones that do may not include the content/links I would prefer. It would be better if I could grab an URL, drag it to a pinned shortcut and have it added to the jumplist.

Julius Caro said,
How is having to code for IE9 differently a step forward? We've spent years trying to stop having to do it...

Creating custom meta tags is different than having custom html, css and js code to make a web page works on IE.

The problem with IE 6 is it did not support a big part of the html, css and js standard. If IE 9 support those standard i don't see the problem with having custom meta tags to let you pin web site to the task bar. Anyway it's something other browsers could support easily.

Bad thing was having to write custom code using **** like dx filter to enable transparency of png files.

Edited by LaP, Sep 15 2010, 6:03pm :

Julius Caro said,
How is having to code for IE9 differently a step forward? We've spent years trying to stop having to do it...

The title of the article raised a big red flag in my mind too. But after taking the time to actually read the article, it is obvious that it is referring to custom tags (i.e., non-standard ones) that add extra functionality. This isn't the same web standards breaking mess that was the result of a ubiquitous IE6 Internet at the beginning of the 2000's.

Apple's Safari, and Google Chrome have similar web browser specific tagging...

This is a great connection between the OS and the internet. The icon's now act as VERY limited apps for the websites, but nevertheless give function and mirror quick bits of info from those website.

I'd like to see some sort of RSS feed added as well to the icons, maybe with the desktop gadgets (i know you can do the RSS feeds already, but tied in with the icons).

In a way, the icons are becoming simple "apps" for Windows 7 users.