How to Prepare Your Website for IE 9

Websites designed to take advantage of the unique features in Internet Explorer 9 provide an immersive user experience that can increase customer loyalty and drive traffic. To obtain these benefits, though, you'll need to optimize your site to capitalize on IE 9.

The latest flagship browser from Microsoft is more than just an incremental update. It offers unprecedented integration between Windows and the Web, essentially extending the desktop experience to include the Web itself.

As our use of the Web has evolved, more people are embracing cloud-based applications such as Gmail, Box.net, and Mint.com. The experience of using sites like these is more like using a traditional desktop application, though the application lives out on the Web. IE 9 can provide a similar type of interactive experience for any Website. To start, any user can get this integration simply by dragging a Website icon to the Windows 7 task bar, just as you might with any software application.

Pinning a site to the task bar makes it more visible and directly accessible for the user. But to give users a reason to want to pin your site to the task bar--and more importantly, to give them the means to interact with your site as if it were an application installed on their local PC--you need to take advantage of Jump Lists, a Windows 7 feature that displays menu options for jumping directly to specific functions, or for accessing frequently or recently used features.

Windows 7 Task Bar

IE 9 also ties in with unique features of Windows 7 that enable users to treat your Website as if it were a local application. You can create custom Jump List menus that appear when users click your Website's icon on the Windows task bar. Jump Lists let users access frequently or recently used content, and receive dynamic alerts when new content appears.

Making suitable tweaks to customize your Website for IE 9 does require at least some understanding of HTML and Web coding. With a little knowledge, though, you can do the job in just a few minutes.

One trick is to drag the icon for any Website from IE 9's address bar to your Windows 7 task bar, pinning it there permanently. You'll see the site's logo on the task bar, and you can click it to access that Website instantly.

LinkedIn and Windows Live are among the sites that have taken advantage of Jump Lists to enable themselves to function more like applications. With LinkedIn or Windows Live, users can click items in the Jump List to go directly to specific pages or functions within the site.

Interactive functions of the Windows 7 task bar
This Microsoft diagram shows interactive functions of the Windows 7 task bar.

Customizing Jump Lists

Pinning Facebook to the Windows 7 task bar provides little more than a simple shortcut to the site, but LinkedIn and Windows Live deliver a more integrated experience resembling a locally installed software application like Outlook. Adding Jump List tasks to your site is relatively simple, so why not give your visitors a reason to pin your site to their task bar?

With IE 9 and Windows 7, the Jump List tasks link to static URLs that a user can click and access directly even when the pinned site itself is not open. You can include Jump List tasks for your site's most common features so that users can jump straight to those functions without having to open their browser and navigate to the appropriate page manually.

Jump Lists for Facebook, LinkedIn, and Windows Live.
From the Windows 7 task bar, the Jump List for Facebook (left) is bare-bones, whereas those for LinkedIn (middle) and Windows Live (right) take greater advantage of it.

The linked tasks are stored as static URLs--paths that link directly to a specific site or function. You can define a maximum of five Jump List tasks using HTML metatags. The metatags, which define basic information about the site, are cached with the pinned site. Here's an example of how to define Jump List tasks for your Website, excerpted from a Microsoft document titled "Win7 Desktop Integration with IE9," by Israel Hilerio, Ph.D (the document itself is not available online, but the content and tips within it can be found online here):

<META name="msapplication-task"

content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"/>

<META name="msapplication-task"

content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"/>

Hilerio explains that this code defines two tags: 'Task 1' and 'Task 2'. Selecting 'Task 1' will cause the software routine to display the Page1.html site, and selecting 'Task 2' will cause it to display Page2.html, which is an external site on the Microsoft.com domain. Each task will open within its own tab of the pinned-site browser instance. If the pinned site is not currently open, clicking one of these Jump List menu items will open a new browser instance.

Next page: How to create custom categories for your Jump Lists...

Create Custom Jump List Categories

