• ADO.NET
• Compact Framework
• Mono
• Security
• WCF
• AJAX
• Database
• MVC
• Silverlight
• Web Services
• ALT.NET
• DirectoryServices
• Node.js
• SQL
• Windows 8
• Architecture
• Events
• NOSQL
• Team System
• Windows Forms
• ASP.NET
• F#
• Open Source
• Tips & Tricks
• Windows Presentation Foundation
• Azure
• IE
• Other
• Unit Testing
• Windows Workflow Foundation
• C#
• jQuery
• Patterns
• VB.NET
• XAML
• C++
• Linq
• Products
• Vista
• XML
• CLR
• Live Framework
• Regular Expressions
• Visual Studio
• XNA
• Community
• Live Mesh

1. Firstly, it’s interesting to see just how much more of our traffic is starting to come from mobile devices across all form factors
2. And secondly, also how over time the various devices jostle for position in the popularity contest.

January 2011

Here’s  a quick look at the percentage foothold the various competitors had back in January on DNK:

iOS based devices were obviously taking the lion’s share back in January rocking it at 70%, although Android did have a decent sized slice as well (20%) which is nothing to sneeze at when you look at Windows Mobile coming in at a poultry half a percent.

September 2011

Things have changed ever so slightly since then if we look at the same stats in September:

The iPad has taken a significant chunk out of its smaller sibling’s market share with the overall iOS device share dropping from approximately 70% to 65% over those few months.

Noticeable improvements have been made by the likes of Nokia, but Android has continued to press on increasing its share by a further 5%. The same cannot be said however, for Windows Mobile and BlackBerry devices whose numbers are barely worth the time it takes to count them up. If nothing else, we really would have expected Windows Phone 7 devices to start making some ground so it certainly is interesting.

With all that said, we have a couple of questions we’d like to ask if you’re one of the folks browsing on mobile devices. Firstly, is there anything you have in mind that would make your browsing experience better on the DNK site? We’d be more than happy to take some suggestions from those that use it most.

The further questions are more to do with your choice in form factor:

1. If you’re using an iOS device, are you currently considering dropping it in favor of an Android or Windows based device and why?
2. If you’ve currently got a Windows or Android device, are you going to stick with it or are you considering a switch – and to what?

I’ve put the questions in again below in the comments so that it’s easier to thread the replies. Please leave us a note in the comments if you have an opinion on any of these. Why do you folks think that Windows Phone 7 devices aren’t getting more traction? What’s missing? What is Android doing right that allows them to wrestle away 5 percentage points from the almighty Apple?

Until next time,

Finding meaning

It’s always tough to see if something is working with very little data to go on and it hasn’t been this way for long because IE9 is relatively new as browser adoption goes, but we’re starting to see a firm foothold take place with approximately 12.27% of all DotNetKicks traffic coming through IE9 in July 2011 which is up from 1.95% in January and 4.56% in March. Steady growth is a good sign, and since we put this feature in place just over a month ago, two particular pieces of data are interesting to us:

It’s always nice to see that just because of this feature, those users who are now using it tend to navigate through almost four times as much content on the site than the site average. That’s an incredibly attractive statistic for advertisers who see you are doing more to keep visitors interested in your site for longer visits.

This is also reflected in the Bounce Rate for users who use this feature. These users are now 25% less likely to leave the site immediately, and over time, this will reflect in the total number of visits on the site.

Given that IE as a browser across all version covers more than 30% of all traffic on DotNetKicks, we can only hope that more of those users take the upgrade path to IE9 and beyond. We also hope that more active marketing of this feature comes from Microsoft themselves to the point where the activity of pinning your favorite sites becomes as common and intuitive as when the average user creates a short-cut to a folder on their desktop.

Taking it further

It’s probably not worth going any more in depth with just a month of data, but we definitely like where we see this going. I think perhaps the next 6 months will start providing a better picture with IE10 on the horizon with no doubt even bigger plans for pinning as a concept when Window 8 starts surfacing, but we’re glad we’ve done this little experiment early in the process and definitely think it’s worth spending more time and development and marketing dollars on.

Lessons learned

One thing for sure is that, the very fact that the website can be pinned, could use more active instead of passive marketing to explain the benefits. We’ve primarily engaged with passive marketing using unobtrusive hinting in the UI only to current visitors. If you’re doing this with your website, I’d highly recommend setting some time aside for active marketing, to make sure your visitors know about it and the benefits so that you get the best results.

Conclusion

I hope this series has given some food for thought on how IE9 and site pinning can help improve the experience for your users and give them broader visibility into the services or experiences you can provide through your website.

Something we’ve seen that is infinitely powerful is that if you can find a way to get your users to put a direct link to your website on their task bar, your identity and product become a feature in their lives, and if you make it interesting for them, you stand a good chance of building a good relationship with those users. This tool provides a gateway to exactly that – so why not exploit that opportunity as much as humanly possible?

