IE9: integrate your website in Windows 7
As you know Internet Explorer 9 is now available in beta and you can download it here:
www.beautyoftheweb.com
Among the new features, you can now integrate your websites with the Windows 7 desktop. Users can pin any website to the Windows 7 Taskbar, Desktop, or Start Menu. Websites can use this experience without having to modify any of their existing content, but as a developer you can extend this and provide customized JumpLists and Notifications by adding Metadata and JavaScript code.
If you run IE9 now (on Windows 7), you can try by pinning www.bing.com website to your taskbar and you’ll get a nice icon with JumpList (links to web pages) like any Windows program:
Link to the full article on MSDN:
http://msdn.microsoft.com/en-us/ie/dd797411.aspx
In this post I want to make a small intro to show you how easy it is.
Make your website “Windows 7 aware” (from IE9)
Pinning any website from IE9 (drag a tab to Windows 7 Taskbar) gives you a classic shortcut and a right-click gives you this default menu:
By adding just a couple of Metadata in your html you can improve the user experience by enabling a nice integration with Windows 7 (Find Metadata description later in this post):
<meta name="application-name" content="RunAtServer Montreal" />
<meta name="msapplication-tooltip" content="RunAtServer - Silverlight and Windows Phone Experts in Montreal" />
<meta name="msapplication-starturl" content="http://www.runatserver.com" />
<meta name="msapplication-window" content="width=1024;height=780" />
<meta name="msapplication-navbutton-color" content="orange" />
<meta name="msapplication-task" content="name=Presentation; action-uri=http://www.runatserver.com/Index.aspx; icon-uri=/favicon.ico" />
<meta name="msapplication-task" content="name=Trainings catalog; action-uri=http://www.runatserver.com/Trainings.aspx; icon-uri=/favicon.ico" />
<meta name="msapplication-task" content="name=Silverlight Tour cities and dates; action-uri=http://www.runatserver.com/SilverlightTraining.aspx?tab=dates; icon-uri=/favicon.ico" />
<meta name="msapplication-task" content="name=Contact; action-uri=http://www.runatserver.com/ContactUs.aspx; icon-uri=/favicon.ico" />
You can try now and pin www.runatserver.com to your Taskbar and you’ll get this:
In this website we use ASP.NET so I added these Metadata in the MasterPage to get the same experience from any page.
I also use Resource (resx files) to localize the Metadata, so the Jumplist will be in the user’s language (on that website). Pinning again the website in french refresh the Jumplist:
Others website with a similar Windows 7 integration enabled (ironic that MSDN does not use that yet):
Metadata description
From the MSDN article:
| Name | Content |
| application-name | The name of the shortcut. If missing, the document title is used instead. |
| msapplication-tooltip | 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. |
| msapplication-starturl | 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. |
| msapplication-navbutton-color | The color of the Back and Forward 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 Color Table. If this meta element is absent, the color is based on the shortcut icon. |
| msapplication-window | The initial size of the pinned site browser window.
|
Then you can add one or more “tasks” (5 maximum) to populate the Jumplist items:
<META name="msapplication-task"
content="name=Task 1;
action-uri=http://host/Page1.html;
icon-uri=http://host/icon1.ico"/>
Note: Links defined in tasks are not restricted to your domain.
And more…
With a bit of JavaScript you can also add categories, overlay icons, thumbnail preview with action buttons, …
I encourage you to read the MSDN article to learn more:
http://msdn.microsoft.com/library/gg131029(VS.85).aspx
Conclusion
With IE9 Microsoft wants to integrate websites in your desktop like any Windows app. Pinned sites run in a special branded IE window with no toolbars. It is a good thing as more than just “linked documents” the web is now a collection of applications, and as web developers you know that lot’s of issues comes from… the user (and your bugs)! Browsers are evil to business apps, things like location bar, favorites, Yahoo toolbar, Gooogle toolbar, MSN toolbar, Paypal toolbar, … add distraction and are error prone. I can see a good use of pinned sites for intranet web apps, where the user will launch the app from a taskbar icon or even the start menu and almost won’t notice it is a browser window.
Might be more useful than WebSlice…