IE Pinned Sites Part 3: How to implement basic site properties
Now that you have the background on what pinned sites are and why they’re useful, let’s start looking at some code!
I previously mentioned that web developers can use the msSiteMode APIs to integrate pinned sites with the Windows 7 Taskbar. These APIs are divided into two groups:
- Site properties which apply to any user visiting the website (these are implemented using HTML)
- Information that is dynamic in nature or specific to an individual user visiting the website (these are implemented using JavaScript)
In this post, I’m going to cover some site properties which apply to any user and explain how to implement these using HTML. (We’ll get to the JavaScript functionality in future posts.)
These site properties can be implemented by web developers using meta tags that live inside the head block of your HTML. I’ll explain five site properties and then we’ll look at an example. For each of the site properties below, when you are implementing the meta tag, you will want to keep the same “name” attribute, but change the “content” attribute to suit your website.
Application Name
The application name will be used as the name of the application button on the taskbar, and it is appended to the window title for any pinned site window. If an application name is not given, the HTML document's Title element is used instead.
You can set the application name like this, substituting in the appropriate content for your site:
<meta name="application-name" content="Windows Development Boot Camp Application"/>
Once your site is pinned, right-click on its icon in the Taskbar. The first link in the bottom group of links should read “Windows Development Boot Camp Application” and if you click it, it should open the website.
Desktop Tooltips
In this blog post series, I’ve been focusing on pinning sites to the Taskbar. But remember that you can also pin sites to the Start Menu or Desktop. The “Desktop Tooltips” functionality won’t show up when you pin a website to the taskbar, but you will see it as a tooltip if you pin the site to the desktop.
The syntax is as follows (again, choose your own content):
<meta name="msapplication-tooltip" content="Windows Development Boot Camps - are you hardcore?" />
To pin to the Desktop, drag the favicon from the address bar in Internet Explorer onto your desktop. This will create a link on your desktop. Hover your mouse pointer over the icon on the desktop. You should see your tooltip text:
Start URLs
The Start URL defines the entry point for your site. This is the actual URL that will be launched when the user launches the pinned site.
For example, let’s say that I was trying out Bing for the first time. I navigate to https://www.bing.com in Internet Explorer 9 and I search for something (say “Bill Gates”). I get a search results page back with a bunch of information on Bill.
OK, so Bing seems to be doing a pretty good job, so maybe I decide to pin the site. At this point, I could drag and drop the tab or favicon from the address bar to the taskbar, as explained in a previous post. However, note that at this point, my URL isn’t https://www.bing.com anymore. It’s something more like https://www.bing.com/search?q=Bill+Gates&go=&form=QBLH&qs=n&sk=&sc=8-10. When I pin the Bing site, I don’t actually want to pin the Bill Gates funky search results URL; I want to pin the main site of https://www.bing.com and be taken there when I launch the pinned site. That is the purpose of the Start URL – it defines the entry point for your pinned site.
The Start URL is set using a meta tag with name=”msapplication-starturl", like so:
<meta name="msapplication-starturl" content="https://www.windowsdevbootcamp.com" />
To test this, pin your site to the taskbar. Then, close the pinned site by clicking the red X in the upper right-hand corner. All instances of the site should be closed. Then click on the icon in your Taskbar. It should launch the pinned site using the URL provided in your Start URL.
For security reasons, the Start URL is bound to the domain of the webpage.
There’s also a best practice around Start URLs. You should define the Start URL in every page in your website, and then all of the rest of these meta tags can be defined only in the Start URL destination page. This reduces page download and makes the site easier for developers to maintain.
Pinned Site Window Size
This one is pretty self-explanatory. The pinned site window size defines the size (width and height, in pixels) of the pinned site when it is first launched by the user. The syntax is:
<meta name="msapplication-window" content="width=800;height=600" />
The initial size of the pinned site’s window will now be 800x600.
Back and Forward Navigation Button Colors
This defines the color of the “Back” and “Forward” navigation buttons in the pinned site browser window. Any named color or hex color value as defined by CSS Level 3 is valid. If this meta tag is omitted, the navigation button color will be based on the favicon.
<meta name="msapplication-navbutton-color" content="orange" />
Now the navigation buttons for the pinned window should be orange, as below:
Now, my personal belief (and this is me speaking as Jennifer Marsman, not as Microsoft) is that most of the time, it’s better to leave this out. This is mainly due to my personal experience being that of a developer and not a web designer. Let’s assume that my website has an orange favicon. If I set the navigation button color to be orange as I did above, then it will be the perfectly average “orange” that is defined by HTML/CSS. If I leave this meta tag out, then it will grab the exact shade of orange that matches my favicon and look much better. Again, this is my preferred method since I’m not a strong designer; those of you who have strong design skills can ignore this guidance and play with hex color values until your navigation buttons look perfect. :)
Example
Finally, let’s put this all together with an example. Here is the HTML used to define my website for the Windows Development Boot Camp at https://www.windowsdevbootcamp.com. Feel free to pin this site and then see how the various site properties are exposed in the pinned site.
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>For the WIN: Windows 7 Development Boot Camp</title>
<meta name="keywords" content="Windows training boot camp learning client development Silverlight IE Windows7 course training class" />
<meta name="description" content="Attend a Windows Development Boot Camp to learn how to develop for Windows, Silverlight, and Internet Explorer." />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="/Styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" href="./favicon.ico"/>
<!-- Pinned site functionality -->
<meta name="application-name" content="Windows Development Boot Camp Application"/>
<meta name="msapplication-tooltip" content="Windows Development Boot Camps...are you hardcore?" />
<meta name="msapplication-starturl" content="https://www.windowsdevbootcamp.com" />
<meta name="msapplication-window" content="width=800;height=600" />
<!-- <meta name="msapplication-navbutton-color" content="orange" /> -->
</head>
<body>
<!-- Deleted for space... -->
</body>
</html>
In the next post, we’ll look at how to implement jumplist tasks.
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