Until next time…
Robert TheGrey

In that case, I’ll identify two different use cases here:

1. Ordinary everyday users of a browser and their browsing experience;
2. Developers of web sites and their development experience in that browser.

Those are two incredibly different areas of focus and I think you’ll find that everybody and their dog have an opinion on the first one. The development contingent, perhaps the most passionate, has the most to say because it drastically affects their productivity and happiness in their day jobs. It’s this second use case I’m more interested in for the purposes of this article and I’ll be digging into what a browser needs to do to win me over as my primary development choice.

First a little history

I’ve been doing this web development thing basically since it started in the public eye back in 1995 when all we had was Mosaic, Netscape Navigator, a young Internet Explorer and “View Source” if we were lucky. I clearly remember Netscape being my favourite at the time all the way up to and including when IE3 came out.

It was only when IE4 arrived that my ears started to prick up, but even then, it was only just pulling level and web development wasn’t really difficult in those days since there wasn’t much you could actually do with a page and still keep it small enough to come down over a modem without growing a beard first.

IE5 came along, and with it my first personal exposure to CSS in its earliest forms, but I was hooked, and with the likes of Opera and Netscape still fighting for top spot, IE needed something special. Thus was born the browser that could not be killed. IE6, the champion of browsers in its day, with its only sin being that it was so damn good at the time; we still can’t get rid of it today. It was back then that IE6 was my primary development browser, a time when having the blue “e” icon on my desktop and watching it launch as my default browser didn’t make me wince in the slightest. Sadly, it has been downhill since then and one of the biggest contributors to that has been: Speed of innovation.

How we learn

Most of what web developers know about their craft doesn’t come from a classroom or a book. It comes from inspecting the online work of others – trying to decipher how they managed to achieve a particular effect or layout that defies logic.

The great pool of web developer knowledge is growing organically through inspection and creativity. Each developer standing on the shoulders of the next, building on what they’ve done, thereby homogeneously contributing back in to the greater pool of knowledge.

Why? Because they can’t help it – the source is laid bare for all to see and inspect and that is the very reason this is one of the fastest growing bodies of knowledge and communities on the planet. But this kind of organic learning can only be achieved through the existence of proper tools. Gone are the days when we used to hit “View Source” on the page and that was enough to grok everything being done.

Tools like Firebug kicked a massive hole through the cast iron door behind which much of this magic was locked away and in the last five years or so, each of the browsers have been getting better and better at providing those kinds of visualizations.

This is when I began to wonder if it was even possible for IE to capture the audience it had in its former glory years, and what kinds of things it would need to overcome in order to do so.

Next a little research

I couldn’t exactly start this opinion piece without at least doing some due diligence. That includes canvassing as much opinion as I could in a short space of time (which means it’s not very scientific), as well as trying things out for myself on something more than just the proverbial “Hello World” and then spouting my findings.

So first I sent this little teaser out on Twitter:

The results and responses I received were largely what I expected from quite a varied and open-minded group of web developers, mostly confirming my own thoughts, and in some cases expanding on things to which I hadn’t really given much thought. As a result, I dug deeper still, searching for various opinions and articles with comments both good and bad about every version of IE, before putting it to the test myself by using it as my primary development browser, forsaking all others in order to see what kind of trouble I could get myself into, or out of as it may be.

The experiment

To understand the friction points a little more, let’s take a look at a day in the life of a web developer. Let’s assume she’s been given the fairly common task of taking a Photoshop composite, and putting that on the face of a web application that is somewhere along the way to completion. For this, they’re going to be touching on a fair bit of technology in the browser space, namely:

1. HTML of course for the structure of mark-up and content;
2. CSS for layout and styling;
3. JavaScript for the interactive bits;
4. And a little bit of profiling thrown in for the hell of it.

For those four things I would expect the browser to provide the tools necessary to inspect, diagnose, visualise, troubleshoot and debug without breaking a sweat.

So I decided to try this experiment on a small project one of my clients asked me to do. They wanted to create a blog on the Blogger service, and the blog template had to have the same look and feel as their website of which I wasn’t involved with the original design. Oh and another thing, they weren’t able to provide me with access to the original CSS or HTML files – don’t ask.

No problem right? All I had to do was reverse engineer their existing HTML, CSS and JavaScript implementation and provide a blog that integrated seamlessly with their website on a sub-domain. This, my friends, is what the browser tools of today were born to solve!

So I started ploughing away using IE9 and the developer tools it comes with (F12) to see how it held up under the challenge, and how well it stayed out of my way. I started by inspecting their website HTML and CSS, and did the same thing on the default Blogger templates and widgets. Trying to make sense of it all is not an easy feat and the browser inspector needs to be at the top of its game if it’s going to be any good to you.

