UPDATE: On May 11, 2011, ie9ify was renamed to pinify and released as version 1.2. This post was updated to reflect the new name.

By now, you’ve no doubt heard about the new “Pinned Sites” feature in IE9, right? If not, here’s a quick recap, courtesy of MSDN (emphasis mine):

[Pinned sites are] a feature with which you can integrate your websites with the Windows 7 desktop. With pinned sites enabled for a website, users can pin that site to the Windows 7 taskbar or add the site to the desktop or Start menu. Pinned sites enable easy access to favorite websites and add shortcut functionality similar to that found in Microsoft Windows applications. In addition, pinned sites require little development cost and offer robust features. Some meta elements and JavaScript is all that you need to gain functionality; you need not modify any existing content or attributes for a current website.

Here’s how I would rephrase that statement in a single sentence.

With Pinned Sites in IE9, your site becomes an application.

Simple as that. Pinned Sites are all about getting the browser out of the way and enabling sites to behave more like desktop applications, including offering capabilities like flashing the taskbar, overlaying icons on the taskbar and adding scripted thumb-bar buttons.

Now, I “get” the distinction between web and desktop apps because I’ve lived in this world for over eleven years. Even as the web and the desktop converge (faster than we realize), my attitudes about “the web” and “the desktop” are filled with history.

But the fact is that I am not a typical web user. Neither are you. Want proof? I have five (yes five) browsers installed on my machine right now, and all of them are pinned to the taskbar. I’m willing to bet that you have at least two.

image_thumb8

Want more proof? Check out this episode of Developer Smackdown, where Clark Sell and I talk to Chewy Chong, Senior Product Manager for IE. I’ve enjoyed my humble pie.

It’s not normal to have five browsers installed on your machine. It’s normal for a web developer, sure. But it’s not normal for everyone. We know this.

So who is the typical web user? My wife, for one. My parents. My children will be one day.

To these people—and there are millions upon millions of them—there is little distinction between a desktop app and a web site or application. It’s just an app.

This user says: “A mail client on my desktop? How is that different than Gmail?”

Another says: “A chat application? I can do that in Facebook.”

Another still says: “Media Player? But I use Slacker Radio or Pandora.”

These people WANT Facebook.com to BE an application on their desktop, without having to install a 3rd Party client that wraps the site. They don’t care about 3rd Party apps, and they don’t care about the browser.

They just want an app.

That’s the point of Pinned Sites.

A Gentle Quickstart

If you haven’t yet added Pinned Sites support to your site or app, it’s simple, and it’s been documented extensively on the web, so I’m not going to rehash everything here, except to provide the basic meta tags you need to add to the <head> of your site:

That’s all you need to add Site Pinning customizations to your site today. If you want more information, check out Scott Hanselman’s post here.

Pinify – The jQuery Site Pinning Plugin (Formerly ie9ify)

The way I see it, there are two types of things a developer would want to do with Pinned Sites features:

  1. Encourage the user to pin the site
  2. Offer the user additional features once the site is pinned

In both cases, it’s simple to do these things as a developer. In demos, that is. All of the new features that relate to item #2 above operate on new functions on the window.external object that are specific to IE9. Meaning that if you run them in any other browsers, they throw errors. Most browsers swallow these, but they are there, nonetheless. A responsible developer would want to prevent IE-specific code for running in other browsers.

In early February, Clark Sell and I set out to create a jQuery plugin that both handles all of the browser-checking and error handling for you, AND which makes adding all of the new pinning features even easier. So the meta tags above can now be recreated with the following:

$(‘head’).pinify();

And you’re done. pinify will auto-populate many of the meta tag content values for you (start url, favicon, etc). But you still have as much control as you want to have. Here’s the call to pinify I use for this site:

(The full list of options can be found on the Documentation page of the pinify Codeplex project site.)

You have three options for getting pinify:

  1. Use Nuget (install-package jquery.ie9ify) [Note than the NuGet package name has not been changed yet]
  2. Download it from ie9ify.codeplex.com
  3. Download it from plugins.jquery.com/project/pinify

Once you have the plugin, add these script tags to your page:

In your document ready handler ($(document).ready()) type $(‘head’).pinify() and tweak the options as needed. You’re all set!

Getting ‘Pinned’

