I'm a geekette who enjoys playing with new technology for software developers. I work as a Developer Evangelist for Microsoft. My current focus is on Windows Store development for Windows 8.
“Pinning” a site is dragging a webpage to your Windows 7 taskbar, desktop, or start menu, which creates a shortcut to that website and can expose additional functionality (like tasks in a jumplist). Let’s focus on pinning to the Taskbar for now. Note that only the end user can choose to pin a website; the website developer can’t force their site to be pinned because there are no public APIs to do this. (We didn’t want websites to install themselves on everyone’s Taskbars.)
There are three different ways for a user to pin a site:
Any website can be pinned, regardless of whether the web developer has coded pinning-specific functionality or not. As an example, let’s consider Google, who has not implemented any pinning-specific code in their website. I can pin Google by dragging the Google tab in Internet Explorer 9 to my Taskbar (which is method #1 above…but either method #1 or method #2 from above would work).
Now, note that the last icon in my Taskbar is a Google icon (which matches Google’s favicon that you can see in the address bar above).
So, what did we get? When the Google site was pinned, its window was actually closed and reopened. Specifically, the vanilla instance of Internet Explorer 9 that Google was running in closed, and a Google-branded version opened. What are the changes in this updated browser UI?
Remember, we got all of this functionality without the web developer having to code anything explicitly for site pinning. But, the web developer can take advantage of pinned site functionality by using the msSiteMode API. With this API, developers can have their websites tap into the Windows 7 taskbar functionality, and add jumplist tasks, overlay icons, thumbnail toolbar buttons, and flashing taskbar buttons. I’ll talk more about how to implement these in upcoming blog posts in this series. For now, let me show you an example of pinning a customized site. Let’s take Bing, which has some custom jumplist tasks.
I’ll pin Bing by dragging its favicon from the address bar in IE to the taskbar (method #2 from above, since we already used method #1 to pin Google).
After you’ve pinned the site, note the updated browser UI:
Bing has all of the same default pinned-site coolness that we saw with Google. In the screenshot above, note the favicon branding, the Bing “Home” button in the upper left-hand corner, and the color-coded back and forward navigation buttons that match the Bing orange perfectly (see how nice it looks when the favicon truly has one dominant color?). In addition, Bing has the same default jumplist as Google, plus the Bing developers have chosen to implement additional items in the Bing jumplist. Right-click the Bing icon in your taskbar to see the jumplist.
The four bottom items in the jumplist are the default items which are available on any pinned site, and have the same functionality that we just discussed in the Google example. In addition, the Bing website developers chose to surface five common tasks that people use Bing for: to search for Weather, Finance, News, Maps, and Travel. If you click on any of these items, it will take you straight to the Bing subsite for that information. For example, if I click on “Weather”, I am taken to a page with detailed weather information for my area.
Imagine the possibilities here! For your company’s website, you could surface items that you want to highlight (how to contact us for an appointment, special sales and deals for an ecommerce site, mortgage calculator, healthcare analysis tools, etc.) in a jumplist. One of the best (and simplest) uses of a jumplist task is “Go to online help/FAQ page”. By making this more visible in a jumplist, you may save a lot of money in support calls!
Finally, you might be wondering what happens under the covers when the end user pins a site. First of all, a pinned site is still surfacing content from the actual online website. So if my internet connection went out, I couldn’t access http://www.bing.com through my Bing pinned site (other than perhaps a cached page). Secondly, there is a file stored locally on the end user’s machine to support each pinned site. When I pin a site, it creates a *.website file in C:\Users\jennmar\AppData\Local\Microsoft\Internet Explorer\Pinned Sites.
In the next blog post, I’ll discuss why pinned sites are valuable, and then in the rest of the series, I’ll jump into the technical details of how web developers can customize their sites to get this functionality.
Other Blog Posts in this Series
IE Pinned Sites Part 1: What Are Pinned Sites?
IE Pinned Sites Part 2: Why Implement Pinned Sites?
IE Pinned Sites Part 3: How to implement basic site properties
IE Pinned Sites Part 4: How to implement Jump List Tasks
IE Pinned Sites Part 5: How to implement dynamic Jump List Categories
IE Pinned Sites Part 6: How to implement Overlay Icons
IE Pinned Sites Part 7: How to implement Thumbnail Toolbar Buttons
IE Pinned Sites Part 8: How to implement a Flashing Taskbar Button
IE Pinned Sites Part 9: Patterns to make your pinned site code play nice in all browsers
IE Pinned Sites Part 10: Pinned Site Resources