The verdict

It turned out surprisingly well actually, and a lot better than I expected to be honest. For this task, I would have estimated about half a day to figure things out and get something pretty close with my normal set of tools, and this exercise took me a little over a day, which is not bad going considering this was my first outing with this particular release of their developer tools.

The Good

Most of the things I really liked about IE9 developer tools, I already like about other browser inspectors, so not much of a gain there. Very few things actually stood out for me above the rest. One thing that did though in this instance was the JavaScript debugging, which was a very pleasant experience.

I’m not sure if it’s because I spend an inordinate amount of time inside Visual Studio, which is quite possible, but the experience just felt natural to me, whereas with other browsers I remember having to scratch around to figure out how it all worked, using breakpoints and stepping through code etc. This particular area in IE just works! If you’re coming from a VS background, you’ll probably find the same thing.

The Bad

The profiler and network tools don’t do much other than give you a stack of numbers in a grid – oh and some, I suppose you could call them “bar graphs”, that look like they’re trying to send us on a one-way ticket back to 1998.

The network and profiling visualizers in other browsers today give you such a great picture, and problematic areas in your site jump out at you instantly. It wasn’t the worst experience ever, and I could live with it if I had to, but having seen much better implementations than this, I can’t help but think that they just didn’t try very hard.

Programmers are typically bad at design, and boy does that show up here in particular. It doesn’t look polished, and unfortunately, that has a significant impact on perception of the product, even if it does do what it’s supposed to do.

And the Ugly

There are some pretty horrendous usability issues I bumped into time and time again and while they made life very difficult for me in my task, if they were fixed, I think it could actually be a very good challenger for the crown of best browser debugging and inspection tools. Things like having to click a billion tiny plus symbols and check boxes on tree views gets old very quickly. There just has to be a better way of representing these things today than using the same paradigms brought to us in Windows ’95.

I don’t think I should go into every painstaking detail here, but let’s just say that the IE team need to take a good, hard look at, and hopefully a leaf out of the book of the other main browsers out there in terms of usability. But I can’t leave it there without at least giving one example that genuinely had me swearing at my screen a couple of times. I think I actually developed a slight tic because of it:

So if there was one thing in particular I could change today, it would have to be the element selection mechanism:

You see that menu? And that corresponding “white arrow” icon on the toolbar? There’s your first mistake. Its very existence is the problem and has to be one of the dumbest design decisions I’ve seen in a while. It is making me click something to tell the tool to go into selection mode. For the life of me I cannot fathom why someone thought that would be a good idea?

But wait, they managed to make it even less usable by making me click that same button again if I wanted to select something different on the page….and you guessed it, another click if I wanted to select a third element.. Getting bored yet? I know I was…

The way that Chrome (WebKit) does it for example is to correctly assume, selection is the default activity you want to perform, and otherwise you probably wouldn’t have bothered to open the tool in the first place. It then dynamically highlights a box selection on the page as you hover over elements in the inspector.

You can simply run your mouse down the inspector (no clicks) whilst looking at the page providing a nifty way of visualizing how the page is held together. Alternatively you can right-click on anything in the page itself and choose to “Inspect Element” which jumps to the exact spot in the inspector.

Accomplishing that same task in IE today is dismally painful and tedious. The number of times I had to context switch every time I wanted to select an element just gave me a headache.

Fix that, and you’ve already won a thousand victories in a day in the life of any web developer!

Good will, and a time machine would help

If the IE team had a time machine, I suspect one of the first things they would change is how tightly coupled IE is to the Windows OS. I can’t imagine just how much pain that has caused them, and continues to do to this day. It affects everything in development, distribution and especially their time to market. But they’ve made that bed now, and there are undoubtedly some very smart people working there, so figure it out, and it looks like they might have made a start with IE10 already starting to show up after IE9 had just launched.

Oh and please – enough with the reboot already! It’s 2011 in case you hadn’t noticed…

Again, it comes down to a point of perception. When developers see how much friction is involved in the installation process, it doesn’t inspire them with any confidence and certainly doesn’t get them chomping at the bit to try out the development experience. Perhaps wrongly so, but perception has led people to ignore even the most adept marketing pitches.

Oh, and about that marketing

This comes back to the age old argument about supporting web standards. Try not to bend the world view with half truths about what IE now supports, spouting so called proof of feature implementation supremacy, only to have independent assessments tear the arguments limb from limb.

You might be able to pull the wool over the eyes of the average user, but developers can see straight through the marketing speak. Web developers need to cater to deficiencies in the product. Fact! If the vendor is actively masking those with semantics and choice of language, it really just comes across as dishonest and leaves a bad taste in the mouth. There’s nothing that developers despise more than a vendor who doesn’t tell it like it is.

