IE9: integrate your website in Windows 7
As you know Internet Explorer 9 is now available in beta and you can download it here:
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:
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):
From the MSDN article:
|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.
Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance.
Then you can add one or more “tasks” (5 maximum) to populate the Jumplist items:
I encourage you to read the MSDN article to learn more:
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…