Page 3: Implementing Site Pinning with Internet Explorer 9 and Windows 7

By Bradley Jones


Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame

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.

Image 5

Figure 5: WebDeveloper.com in the standard IE 9 browser and displayed as an Pinned Site application

The value provided in this basic pinning is not trivial, but it isn’t necessarily enough to build the engagement desired. For the QuinStreet developer sites, there was a desire to give the users the ability to easily jump to a number of core areas of each site. On HTMLGoodies there are core sections that are popular with the majority of readers. The developers used Site Pinning to add a jumplist that allows the visitor to access the popular sections from the graphic pinned to the Windows Taskbar. On HTMLGoodies it is known that visitors like to go to the main page and the discussion forums. Additionally, there was a desire to promote the HTML5 Development Center. As such, these were each added to the jumplist as shown in Figure 6. Note that the menu in Figure 6 also shows some dynamic options, which will be covered in the next section

Image 6

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.

All of the Site Pinning functionality added to HTMLGoodies and its related sites up to Dynamic Tasks took just a few hours. Dynamic lists required more effort because they required that the sites expose the information to be displayed. In this case, the sites had to expose a list of the current articles. For example, in order for us to display the most recent articles on HTMLGoodies, a service was set up that could be called by JavaScript. If a service is accessible by JavaScript on the site, then it should be accessible to a dynamic jump list. It is just a matter of calling the pinning routines in your web page to display the items. The article <a href=” http://www.htmlgoodies.com/html5/client/Using-pinning.html” >“Top IE 9 Site Pinning Features”</a> shows the code necessary to do this. Like much of the site pinning logic, this too was just a few lines of code.

The one issue that was encountered when adding dynamic lists to HTMLGoodies is a known limitation of Site Pinning that currently exists. The dynamic list shows a list of the most recent articles created by a JavaScript running on the actual web page. This means the list can only be updated when the page is opened. If the page is closed, the Taskbar still lists the site application and will even show its dynamic menu, but the menu simply won’t get updated. In the case of HTMLGoodies, it would look like new articles are never published because the article list would never change. In the case of other sites, the work-around it to add a visual indicator saying when the list was last updated. Figure 6 shows what this work around looks like. The user can click on the last updated date and the site app will open and update the article list.

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.

Page 3 of 4

Previous Page
1 2 3 4
Next Page

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date