Plugins, developers love plugins, and web standards

Anything the browser can’t help with in development, presumably a plugin can handle in theory. In order for that theory to become practice, the plugin story needs to be easy – really easy! The awesome Firebug plugin is a prime example of what community efforts can achieve. The size of the plugin ecosystem is directly proportional to how easy they are to create and distribute. If you want developers to use your browser, you need to get this one right.

As per the marketing comments earlier, web standards are really high up on developers’ list for two reasons:

1. Developers want to take advantage of new features, and the sooner browsers support them, the sooner they can be introduced;
2. Developers want, more than anything else, to write their code once, and once only! The only way that is ever going to happen is if the browsers can agree, and the only way that seems possible is if they implement the web standards they profess to agree with.

I understand there are a bunch of features that some browsers jump the gun on. Web sockets spring to mind here because no matter how cool something is, if it compromises security, people are going to lose some faith. And the last thing IE needs at this stage is a loss of faith.

But what about supporting simple things like `history.pushState()` for example? IE is the only major browser that doesn’t and it would make our lives some much easier if it just took the plunge and joined the rest of the crew. It will eventually have to anyway, so why not sooner on these kinds of things?

Version hell

There are more than 4 official versions of IE widespread in the wild today, and I’m not sure there’s anything that can be done about this, but it came up so often on the feedback I got, I had to make some mention of it. I think this is a grave hole that was dug many years ago, ironically due to the unprecedented foothold IE6 managed to get in the enterprise and Windows XP markets at large. A victim of their own success, it is now the number one snide remark thrown in Microsoft’s direction, that we still have to design websites with IE6 in mind today.

Their incessant need to be backwards compatible is working beautifully for them in the user space, but is biting them badly in the developer space, but it’s reached a point where it’s even starting to leak through to users now, and it’s a shame that this is the first time Microsoft seem to have taken any notice.

Most developers are just starting to express pure apathy since the anger has died down and are giving up completely on supporting IE6 these days, and even the likes of Google are officially not supporting IE7 anymore. It’s hard to tell if Microsoft have any problem with this – at least not on the face of it. It is this very complacency that is so offensive to developers who care down to their very core about the experience they are giving their users.

Keeping multiple versions out in the wild has its pitfalls on having to constantly develop for the lowest common denominator and jump through all sorts of hoops to still provide a rich experience to those users on newer software. But it can also go horribly wrong in the opposite extreme. Google force new versions of Chrome down your throat at such a rate that it’s impossible to keep up.

They are also demonstrating some catastrophic stupidity by releasing some very unstable versions, especially in the last few releases. I’m not on the developer beta track for that very reason, but even I have been negatively impacted by some pretty horrendous regressions, some of which took over 2 months to disappear, and in Google release cycles, that’s like – a dog year – or something.

What’s in a test?

A lot of people seem to mention side-by-side installation of versions, but to me that’s slightly different to primary development in a browser. You have to test every single major browser out there before launch anyway and it’s just not economical anymore to do so yourself. I’m also willing to bet body parts that you won’t be able to get 12 versions of Google Chrome installed side-by-side either, so I don’t understand why people still whinge about this point.

I know it’s a fine line, but let’s face it, a developer would usually develop in a browser they feel will get them 95% of the way there, and then they’ll start making tweaks while testing in other browsers. Nobody has the time, machines, or willpower to constantly be testing in all browsers. Well, maybe some do, but I honestly feel sorry for those folks.

I usually outsource this function to one of many online services that do this now and get far better results. It’s time to get with the programme and move on…

In conclusion

The browser needs to get out of the way and be friction free if a developer is going to voluntarily choose it. I think we can all agree that IE8 and below don’t stand a hope in hell of being a developer’s primary browser.

If IE vNext can start addressing those particular problem areas above in the eyes of developers, which means - “for real” and not just in the marketing jibber-jabber, then I think it could start striving to wear the crown that IE6 once wore in the 1990′s – it was untouchable and de facto, the best thing since sliced bread – but that bread is stale now and they need to bake some more – with bells on!

What other boxes do you think IE would need to tick before you would be able to use it to drive out development on your next web site project? Please leave a comment below and let’s get these out in the open in a constructive way so that we can help shape the development experience in future. Until then, I’ll be using Chrome for my friction-free-fix :)

Until next time…
RobertTheGrey

Bye-bye boilerplate

While it’s useful to see the boilerplate code that goes in to making this feature work as the last post describes, it’s even more useful when you see how easy it will be now using the jQuery plugin: Pinify created by Brandon Satrom and Clark Sell to set all this up. The beauty of it being that it’s cross browser safe. These features won’t even be attempted unless the current browser is at least IE9, which takes a heck of a lot of plumbing and error checking code out of your hands, and leaves you with only the decision making necessary to get the features implemented.

