Our proposed IE9 feature shortlist for DNK

Hey folks,

I’ve been going through the IE9 feature set for getting your website as easily accessible and discoverable with the most useful information bubbling to the top. Given the nature of content on DotNetKicks, it kind of makes sense in our world to narrow down a broad range of content specific to your needs, and where we should put a lot of our focus. Now that IE9 is out and in full swing with millions of downloads worldwide, we’ve zoned in on a few of the features we discussed last time that we’d like to implement on the site in the coming weeks.

First things first

It doesn’t help that you go ahead and implement all these cool new features but nobody knows that they exist. So what do you do? Put some kind of notification up? Well, what if they’re running in Chrome or Firefox, or an earlier version of IE? That’s easy you say, just detect browser agent and version in JavaScript right? Sure, but what if they’ve already pinned the site and no longer need the notification?

Well it turns out that Microsoft have provided hooks into finding out if the current session is being launched from a pinned site already, and they’ll even tell you if it’s the first time it’s being launched as a pinned site so that you can guide that user experience if you wish to. The following code snippit gives you an idea of how you can find out if the current browser supports the pinned site features:

[sourcecode language="javascript"]
function initPinnedFeatures()
{
try {
if (window.external.msIsSiteMode()) {
// Pinned site stuff goes here.
}
else {
// Show the hint image using JQuery.
$(‘#dnkPin’).style.display = "block";
}
}
catch (e) {
// Pinned Site API is not supported in browsers like
// Chrome and FireFox so we don’t do anything.
}
}
[/sourcecode]

A number of sites have already taken advantage of this to prompt the user to add to the site. Pin Site Radio is an official example by Microsoft on how the latest API works, and also for a while now, if you visit Channel 9 in IE9 you’ll see they show you the following at the top of the page.

In particular, you’re probably thinking you don’t want to force your users to know that they have to drag the actual tab to the task bar – well they don’t. The image above is part of a clever trick to allow your users to drag an image on the page itself to the task bar to gain the same effect. Pretty neat!

The “Add to Start Menu” is also another option and putting both techniques to good use is a very effective way to promote discoverability of your pinned site features, but you should note that this is different than when they pin to the task bar. When they close the browser, it will disappear from the task bar and they will specifically need to open it from the start menu for it to open up as a pinned site. The code for adding to the start menu is similar to, and can be used in conjunction with the above code:

[sourcecode language="javascript"]
function addToStartMenu()
{
try {
window.external.msAddSiteMode();
}
catch (e) {
// Pinned Site API is not supported in browsers like
// Chrome and FireFox so we don’t do anything.
}
}
[/sourcecode]

Another point at which we want to pay careful attention is the first time the user is accessing the site via the pinned option. This is a great time to highlight the features you’ve implemented without annoying users who have “been there, done that”. You can use the following code to bring this to life:

[sourcecode language="javascript"]
try {
if (window.external.msIsSiteMode()) {
if (external.msIsSiteModeFirstRun(false)) {
window.location = "~/PinnedDNKRocks.aspx";
}
}
}
catch (ex) {
// Pinned Site API is not supported in browsers like
// Chrome and FireFox so we don’t do anything.
}
[/sourcecode]

Another trick I’ll be showing you next time is how you can detect a user who has pinned your site before, but is browsing via an unpinned version, and therefore perhaps missing out on some of the experience you’ve built. For now you can also check how the pinned site is being run for the first time by looking at the return value of the function like so:

[sourcecode language="javascript"]
var firstRunOrigin = window.external.msIsSiteModeFirstRun(false);
if (firstRunOrigin == 0) {
alert("This is not the first time – oooh Déjà vu!");
}
else if (firstRunOrigin == 1) {
alert("This was the first run from the Task Bar.");
}
else if (firstRunOrigin == 2) {
alert("This was the first run from the Start Menu.");
}
[/sourcecode]

On with the show

Now that we’ve introduced our users to all the pinned features we’ve added, they can go ahead and use them. Well, what’s “them” exactly? Every website is going to have different needs, but here are the items we’ve identified will give our users what they need from the available features.

Dynamic Categories

First, we want to create a separate pinnable site for each of our most popular categories. It doesn’t make sense for all of them because the volume of traffic in each one is vastly different, but we’ll keep track of the most traffic intensive and create pinnable versions of those. That means that if you’re specifically interested in only seeing links that appear in the Silverlight or WCF categories, those pinned sites will only show the latest going’s on in their respective sections when you right click the site on the Windows 7 taskbar.

Now the dynamic sections in the jump list really are only limited by your imagination. We’re currently looking at things like most popular kicks per section, and even letting seriously popular ones from other categories bubble through to get your attention. Another one could be recent searches you’ve performed on the site so you don’t have to type the search again – or how about the results of your last search updating regularly?

As I said, the limits are only in your head – social networking sites like twitter have used them for message notifications, news sites for breaking stories, shopping sites like amazon for recommendations and wish lists or even exclusive offers. Think about showing those exclusive offers reserved only for users that pin your site – go ahead, throw that carrot out there why don’t you? ;-)

