IE9
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.
CREATING WEBSITES TARGETED AT IE 9 USERS
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?
Here’s a code snippet on how to do it
<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”/>
Sample
MOVING FORWARD
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();
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.
Post dubbed from 🙂 :
PC World
Tech things I stumble upon 