Applify Your Sites with Pinned Sites and ie9ify, the IE9 jQuery Plugin

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

Page 1 of 3 | Next page