If there is a particular category you’d like to be included as its own pinned site, then by all means, let us know in the comments. Creating your own list of items dynamically per category you create can be as follows:

[sourcecode language="javascript"]
function buildJumpList()
{
var pinned = window.external;
if (pinned) {
pinned.msSiteModeClearJumpList();
pinned.msSiteModeCreateJumpList("Silverlight Latest Additions");

pinned.msSiteModeAddJumpListItem(
"Silverlight ABC", "/silverlight/abc", "img/icon.ico");
pinned.msSiteModeAddJumpListItem(
"Silverlight XYZ", "/silverlight/xyz", "img/icon.ico");

pinned.msSiteModeShowJumplist();
}
}
[/sourcecode]

The code above can also be used at various intervals to do live updates to the list while the pinned site is minimized, giving the user a way to have updates pull in without needing to browse the site, but still not missing out on some important articles they wish to know about – and most importantly, it’s not invasive so as to disturb the user from their current preferred activity, and so they are more likely to keep it open and look at updates as and when they feel the need.

Notifications

Notifications would be another piece in the puzzle to complete the cycle of discoverability. There’s no point staying so far outside of your user’s consciousness that they end up forgetting that you exist or that the site is open. The least intrusive way of letting them know that something has happened would be via the push overlay icons that have been so thoroughly tested on pretty much every mobile device out there today. It should be noted that overlay icons get applied to the bottom right hand corner of the application icon. Applying a new overlay icon and removing it can be done using the following code:

[sourcecode language="javascript"]
function setOverlay(overlayUrl, description)
{
try {
if (window.external.msIsSiteMode()) {
window.external.msSiteModeSetIconOverlay(overlayUrl, description);
}
}
catch (e) {
// Pinned Site API is not supported in browsers like
// Chrome and FireFox so we don’t do anything.
}
}

function clearOverlay()
{
try {
if (window.external.msIsSiteMode()) {
window.external.msSiteModeClearIconOverlay();
}
}
catch (e) {
// Pinned Site API is not supported in browsers like
// Chrome and FireFox so we don’t do anything.
}
}
[/sourcecode]

The other more invasive way of getting the user’s attention is to trigger the taskbar icon to flash which I cannot see us using any time in the near future, as I see it probably causing more people remove the pinned site than keep it. If you really have a valid use case for doing this to your users, then you should know it’s available and you can find out how to do it here.

Tracking and metrics

OK, so you’ve got a steady stream of traffic coming to your site, and now you’ve implemented these features. Chances are that unless you run some kind of marketing campaign, your traffic isn’t going to spike much just because of these changes, although there is already some pretty compelling anecdotal evidence that getting users to pin your site will produce a dramatic boost in your visitor traffic and loyalty. At the very least, you will however have made the browsing experience potentially richer for many of your existing users. But how do you know that your changes are having any effect? How do you if anyone is even using the fruits of your labor?

This could be a somewhat tricky task since there are no specific hooks provided by the pinned site functionality for tracking other than the first run option – and nor should there be really. It’s outside the scope of what the features are trying to provide. But, given that it’s JavaScript we’re hooking into here and given the nature of the web, I’m pretty sure we can find some inventive ways of using existing site metrics and measurement tools, even Google Analytics, to track the uptake and usage of the new features.

Stay tuned, and we’ll let you know we faired and how we implemented it and while this post has primarily been a strategy talk, next time I’ll be putting all the technical pieces together for this and showing the code and how we went about implementing it. If you’re a DotNetKicks user and you’d like to give us some suggestions as to the features you’d like to see, then please don’t hesitate to drop us a comment here.

That’s all for now…
RobertTheGrey