14 Days Free Technical Video Training from WintellectNOW

  

Bring your web sites to the desktop with IE 9 Pinned Sites

Tags: IE

Pinned Sites, a new feature released with IE 9, takes desktop/browser integration to a whole new level. Pinned sites are the easiest way to create a more interactive experience between the user and your web application, therefore providing more value to the users. And who doesn't want that?

What are pinned sites?

Before IE 9, the easiest way to access any web site was to place a shortcut of it on the taskbar, start menu, desktop or other easy to reach area in Windows. Other users instead set a homepage or created toolbar bookmarks. While it's fine to have shortcuts, none of these techniques provide any value for integrating web and desktop user experiences as they're only shortcuts.

Below are some great reasons demonstrating what pinned sites can do for you:

  • Users can more quickly access your web site by choosing from a list of your site's various entry point URLS from the Windows 7 taskbar Jump Lists.
  • Developers can easily create jump list items without much code, and it integrates with Windows 7 perfectly. Developers can also send notifications to the pinned site dynamically.
  • Companies can deploy IE 9 pinned sites to user desktops to seamlessly integrate multiple web applications, mixing intranet, and extranet and external sites.
  • Pinned site do not have to be ASP.NET sites or even built with Microsoft technologies. Pinned site can be basic web pages written in HTML & JavaScript. Much like a VISA credit cart, pinned sites are accepted everywhere with IE9.

Technically, every site can be a pinned site. You can pin any web site to the taskbar from IE, and a default pinned site/jump list is created for it. The default jump list will look like this (basic icon, standard items in list):

image17_thumb

When a user launches a pinned site from the taskbar, IE 9 makes a few changes to, with the most notable change being that its shell matches the color scheme of your site, based on favicon colors. IE 9 also hides all toolbars and moves the home button, which is now represented by the favicon. The home button now stays to the far left of the tabs/buttons. A launched pinned site looks something like this.

image_thumb8

Pinned sites are fast way to add and integrate lots of functionality into any site, as IE takes advantage of HTML <meta> tags and JavaScript to provide a robust integration experience.

Pinned site features

  • Jump Lists
    • IE 9 Jump Lists behave the same as application Jump Lists for Windows 7. By adding tasks to jump lists, a website can surface its most frequently used commands to users. You can define Jump List tasks based on both your website’s features and the key actions a user is expected to perform. Using JavaScript, you can also create and add tasks to jump lists dynamically as well as push notifications to the taskbar.
  • Thumbnail toolbars
    • Developers can use toolbar icons (usually a favicon.ico) for display in the Windows 7 taskbar. When a user right clicks the taskbar icon, the jump list will present the choices defined by the developer, or a set of default choices if no <meta> tags exist.
  • Notifications
    • Just as Windows 7 applications do, pinned sites can also communicate information to users by displaying an overlay icon on top of the pinned site’s taskbar button. Notifications are a great way to provide timely status reports, news, and other information to the user, without forcing him/her to periodically check the site manually to view status updates.

To take advantage of these great features, all you need to do is add <meta> tags to the <head> tag of any master, layout page, .html file, etc... Any of these file types can serve as a home for the <meta> tags used to generate the pinned site jump lists. Although most of the tags are <meta> tags, a few <link> tags are necessary, and you might already have these included in your site anyway (e.g., for a favicon).

Your site as a Pinned Site

To make the most of IE 9's new features, we want to customize the jump lists by adding some tasks to it, complete with matching icons. After reading through the code below, it's easy to follow the pattern to create more, so let's inspect the following HTML used to modify this blog to support pinned sites.

<link rel="shortcut icon" type=image/x-icon href="/images/vsfavicon.ico" />
<link rel=icon type=image/ico href="/images/vsfavicon.ico" />
<meta name="msapplication-task" content="name=Rachel on the Web;action-uri=http://rachelappel.com;icon-uri=/images/rachfavicon.ico" />
<meta name="msapplication-task" content="name=Rachel on Twitter;action-uri=http://twitter.com/rachelappel;icon-uri=/images/twitter_16.ico" />
<meta name="msapplication-task" content="name=Rachel on Facebook;action-uri=http://facebook.com/rachelappel;icon-uri=/images/facebook.ico" />
<meta name="msapplication-task" content="name=NY Metro Events;action-uri=events/;icon-uri=/images/calendar.ico" />
<meta name="msapplication-task" content="name=My Speaking Calendar;action-uri=speaking/;icon-uri=/images/calendar.ico" />
<meta name="msapplication-task" content="name=Beauty of the Web;action-uri=http://beautyoftheweb.com;icon-uri=/images/ie9favicon.ico" />

Examining the above tags reveals that the msapplication-starturl and msapplication-tooltip attribute values combined with the <link> tags define the base metadata for the pinned site. Along with that, several <meta> tags with a name of msapplication-task link to different sites. Inside each msapplication-task <meta> tag you'll find a string describing task properties such as the task name (display text) , URIs pointed at assets/URLS. Notice that you can include any URL in the jump lists, they don't have to be from the site domain of the pinned site.

Here's the site running as a pinned site:

image_thumb1

Once you've created a pinned site, you'll want to to let the users know that they your site is "pinnable". The pinned sites API (or even just plain JS) has multiple ways you can this, including:

  • Fly-ins, drop-downs, banners, and div effects are regions that detect the Pinned Site capabilities of the browser, and ask the user to pin the site.
  • Users can pin the site by dragging any image that you provide to the taskbar.
  • Using JavaScript, you can easily detect when the user pins the site for the first time. This is a great opportunity to call attention to the specific features of your Pinned Site.

Each time the user launches your pinned site, any updates you've added to the <meta> tags or client side script will automatically update (e.g., new icons, new tasks, etc...); the user doesn't need to unpin/repin or do any app updates manually.

Summary

IE 9 Pinned Sites is the one feature of any browser that seamlessly and easily integrates with the desktop making pinned sites a great bang for the buck. Developers can drive more traffic to targeted locations right from a user's desktop, by delivering information to the pinned site via notifications. IE 9 aims to provide an enhanced UX by integrating desktop and web applications seamlessly while pinned site notifications keep users up to date with tasks, content changes, and push updates.

Go ahead, pin this site. :)

Some IE 9 Resources:

Visit the IE Team Blog.

See the complete IE9 Guide for developers.

IE 9 is showcased wonderfully at Beauty of the Web.

My blog posts on IE 9 Developer Tools:

Investigate Web Pages using the IE 9 Dev Tools

Using IE 9 Dev Tools to learn jQuery

Profile & Tune Web Page Performance w/IE 9 F12 Dev Tools

ie9logo16

1 Comment

  • Scott said

    Great article and very comprehensive! This is truly an awesome feature. Using my @pctips4all twitter account a great deal...I definately have the tinyurl.com site pinned among others. Great content!

Comments have been disabled for this content.