Installation – as easy as One, Two, Three!

Firstly, you’ll want to get the Pinify files you need. You can download direct, or do what I did and install as a Nuget package:

And search for Pinify:

Next thing you’ll want to do is add the scripts and css references to your master layout(s):

[sourcecode language="html"]
<link rel="stylesheet" type="text/css" media="screen" href="/css/jquery.pinify.min.css" />
<script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.pinify.js"></script>
[/sourcecode]

Lastly, you need to make a call to the plugin after the page has loaded to kick the whole process off:

[sourcecode language="javascript"]
$(document).ready(function () {
$(‘head’).pinify({
applicationName: ‘DotNetKicks’,
startUrl: ‘http://dotnetkicks.com/default.aspx’,
tooltip: ‘.NET links, community driven’,
navColor: ‘#1C6CB6′,
window: ‘width=1024;height=768′,
tasks: [{
'name': 'Latest',
'action': 'http://dotnetkicks.com/default.aspx',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Upcoming',
'action': 'http://dotnetkicks.com/upcoming',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Submit',
'action': 'http://dotnetkicks.com/submit',
'icon': 'http://static.dotnetkicks.com/images/icons/kickit.ico'
},
{
'name': 'Blog',
'action': 'http://blogs.dotnetkicks.com/blog',
'icon': 'http://static.dotnetkicks.com/images/icons/blog.ico'
},
{
'name': 'Twitter',
'action': 'http://twitter.com/dotnetkicks',
'icon': 'http://static.dotnetkicks.com/images/icons/twitter.ico'
}]
});
});
[/sourcecode]

See how easy it is? Notice that we’ve set up a few ‘jumplist’ items to show the latest and upcoming links as well as a means of quickly getting to the link submission page. Anything is possible here, so let your imagination run wild.

So now we keep quiet about this new feature and only let the most enterprising of users find it themselves right? Right?! No…

Go ahead “Tease” your visitors

There’s no point having an awesome feature and not talking about it! So show it to your IE9 users when they visit the site. There’s huge potential there, why not tell them about it? Luckily, Pinify comes with a few ways of doing this. You can do it in a simple (and unobtrusive) way with a little panel that drops down from the top of the page telling the user what to do:

The default implementation will put this panel right at the top of the page and it will float above the text as you scroll. As you can see from the picture above, we didn’t want it right at the top. Luckily, that’s nothing a little CSS tweak can’t fix. We made a slight modification to ours to get it in a position we wanted.

First you add a simple <div> you can target for this little panel:

[sourcecode language="html"]
<!–snip–>
<asp:ContentPlaceHolder ID="MainBodyHeader" runat="server">….
<div id="pinifyNotify"></div>
<asp:PlaceHolder ID="phWebSiteAlert" runat="server" />…
<!–snip–>
[/sourcecode]

After that, you tweak the CSS slightly. The original CSS looks like this:

[sourcecode language="css"]
.pinify-hanging-container {
padding: 5px;
width: 350px;
height: 20px;
position: fixed;
z-index: 100000;
top: 0px;
left: 80px;
border-radius: 0px 0px 10px 10px;
}
[/sourcecode]

And our modified CSS changed these two values to achieve this:

[sourcecode language="css"]
position: relative;
left: 250px;
[/sourcecode]

Lastly, you add this simple piece of JavaScript to complete the puzzle:

[sourcecode language="javascript"]
$(document).ready(function () {
$(‘#pinifyNotify’).pinify(‘pinTeaser’, {
addStartLink: false,
backgroundColor: ‘#191b1c’,
pinText: ‘Unlock the true potential of DotNetKicks. Drag this to your taskbar!’
});
});
[/sourcecode]

Go ahead, play around with it, there’s plenty you can do. Also, if you’re a little more interested in controlling the entire experience, you could go for an even more branded approach by utilizing the different “type” values in the Pinify settings:

[sourcecode language="javascript"]
type: ‘topHat’
[/sourcecode]

Which puts the bar all the way across the top of the browser just like many other notification bars we see around the internet today:

[sourcecode language="javascript"]
type: ‘brandedTopHat’
[/sourcecode]

Which gives you more control of the graphics loaded on the inside:

[sourcecode language="javascript"]
type: ‘doubleTopHat’
[/sourcecode]

Which lets you customize the left and right hand sides of the area like so:

Obviously you’ll need to come up with the graphics, but this does give you an idea of how rich you can make the experience.

Sick of static jumplists? Let’s get dynamic…

Adding dynamic ‘jumplist’ items that don’t necessarily point to exact URLs is a piece of cake as well:

