IE Pinned Sites Part 1: What Are Pinned Sites?
In Internet Explorer 9, a new feature called pinned sites was introduced. In this post, I’ll explain what pinned sites are. In future posts in this series, I’ll discuss why they are worth implementing and how to do it using HTML and JavaScript.
“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:
- Drag the website’s tab in Internet Explorer to the Taskbar.
- Drag the website’s favicon in the left-hand side of the address bar in Internet Explorer to the Taskbar.
- Drag a custom image on the webpage to the Taskbar. (NOTE: this method does require custom coding by the website developer, who must decorate the image with class="msPinSite" . For full instructions on how to do this, see this page.)
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?
- The site’s favicon brands the browsing experience. In the new UI, we see Google’s favicon in 4 different places! (I’ve highlighted them with red arrows in the picture below.)
- Selecting the top left favicon navigates users to the initially pinned page, like a “Home” button. To try this out, you can type a search query into Google and get a new page with a list of results back. Now click on the top left favicon; it will take you back to https://www.google.com.
- The back and forward navigation buttons are color-coded based on the dominant color of the favicon. This is actually less compelling for Google, because their favicon is a multi-color icon (try pinning a site like https://www.cnn.com which has a single true dominant color of red, and it looks really cool). If you look closely at the Google favicon, you will see it contains two small blobs of blue, one small blob of red, one small blob of yellow, and a larger blob of green. Because there is the most green in the icon, IE will automatically choose green as the “dominant color”, and it colors the back and forward navigation buttons that shade of green. (This behavior can be overwritten by custom code as well, which I will talk about in a later post.)
- The pinned site will get some default jumplist tasks that apply to all websites. To access the jumplist, right-click on the Taskbar icon. You will see 4 items, like in the picture below. The Task “Start InPrivate Browsing” will launch an instance of the Google pinned site in private mode (so IE doesn’t store any data from your browsing session; for more info, see https://windows.microsoft.com/en-XM/windows-vista/What-is-InPrivate-Browsing). Clicking on “Google” will launch the pinned site. “Unpin this program from taskbar” will remove Google from my taskbar as a pinned site. “Close window” will close the running instance of the Google pinned site.
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 https://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