Your Website can also add Jump List categories that extend its functionality beyond the five Jump List tasks. The Jump List categories allow you to go directly to such destinations as files, documents, or URLs. You can use SiteMode APIs to create a custom Jump List category with links that are unique to each specific user, such as a personal profile page.

The Jump List categories enable your site to deliver dynamic information to users even when they're not actively engaged on the site. You can use this capability to provide access to user-specific history such as sites visited or files opened, or you can use it for alerts and notifications about activity related to the site--for example, new messages received or upcoming events.

To create a custom Jump List category, you must go through the following stages, as explained in Hilerio's document:

Category Creation

First call the method for creating a custom category label. The example code shown below creates a custom category named 'List1'. You have to call this method at least once before using any of the other methods associated with creating custom Jump List category actions. The category label won't appear until the Jump List category is populated with at least one item.

window.external.msSiteModeCreateJumplist('List1');

Item Creation

The example code below illustrates how to create three Jump List category list items named 'Item1', 'Item2', and 'Item3'. The name parameter is followed first by a parameter defining the URL that the item will navigate to, and then by a parameter specifying the icon to display for the given item.

window.external.msSiteModeAddJumpListItem('Item 1', 'http://host/Item1.html', 'http://host/images/item1.ico');
window.external.msSiteModeAddJumpListItem('Item 2', 'http://host/Item2.html', 'http://host/images/item2.ico');
window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', 'images/item3.ico');

List Display

The preceding code creates the items for the list, but it does not display them. Use the following sample code to display the in-memory list of items on the actual Jump List:

window.external.msSiteModeShowJumplist();

Clear List

If the Jump List category is populated with site history or recent activities, those actions may expire. You can use the following code to clear the items from the custom Jump List category:

window.external.msSiteModeClearJumplist();

Adding alerts to a Jump List.
You can also add alerts to the Jump List for your Website.
You can use the methods shown here to create and populate a custom Jump List category for your site. You can arrange to display a maximum of 12 items at one time in a custom category. Duplicate items are ignored; items that exceed the maximum or that don't fit on the display due to resolution or font-size variations are not displayed.

Display Overlay Icons

One of the best features of IE 9 on Windows 7 is its ability to display an overlay icon on the pinned-site taskbar button. Why is the display overlay icon so important? Because a pinned site may be sitting idle, hidden by other sites or applications. The overlay icon gives you a way to display dynamic content or updates of things that are going on behind the scenes that may catch users' attention and drive them to action.

You could display a small bell indicating an event or appointment, or an envelope icon to let the user know that a new message has arrived. The overlay icon appears in the lower-right corner of the pinned-site task bar button. The overlay icons are not visible if the site is not opened, however, or if the site is not actually pinned to the task bar.

The following code sample adds overlay1.ico on top of the associated task bar button for the pinned site, and includes a hover-over tool tip identifying the overlay icon with the string 'Overlay 1':

window.external.msSiteModeSetIconOverlay('http://host/images/overlay1.ico', 'Overlay 1');

To clear the overlay icon, use the following code:

window.external.msSiteModeClearIconOverlay();

This series of examples is just a drop in the bucket. Check out Microsoft's Internet Explorer 9 Guide for Developers for comprehensive coverage of the unique features of IE 9 and explanations of how to customize your Website to take advantage of them.

Bear in mind, though, that IE 9 is compatible only with Windows 7 and Windows Vista, meaning that your IE 9 customizations will be worthless for two out of three PCs. Keep things in perspective, and don't go overboard investing time and effort to cater to this one browser.

Because businesses are slow to upgrade, consumers are leading the charge toward adopting Windows 7 and Internet Explorer 9. Consequently, these changes will have a direct impact with how the general public interacts with your site.

If your site targets average consumers, you should explore and take advantage of the unique features of IE 9. You don't have to be an expert programmer, and you don't have to redesign your entire Website to give your visitors a reason to pin your site to their task bar--and from there to deliver a more immersive, application-like experience.

Subscribe to the Daily Downloads Newsletter

Comments