[sourcecode language="javascript"]
$.getJSON(‘User/FavTagList’, function (data) {
var tagList = [];

$.each(data, function (key, val) {
var tag = {
‘name’: data[key].tagName,
‘url’: ‘tags/’ + data[key].tagName,
‘icon’: ‘/Content/Images/icon-tag.ico’
};
tagList.push(tag);
});

$.pinify.addJumpList({
title: ‘Favorite Tags’,
items: tagList
});
});
[/sourcecode]

Here we have a ‘jumplist’ item called ‘Favorite Tags’ that makes a simple JSON call to get your favorite tags as a user. Once again I have two words for you: ‘imagination’ and ‘wild’ :)

Well that was nice and all, but how well is it working?

When all is said and done, and you’ve gone to the effort of providing this rich experience for your IE9 users, how can you tell if it’s working and if visitors are even using it? Well it’s simple really.

We use Google Analytics to inspect the traffic on DNK, probably just like most of the civilized world does today. If you’re in the same position, all you really need to do is add some campaign identifiers to the URLs you put into your ‘jumplists’ like this:

[sourcecode language="javascript"]
$(document).ready(function () {
$(‘head’).pinify({
applicationName: ‘DotNetKicks’,
startUrl: ‘http://dotnetkicks.com/default.aspx?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9′,
tooltip: ‘.NET links, community driven’,
navColor: ‘#1C6CB6′,
window: ‘width=1280;height=1024′,
tasks: [{
'name': 'Latest',
'action': 'http://dotnetkicks.com/default.aspx?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Upcoming',
'action': 'http://dotnetkicks.com/upcoming?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/news.ico'
},
{
'name': 'Submit',
'action': 'http://dotnetkicks.com/submit?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/kickit.ico'
},
{
'name': 'Blog',
'action': 'http://blogs.dotnetkicks.com/blog?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9',
'icon': 'http://static.dotnetkicks.com/images/icons/blog.ico'
},
{
'name': 'Twitter',
'action': 'http://twitter.com/dotnetkicks',
'icon': 'http://static.dotnetkicks.com/images/icons/twitter.ico'
}]
});
});
[/sourcecode]

Notice the (?utm_source=ie9&utm_medium=jumplist&utm_campaign=pinned-ie9) tagged on to all the URLs? Google Analytics will recognize this and create a campaign for you when visitors begin using this feature. It’s important to note that these URLs are unique to the pinned version of your site, meaning that the only way they’d hit this is if a user specifically clicked on one of the ‘jumplist’ items.

When users begin pinning your site and start accessing it via the task bar, you’ll notice something in your Google Analytics account:

But what about events that don’t hit particular URLs? How do we track things like that similarly in Google Analytics? Let’s say for example a user wants to “Unfavorite” or “Favorite” a particular tag from the jumplist. This might not hit a particular URL on your site, but rather potentially just send an AJAX instruction to your server which will save that for the user. You might still want to track the feature usage as it happens from the ‘jumplist’ in particular.

For that we have access to a global object exposed by Google Analytics called (_gac). One of the things you can do is push asynchronous events to this object and it will add that data to your campaign. And this is how you would make a call to it:

[sourcecode language="javascript"]
onclick="_gaq.push(['_trackEvent', 'Tag', 'MarkAsFavourite', 'jumplist']);"
[/sourcecode]

That’s a wrap!

I hope that gives you enough information to get cracking on your own site, as well as tracking how well this feature is being adopted by your visitors. With that kind of powerful information at your fingertips, you can very quickly see what is working, and where adjustments need to be made. You can get valuable usability or discoverability issues nailed down before your users start complaining which will hopefully lead to a happier and longer lasting experience for your users on your site.

Don’t forget to check out the useful list of resources we’ve kept track of relating to this technology and if you have any helpful hints and tips that could make it even easier, please drop us a comment below!

Until next time…
RobertTheGrey

The beta period only has 2 objectives:

1. First and foremost – limit the number of folks that experience bugs. Now hopefully there won’t be too many since we’ve tried to release a stable product, but it does take a certain type of hardcore user to keep interest levels up and more importantly, to keep letting us know about them so we can make the fixes.
2. Content is the life blood of the site – and without that it’s not going to be helping anyone. So we’re using this period to get some smart authors on board who are willing to impart their knowledge in the interests of making the internet a better place.

Once we’ve achieved what we believe is a reasonable level of comfort with both of the above, we’ll tear down the beta wall and let everyone at it. If you’re keen to get an invite and think you can help out with either of these two points, then by all means sign up on the front page and we’ll send you a beta code for full access.

We’ll be making most of the announcements on twitter, so feel free to follow us on @DevDirective to stay in the loop or just ask us add hoc questions there if you like…

Look forward to seeing you on the site!
Cheers,
RobertTheGrey

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

