Pinned Sites with Internet Explorer 9 and Windows 7By Ricky Onsman 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 9Pinned 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 WorksThere 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 IconOK, 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: Our next part gives the developer a bit more to do. Jump ListsDevelopers 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:
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 elements are also used to define application-specific actions that can be added to the Jump List. 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 CategoriesLike 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. 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. 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. When you call the msSiteModeClearJumplist method, Windows removes the items from the Jump List. 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. 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.
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 DynamicWith 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. 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. 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 msSiteModeClearJumpListto 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 BuildMyPinnedSite.com and 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. |
.png)
.png)
.png)
.png)
.png)
.png)
.png)