One of the challenges facing developers implementing site features is how to let a user know that a site is pinnable. Of course, all sites are pinnable in IE9, even if they don’t explicitly add the meta tags above. But what if you have taken the time to implement custom functionality for your users and you want them to know about it? In version 1.0 of pinify, we’ve provided you with an out-of-the box teaser that you can add to your site with the following command:

$(selector).pinify(‘pinTeaser’);

Where selector is ideally some empty div that you’ve created to hold the teaser markup once the plugin has created it for you. Here’s how pinTeaser is implemented for this site:

(The full list of options can be found on the Documentation page of the pinify Codeplex project site.)

Now, when I run the site, I see the following teaser just below the address bar.

image_thumb[2]

And when you pin the site, the teaser goes away. Because pinify is a sharp cookie that way.

Obviously, you’re free to implement these teasers as you see fit, and while pinTeaser does surface a lot of options, it’s not as rich as I want it to be. Making this more extensible (different teaser types and more control for the developer) is the #1 priority for the 1.1 release, so do let us know what you’d like to see added to this feature (leave a comment here, or in the discussions section of the project site).

I can also use pinify to create content items (images, etc.) that can be used to encourage users to pin my site, and add links or buttons that enable the user to pin my site to the taskbar. These are covered in the project documentation.

From Pinned Site to Application

So a user has pinned my site. awesome, but that, by itself, is only the start of what’s possible with your site in IE9. Go to Slacker.com and Groupon.com and pin those sites to see what I mean in less than 2 minutes.

Once a user has pinned a site, IE9 offers capabilities that allow you, as a developer, to interact with the user outside of the browser, using the same features that are available to Windows 7 desktop applications today. This include:

  1. Creating dynamic jump lists to enable quick access to key site features (Groupon does this by showing daily deals in your city)
  2. Notifying the user via the taskbar (icon overlays and flashing the taskbar)
  3. Creating preview window thumb-bar buttons that enable the user to interact with your site without activating the site window (Slacker Radio turns the preview window into a control bar with play, pause, love and ban buttons)

As with the basic pinning features, the goal of pinify is to make these features dead simple, yet extensible. All of these are well-documented (I say that because I wrote the docs) here, but I wanted to highlight dynamic jump lists and notifications briefly.

Dynamic Jump Lists

A jump list is just a list of resources specific to your site. While similar to task links that we define via meta tags above, these are intended to be dynamic. For example, let’s say I have created a Photo Gallery application, and I want to create a jump list of popular galleries when a user pins the site. Assuming I have an endpoint on my server that will return a json object of those galleries (in my case, an ASP.NET MVC controller action), I can use jQuery and pinify to create a dynamic jump-list like so:

The result is a second list that sits on top of the tasks I define in my meta tags.

image

Notifications

It’s also possible to implement taskbar notifications on IE9 pinned sites. This includes both flashing the taskbar and overlaying icons on top of the site icon on the taskbar. You’d use this to notify the user of some external event that they might be interested in (i.e. new messages or chats in Facebook, new email in

Outlook Web Access, etc.). Considering the same photo gallery application, for pinned users, our application will poll our server every several seconds to determine if any new comments have been posted on the user’s photos. If a new comment is retrieved, we’ll instruct pinify to add a comment icon overlay on the taskbar, as below:

The result is a flashing taskbar button, with a (crude) comment bubble overlay. I’ve separated these visually, but they would both happen simultaneously in this case.

image_thumb[8]

image_thumb[7]

Now my site can notify a user of a change that they care about, even when the user is in another window or application.

Your site, from zero-to-pinned in less than five minutes.

(Big H/T to John Bristowe for that slogan)

If you haven’t explored site pinning already, I’d encourage you to do so now. And if you’re not using pinify, download it and let us know what you think. We’ll keep working on it, so give us your suggestions.

Now let’s go applify the web together!

Resources

Check out pinify on Codeplex

Watch the pinify Screencast (Episode 7 of the MvcScreencast Series)

Tagged with:
 
  • Rajinder Rai

    Wow ! Looking amazing…

  • Sahat

    Thanks! Great article.

  • http://codekicks.com/ Ratnakar Dutt

    No words, simply awesome post on great feature of IE9.
    Many thanks.
    I just insta

    Generally I do not use IE. so so worst. but I’m shocked seeing the performance of IE9 64bit on windows 7. it’s amazing. awasome performance.

  • http://www.userinexperience.com bsatrom

    Thanks for the comments, guys. Glad you’re liking Pinning and the plugin!

Switch to our mobile site