It’s been a while since we talked about expanding the interactive features on DotNetKicks. Last time we spoke about Pinning the site with IE9, which is a great feature, and certainly helps get the brand get out there and into the hearts and minds of those that enjoy using the service. But with the release of the IE9 Release Candidate, it looks like the IE team have been hard at work coming up with some new and interesting ways in which you can engage with your customers.

Let’s face it, the web and the desktop are getting closer and closer to the point where they will one day be synonymous with one another. And so increasingly, if you want your offering to be noticed by your prospective customers, you’re going to have to find a way to integrate with their daily lives. Right now that might just mean that they Google for you on Bing, but in future, it’s more than likely going to be a conscious user choice to include your brand on their desktop. That part is going to depend entirely on how well you’ve managed to transition into the desktop arena from an already significant web investment on your part.

I think we can all agree that the various browser vendors are going to have differing opinions on what the best way to do this web-to-desktop integration is. Google for example is doing an amazing job with their chrome web store, and the number of apps (i.e. websites that install for easy access on your chrome home page) already available is simply astonishing. The problem as I see it is closing the vital gap between the browser and the desktop, and something that folks often forget is that the Windows 7 task bar brings a ton of interactivity to the desktop game with an API that’s very easy to program against and it’s only recently that the browsers in the market are starting to think about passing those benefits of this new paradigm on to the applications they provide the chrome for (no pun intended) – namely, our websites, and this is where IE9 is leading the way.

Okay, so where do we start?

First and foremost, you need to really think about the kind of experience you want to focus on for your users. If you run any kind of video media on your site for example, IE9 allows you to wire up the media controls directly on the Windows 7 thumb bar with the exact same experience you’d get with Windows Media Player or iTunes. Now while this doesn’t apply directly to DotNetKicks, it does give you an idea of how far the IE team are venturing into the desktop territory by exposing features like this.

To be clear, the various browsers already mostly support some integration with the Windows 7 task bar, it’s just that they don’t yet provide a way for you, the website owner, to dictate the content of the jump list with the ability to control the user experience, and this is where some real untapped potential lies. It doesn’t mean that any of the other browsers can’t start supporting this immediately, they could, and I’m sure they’re already planning it – especially if the chrome release cycle is anything to go by!

Here at DotNetKicks, we’ve decided to start making that inevitable transition, and so, hot on the heels of our Site Pinning experiment, we’re aiming to take advantage of a number of the IE9 and Windows 7 task bar features coming very soon, and while we were exploring and implementing that, we thought we’d share the experience with you, so that you too can take advantage of these great features as they become available to the public at large, and start booking an early ticket to a seat on your future customer’s desktop.

Currently we have a simple pinned site experience with a custom Jump List that will allow for quick navigation to certain areas of interest in our site. Implementing this isn’t particularly difficult. In our case it was simply taking advantage of the API exposed via the meta tags:

[sourcecode language="xml"]
<meta name="application-name" content="DotNetKicks" />
<meta name="msapplication-starturl" content="http://dotnetkicks.com/default.aspx" />
<meta name="msapplication-tooltip" content=".NET links, community driven" />
<meta name="msapplication-window" content="width=800;height=600" />
<meta name="msapplication-navbutton-color" content="#1C6CB6" />
<meta name="msapplication-task" content="name=Latest;action-uri=http://dotnetkicks.com/default.aspx;icon-uri=http://static.dotnetkicks.com/images/icons/news.ico" />
<meta name="msapplication-task" content="name=Upcoming;action-uri=http://dotnetkicks.com/upcoming;icon-uri=http://static.dotnetkicks.com/images/icons/news.ico" />
<meta name="msapplication-task" content="name=Submit;action-uri=http://dotnetkicks.com/submit;icon-uri=http://static.dotnetkicks.com/images/icons/kickit.ico" />
<meta name="msapplication-task" content="name=Blog;action-uri=http://blog.dotnetkicks.com/;icon-uri=http://static.dotnetkicks.com/images/icons/blog.ico" />
<meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com/dotnetkicks;icon-uri=http://static.dotnetkicks.com/images/icons/twitter.ico" />
[/sourcecode]

The goal now is to take this a few steps further, and really expose the guts of the site at a very granular level so that we can hit the sweet spot of the particular area of interest a users might have. For instance, you might only want a cursory glance at what happens in the .Net world in general, but you care greatly about anything that might be happening in the Windows Communication Foundation (WCF) space because that’s a particular technology you’re deeply engaged with at present. Well, how about being able to pin your own popular tags or sections to your task bar instead of the whole site in general? Then you’d be able to navigate directly there without any deviation. Or how about a simple look at the jump list which can tell you how many articles are currently trending in that exact area of interest, or if anything in particular is being kicked *really* hard?!

