Page 3: Implementing Site Pinning with Internet Explorer 9 and Windows 7
Setting up Static Information and Tasks
Simply dragging and pinning the Favicon or a “drag-enabled graphic” enable pinning, but not much is gained for the site visitors beyond the ability to launch the website as an application from the Taskbar. When a site is launched from the Taskbar it opens as an application, which means the standard IE 9 browser windows will be slightly different. The user will see customized colors that are more in line with the site’s primary colors. Extra menu bars and such will be hidden so that the visitor gets the maximum space for the site as an application. Figure 5 shows the WebDeveloper.com site pulled up as a website on the left and as a pinned application on the right. You can see the subtle differences in the two. This site was not set up to take advantage of Site Pinning, although it does have a standard small Favicon.
Figure 5: WebDeveloper.com in the standard IE 9 browser and displayed as an Pinned Site application
Figure 6: Static items in a Pinned Site.
The static items allow a visitor to take two clicks to arrive at a core section of the site. This quick access to shortcuts makes it easy for a user to re-engage with the site. On each of the developer sites, the core areas were added as static items to the jump list.
In addition to setting up linked areas for a site, there are also additional items that can be set as a static part of Site Pinning. This includes setting a starting URL for the pinning, which allows the base URL for a pinned site to be set instead of the current page. Additionally, you can customize colors for buttons such as the forward and back button on the browser window. Finally, you can customize the text displayed. This is all done with just a few lines of code in the HTML meta data. Like the other features covered to this point, the effort to add this code was minor and only took a few minutes. The initial customized code for HTMLGoodies in Listing 2:
Listing 2: HTMLGoodies Static Pinning Meta data
<link rel="icon" type="image/x-icon" href="http://www.htmlgoodies.com/Favicon.ico">
<meta name="application-name" content="HTMLGoodies" />
<meta name="msapplication-tooltip" content="HTMLGoodies: The Ultimate HTML Resource" />
<meta name="msapplication-starturl" content="http://www.htmlgoodies.com/" />
<!-- Static Jump list task items -->
<meta name="msapplication-task" content="name=Latest HTMLGoodies Articles; action-uri=http://www.htmlgoodies.com/; icon-uri=http://www.htmlgoodies.com/Favicon.ico" />
<meta name="msapplication-task" content="name=HTML5 Development Center; action-uri= http://www.htmlgoodies.com/html5/; icon-uri=http://www.htmlgoodies.com/Favicon.ico" />
<meta name="msapplication-task-separator" content="Forum Tasks" />
<meta name="msapplication-task" content="name=HTML Discussion Forums; action-uri= http://www.webdeveloper.com/forum/forumdisplay.php?f=2; icon-uri=http://www.htmlgoodies.com/Favicon.ico" />
Once the above code was written for HTMLGoodies, it was only a matter of a few minute to cut, paste and modify it for the other sites. Of course, there are a few gotchas to watch out for. Specifically, you need to make sure there is a closing slash at the end of the start URL.
Setting up Dynamic Tasks
The team at HTMLGoodies felt that a great deal of value would come from the ability to add Dynamic Tasks to the jump lists. Developers can take advantage of a Dynamic Task to programmatically change what is displayed. A dynamic jump list can be updated whenever a person visits the site or site application. One of the biggest benefits of Site Pinning for a site like HTMLGoodies is the ability to put a list of the newest articles onto the jumplist menu each time the person comes to the site. You can see this functionality displayed in Figure 6. This feature allows visitors who are away from the site to simply click on the Taskbar and see a list of new articles. Because this list is dynamic it will be updated each time the user comes to the site.
Using Pinning Notifications
One way to increase user engagement is to make it blatantly obvious that something has changed. You can do this using the Site Pinning notification feature. This allows the Site Pinned button to flash to get the users attention. You often see this type of notification in Windows 7 when an application needs to get your attention to take an action such as granting permission to update an application. This same functionality can be added to Site Pinning.
This feature was evaluated for HTMLGoodies and the other sites, but the decision was made to not implement at this time. In the future, this feature might be added to a site like Codeguru.com and tied to the user’s profile. Users currently have the option to get email notifications for various events such as a new post in a subscribed discussion thread. Instead of an email, they will get the option of a taskbar notification. This means the icon will flash when something has been posted. Using the dynamic lists, a link would be added to the jump list to take the user directly to the discussion.
Similar functionality is built into the forum software the site is using. The pinning option, however, has more potential and avoids pop-ups. The biggest reason for the delay in applying such functionality on the sites was the same limitation on the dynamic links. The notification only works if the actual Web application is open. If you were not on Codeguru, then the notification option would not work.