IE9 Customisation

By
Dave
Project
Published
13 Oct 2010 23:06
Last Modified
13 Jan 2013 18:18

Internet Explorer 9 Beta enables some specific integration features for Windows 7, such as "site pinning" to the Taskbar, Start Menu, and desktop (effectively Site Specific Browsers), customising the navigation button colours, and providing Jump Lists. I'll discuss how I've supported each of these features for my Blog Engine.

Icons

A site can be "pinned" to the Windows 7 Taskbar, Start Menu, and Desktop, for example by dragging the IE9 tab or the address bar icon to the relevant target. The icons used for pinning are defined in the favicon.ico file in the root of the web site. This file contains a number of images at different resolutions which are used for the address bar, tab, browser "Home" button, Taskbar, Start Menu, and pinning the site by dragging the address bar icon.

The icon file is specified in the site.master View using the following tags:

<link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico" />
<link rel="icon" type="image/ico" href="/blog/favicon.ico" />
IE9 Beta Taskbar Site Pinning

Figure 1. IE9 Beta Taskbar Site Pinning

Navigation Buttons

I set the colour of the back and forward navigation buttons (see Figure 2) to match the color of my current site header with the following tag:

<meta name="msapplication-navbutton-color" content="#303030" />
IE9 Beta Header

Figure 2. IE9 Beta header

Jump Lists

I was already passing a ViewModel containing the categories and item counts to the master page, so adding links to each category in a Jump List (see Figure 3) using the following tag structure was trivial.

<meta name="msapplication-task" content="name=Category name (item count);action-uri=/blog/archive/category/Random-Stuff;icon-uri=/blog/favicon.ico" />
IE9 Beta Jump List

Figure 3. IE9 Beta Jump List

Pinning the site to the Start Menu also gives access to the Jump List, as shown below in Figure 4.

IE9 Beta Star Menu Site Pinning with Jump List

Figure 4. IE9 Beta Start Menu Site Pinning with Jump List

Add Comment

*
*
*
Captcha
*
*Required