You get the idea, but these are the new ways in which people are going to have to start targeting their audiences. Gone are the days when you can expect folks to trawl through your website while they look for something of interest. There just isn’t enough time in the day anymore and there’s too much information out there to digest, and the websites that will come out on top in this day and age, are the ones who know how to target the right information at the right demographic, and more importantly, those make it easy for that demographic to repeat that process over and over again. That’s why we think that the upcoming features in IE9 are going to help us enable that kind of targeted user experience and we’d like for you to come along for the ride if that kind of thing gets you up in the morning!

In the coming weeks, now that IE9 Release Candidate is here we’ll be taking a closer look at some of these features, and we’ll be going into more detail about exactly how we plan to implement, and track their effectiveness if possible.

Our laundry list so far includes:

• Creating more targeted and granular Jump Lists for categories, tags or even searches
• Creating specific use chosen pinned sections by category or tag
• Notifications on new Kicks or trending Kicks
• User specific recently visited or Kicked items in Jump Lists
• Notifications of activity on favorites or articles you Kicked
• The potential for interacting with the site directly from the thumb bar
• Time sensitive based notifications
• The kind of experience you can expect your user to have both when the pinned section is open and running or closed.
• And hopefully much more…

There is no doubt, that the web is slowly but surely moving to the desktop, and with that comes the chance to enable much richer experiences for everyone. I’m sure you’d much rather provide a more seamless experience with your site or products, or perhaps even sections of products. This is a time when we can create a more immersive experience for the frequent visitor while at the same time hopefully converting that occasional visitor in to a bona fide fan!

Obviously, we’re not the only folks doing this exercise and we’ll be looking to maintain and expose an ongoing list of fresh links on the topic to help you get started with ease.  Have a look at our post on this here and bookmark it if you’re interested since we’ll be updating it regularly, and if you’ve got an article on-line about your adventures, feel free to let us know and we’ll add it to the links if it adds value. In the mean time, you can check out the main IE blog here, and of course the IE9 website itself if you want to stay up to date.

It all really boils down to efficiency in the end. Users will come to a site they value and usually put up with having to click through to get where they want as a labor of love today – but for how much longer will they put up with that? And what if they didn’t have to? What if you could make it so that their interaction with the site was bordering on frictionless? Would that not endear them to your brand even more? Let’s find out…

Over and out
RobertTheGrey

This is going to be one of those organic posts that attempts to stay current with relevant links to posts around IE9 and its features – some of which we’re implementing on the DotNetKicks site. As this page grows, I’ll probably end up dividing it into sections as it makes sense, but for now, here’s a list of links that I’ve been using to research the topic and start our journey down this path:

Our Series

IE9 Feature Overview

Our proposed IE9 feature shortlist for DNK

IE9 and the Pinify magic in action with analytics

IE9 Pinning Analytics Results

Microsoft themselves

Working with Pinned Sites from the IE Blog – I guess the primary starting point has to be the IE Blog itself right? This is the post we used initially, and there are some useful links on that article which I’ve put down below.

PDC 2010 Session – If you want to find out about something, I guess you could do worse than getting it straight from the horses mouth! Go 10 minutes in to this presentation and you’ll get a great overview of what’s possible.

User Experiences again from the IE Blog – This post pretty much lays it out for you in graphical form and form presents the beginnings of the technical dive into how to take advantage of the features from a UX point of view.

Pinned Sites on MSDN – Here you can start digging into much more of the technical details behind actually implementing the features on the site. This page will probably remain one of the canonical sources of technical information on the subject.

Adding a task to a Jump List on MSDN – This one is task specific as it says, but it’s nice to be able to focus down on a particular item when the range of options is fairly extensive.

Watch the Channel 9 video on the new Pinify JQuery plugin available for that we are using.

Community at large

Scott Hanselman – The internet would not be complete without a blog post on the topic from Scott. This guy ssure does cover a lot of ground. It’s a great post, very informative and cuts right down to the meat of what you need, and what you get.

Jon Hartmann – Jon has also done a great job explaining in significant detail whilst still keeping it simple. This really is a paint by numbers article.

The Code Project – Another place you can always count on having the information you need. Have a look at this great breakdown of adding tasks and jump lists to pinned sites.

Website examples

The Huffington Post – You can drag different sections to the task bar and the pinned site will be specific to that section and leave out al the other clutter you’re not interested in. There are some great focussed user experiences that come from this.

Gilt Groupe – These guys have got members-only exclusive shopping and the demand that creates down to a fine art! Their pinned site uses time notifications to let you know when the sales start.

hi5 – The social web starts taking on a whole new meaning with these guys. The really are pioneering some of the greatest work with their use of the features. Check it out!

There you have it, I hope that gets you all on the way. If you have any suggested links you think we should add, let us know via the Contact Page.

Happy hunting,

RobertTheGrey