Pinned Sites with Internet Explorer 9 and Windows 7

A feature that is new to Internet Explorer 9 is the ability to pin a website to the taskbar, start menu, or desktop. This is available to users viewing websites in IE9 on Windows 7. Windows 7 users have previously been able to pin applications to the taskbar and this extends the principle to the web. This means a layer of functionality can be added that has great potential for site owners and site users, and therefore developers. Pinned Sites may at first appear similar to bookmarks or short-cuts but some of the functionality involved goes to a whole new level—it deserves a closer look. It will, of course, be the web developers—on behalf of site owners—who will set up the frameworks that will enable and encourage users to pin sites. That mostly involves adding some appropriately configured code to the <head></head> section of your site pages, but it does also require some interesting decisions. Pinned Sites in Internet Explorer 9 Pinned Sites are an important means of achieving Microsoft’s stated aim of putting the user’s preferred web experience “front and center”. Minimizing browser chrome, sorting new tabs in order of pages most viewed, combining the address bar and search box—these all aim to put more attention on website content than on the technology required to present it. Pinning a site is part of the same mindset. It lets site visitors give highest priority ease of access to the web pages they want to visit the most, and delivers actively updated information about those web pages to draw them back to the site. Pinned Sites don’t require existing content to be changed. They will open in their own browser window, very much like a custom-branded desktop app. It is in the implementation and configuration of the options, particularly features such as custom browser branding and site-driven calls to user action, that Pinned Sites offer the kind of marketing potential that site owners will want to utilize. Companies that have configured Pinned Sites for their online consumers have already reported increases in traffic and user interaction. Let’s look at the developer’s role by exploring some of the different specific features of Pinned Sites. How it Works There are three ways to pin a site with IE9: Drag the favicon (found in the address bar next to the website’s URL), drag a purpose-specific pre-configured image on the page or tear the tab off the browser window and drag it to one of the pinned locations: in this article, we’ll focus on the taskbar. In each case, the taskbar icon for the resulting Pinned Site will be the same as the favicon: When a Pinned Site is launched, the Back and Forward buttons will take on the dominant color of the favicon and shift slightly to the right to make room for the favicon, which then acts as the Pinned Site’s Home button, creating a branded, functional experience. You may notice that the favicon outside the address bar is larger than the one inside. This takes advantage of the favicon’s ability to support different resolutions. If you make your favicon 64×64 or 32×32 pixels—rather than the more standard 16×16—any browser will scale it down for display in your address bar, but IE9 will use a 24×24 version of the specified favicon larger favicon as the site Home button for a pinned site, making that piece of site branding even more dominant. If you have your taskbar configured to use small icons, your Pinned Site icon will be displayed at 16×16, otherwise the 32×32 version will be displayed. All the developer has to do is create a favicon, using either their favorite image editing software or a stand alone application, and upload it to the website root directory. I used Photoshop with a plugin to handle .ico files. You can also use the X-Icon Editor Tool. If your website doesn’t already use a favicon, you’ll also need to insert a line of code in your site header: <link rel="shortcut icon" href="/filename.ico" /> The Icon OK, so you have a nice high res favicon set up that can be dragged to become a taskbar icon providing a shortcut to a website. When you hover over an application icon pinned to the Windows 7 taskbar you are shown a thumbnail view of the program linked to. Click on the thumbnail or the icon and that program takes over the dominant window. This is also true of the icons for Pinned Sites. The website icons pinned to the taskbar, however, offer further functionality. If the Pinned Site has multiple tabs open, the taskbar icon takes on a layered effect with each layer representing an open tab. Hover over the multi-layered icon and thumbnails of the web page on each tab are laid out for you. Click on the thumbnail to go to that open tab of the pinned website. This doesn’t require the developer to do anything, but it is good practice to insert some feature detection code to check whether a user’s browser supports site pinning. This will do the job:
if (window.external.msIsSiteMode) { // Check if the website was launched from a pinned site. if (window.external.msIsSiteMode()) { // TRUE } else { // FALSE } }
Our next part gives the developer a bit more to do. Jump Lists Developers have the ability to create custom Jump Lists, accessible by right-clicking a Pinned Site’s taskbar icon. Jump Lists allow users to perform actions or visit specific areas of a website or web app without having to first launch a browser window. A default Jump List is set up automatically for a Pinned Site, and will look like this: InPrivate Browsing was introduced in IE8 to enhance user security by wiping traces of browser activity, particularly while using browsers with public access. If you’re not familiar with this, you can read up on it here. Apart from that, the only available actions on the default Jump List are to open a browser session at the site that’s been pinned or to unpin the site from the taskbar. With a little coding, however, a great deal of functionality can be added to the Jump List. Meta elements in the website page HTML can customize the way the Pinned Site renders after it is launched, using the following syntax: <meta name="name" content="content"/> The values for name and guidelines for content are as follows: application-name: If you don’t give your shortcut a name, the page title is used instead. msapplication-tooltip: Optional text that is displayed as a tooltip when the mouse pointer hovers over the Pinned Site shortcut icon. msapplication-starturl: The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. msapplication-navbutton-color: The color of the Back and Forward buttons in the Pinned Site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see Color Table. If this meta element is absent, the color is based on the shortcut icon. msapplication-window: The initial size of the Pinned Site browser window. Content sub-elements provide size as number N, separated by a semicolon. Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. The following code example uses meta elements to customize the Pinned Site shortcut with a tooltip, start URL, initial window size, and navigation button color.
<meta name="application-name" content="Site Start Page"/> <meta name="msapplication-tooltip" content="Start here"/> <meta name="msapplication-starturl" content="https://example.com/start.html"/> <meta name="msapplication-window" content="width=800;height=600"/> <name="msapplication-navbutton-color" content="blue"/>
Meta elements are also used to define application-specific actions that can be added to the Jump List.
<meta name="msapplication-task" content="name=[name];action-uri=[uri];icon-uri=[filename.ico]"/>
A great example of this in action is at the website for The Huffington Post, one online entity that has taken some trouble to make the most of site pinning and what it offers their readership. This is what the basic Huffpost Jump List looks like: In the Tasks list, different colored favicons have been used to distinguish readership areas of interest. Notice that the icons attached to the Big News items correspond to the web page category types listed under Tasks. The Big News list is a custom category, with items which update on the Jump List as they are updated on the website—we’ll look at how to do that next. This all helps to make a meaningful, useful and actionable menu for Huffington Post readers, which will ultimately benefit the site owners as well. IE blogger Ziad Ismail profiled the Huffington Post as a case study for a news service using site pinning: it’s definitely worth a read. Custom Jump List Categories Like those at the Huffington Post, developers can add custom categories to a Jump List that not only provide a direct link to a website or specific web page, but can also provide information to the user about that page. To do this, we’ll call the msSiteModeCreateJumplist method to create a custom category with the label Alerts. Call msSiteModeCreateJumplist at least once before using any of the other methods in these steps.
window.external.msSiteModeCreateJumplist('Alerts');
The category label won’t appear on the Jump List until there is at least one item in the category, so the next step is to create the list items, using msSiteModeAddJumpListItem. The first parameter specifies the item name, the second specifies the URL to use when the item is selected and the third parameter specifies the icon that to use when displaying the item on the list.
window.external.msSiteModeAddJumpListItem('Item 1', 'https://example.com/Item1.html', 'https://example.com/images/item1.ico'); window.external.msSiteModeAddJumpListItem('Item 2', 'https://example.com/Item2.html', 'https://example.com/images/item2.ico'); window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', ‘https://example.com/otherimages/item3.ico');
Having created the list and its items, we now need to display the list. Using the msSiteModeShowJumplist method, Windows displays the current list items in the Jump List and also immediately updates the in-memory list.
window.external.msSiteModeShowJumplist();
When you call the msSiteModeClearJumplist method, Windows removes the items from the Jump List.
window.external.msSiteModeClearJumplist();
Another example of a good use of Jump Lists is at the Amazon site: The code for this shows that the custom Amazon Favorites category is created while the page is loading, so the msSiteModeShowJumpList method is not required.
<script type='text/javascript'> try { window.external.msSiteModeCreateJumplist('Amazon Favorites'); window.external.msSiteModeAddJumpListItem ('Amazon Wish List' , 'https://www.amazon.com/wishlist?tag=amzn-ie9-jl-wl-20', 'https://www.amazon.com/favicon.ico'); window.external.msSiteModeAddJumpListItem ('Amazon Prime' , 'https://www.amazon.com/gp/prime?tag=amzn-ie9-jl-prm-20', 'https://www.amazon.com/favicon.ico'); ... } catch (ex) { } </script>
Notice how items are added in the reverse order of how they appear in the Jump List. Notice also that the Tasks list focuses on things the user can do, while the custom Amazon Favorites category lists pages the user can go to. Up to 20 items can be displayed at any one time in a custom category. If you add more than 20 items to a category, the earliest added items are deleted. Although a custom Jump List category can contain up to 20 items, only the last 10 items in the list are visible by default. You can change the default settings of the taskbar, but bear in mind that this will affect only your display. Others may continue to see the default. 1. Right-click the taskbar and click Properties. 2. Click on the Start Menu tab and click the Customize button. 3. Under Start menu size towards the bottom of the box, set the Number of recent items to display in Jump Lists option to your preferred number. 4. Click OK and OK. Be aware that users can remove items from a custom Jump List—although they may be restored in a new session—but not from the pre-set Tasks list. Making Jump Lists Dynamic With our custom category set up, we’re going to add items to it dynamically by calling the msSiteModeAddJumpListItem method. Items are added at the top of the list, in the reverse order from how they will appear on the Jump List. In this example, two tasks in our custom “Alerts” category list are set up in response to the onload event. Task2 is defined before Task1 so that they appear in the correct order on the Jump List.
var g_ext = null; window.onload = function() { try { if (window.external.msIsSiteMode()) { g_ext = window.external; g_ext.msSiteModeCreateJumpList("Alerts"); g_ext.msSiteModeAddJumpListItem( "Second Task","https://example.com/task2"," https://example.com/img/icon2.ico"); g_ext.msSiteModeAddJumpListItem( "First Task","https://example.com/task1"," https://example.com/img/icon1.ico"); } } catch(ex) { // Fail silently. } }
Items on a Jump List remain visible even after you close a Pinned Site. However, if the dynamic items depend on an application state change, they will not be valid after the site is closed. For that reason, links in a Jump List should contain enough information to navigate regardless of the application state. Having set our first two tasks to be loaded during onload, changes to the originating pages will not be shown automatically. We’re now going to add a couple more items to our custom list that will update in response to a user click. We’ll keep the global variable set in the example above.
function buttonClick() { if (g_ext) { g_ext.msSiteModeClearJumpList(); g_ext.msSiteModeCreateJumpList("Alerts"); g_ext.msSiteModeAddJumpListItem("Fourth Task","https://example.com/task4","https://example.com/img/icon4.ico"); g_ext.msSiteModeAddJumpListItem("Third Task","https://example.com/task3","https://example.com/img/icon3.ico"); g_ext.msSiteModeShowJumplist(); } }
Remember how I mentioned that users can remove items from a custom category Jump List? As well as updating the Jump List, the msSiteModeShowJumpList method raises an onmssitemodejumplistitemremoved event once for each item that has been removed by the user since the last time the msSiteModeShowJumpList method was called. This event will not be raised if you use msSiteModeClearJumpList to clear the list. There’s quite a bit more to say about site pinning, particularly some clever things you can do with the taskbar icon, including using overlay icons to notify users of events or status changes on the Pinned Site, and adding toolbar commands to allow users to access application functionality within a Pinned Site thumbnail window. I’m going to save them up for my next article, as well as a couple of other tips on how to get the most out of site pinning and the role that developers play in making it all work to the greatest advantage of site users and site owners. Until then, Microsoft’s Pinned Sites Developer Documentation is the key resource for information about site pinning, while Ziad Ismail’s series on the Exploring IE blog is also very useful. Now, why not partake of a short quiz to see how much you’ve picked up on the topic so far?

note:SitePoint Content Partner
This tutorial has been made possible by the support of Microsoft. In cooperation with Microsoft and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you.

Frequently Asked Questions (FAQs) about Pinned Sites with Internet Explorer 9 and Windows 7

What are the benefits of pinning sites with Internet Explorer 9 and Windows 7?

Pinning sites with Internet Explorer 9 and Windows 7 offers a range of benefits. It allows you to access your favorite websites directly from your taskbar without having to open your browser first. This feature also provides you with site-specific controls and notifications, enhancing your browsing experience. For instance, if you pin a music streaming site, you can control the playback directly from the taskbar.

How can I pin a site using Internet Explorer 9?

Pinning a site using Internet Explorer 9 is quite simple. Open the website you want to pin in Internet Explorer 9. Once the site is open, drag the tab from the browser to your taskbar. The site’s icon will appear on your taskbar, indicating that it’s been pinned.

Can I unpin a site from my taskbar?

Yes, you can easily unpin a site from your taskbar. Right-click on the pinned site icon on your taskbar and select ‘Unpin this program from taskbar’. The site will be removed from your taskbar immediately.

Can I pin multiple sites on my taskbar?

Absolutely! You can pin as many sites as you want on your taskbar. This feature is designed to give you quick and easy access to all your favorite websites.

Are pinned sites secure?

Pinned sites are as secure as any other site you visit using Internet Explorer 9. The security of a pinned site depends on the security measures implemented by the site itself. Always ensure you’re visiting sites that have secure protocols (https) in place.

Can I pin sites to my taskbar if I’m not using Windows 7?

The pinning feature is available on Internet Explorer 9 and later versions, and it’s not limited to Windows 7. You can pin sites to your taskbar on any operating system that supports these versions of Internet Explorer.

Can I pin non-web applications to my taskbar?

Yes, you can pin non-web applications to your taskbar. This is a feature of the Windows operating system and is not limited to Internet Explorer.

What happens if a pinned site is not available?

If a pinned site is not available, you’ll see an error message when you try to access it from your taskbar. The error message will vary depending on the reason the site is unavailable.

Can I rearrange my pinned sites on the taskbar?

Yes, you can rearrange your pinned sites on the taskbar. Simply click and drag the site’s icon to your preferred location on the taskbar.

Can I pin a site from a browser other than Internet Explorer?

The ability to pin sites to the taskbar is a feature specific to Internet Explorer 9 and later versions. Other browsers may have similar features, but the process may vary.