Jon Galloway

MSDN Low Bandwidth Bookmarklet

There’s a semi-hidden feature in the MSDN Library website: Low Bandwidth view. We’ll talk about how to use it, why I like it, and some tips for switching it on and off. We’ll end up with an MSDN Low Band bookmarklet I whipped up to make it even easier.

The Low Bandwidth view has been available for a few months, but you wouldn’t know about it unless someone told you, since the only way to turn it on is to monkey with the URL. Try it - browse to:

http://msdn.microsoft.com/en-us/library/system.object.aspx

Now we’ll add the magic word: “(loband)” right before the “.aspx” at the end:

http://msdn.microsoft.com/en-us/library/system.object(loband).aspx

Magic!!!

Why LoBand is High Value

Simpler Layout

The obvious difference is that it replaces the navigation treeview on the left with a simple link. There are other subtle differences – simpler layout, fewer superfluous images. Higher signal to noise in my book.

Smaller Page Weight

The High Bandwidth version of this page weighs in at 100KB of HTML, but 400KB total by the time all the images, javascript, and CSS are loaded. Compare that with 66KB HTML / 70 KB total for the low bandwidth version. In this case (which is pretty representative) the low bandwidth version slimmed the page weight by 82.5%.

Faster Page Load

I’m not just talking about the smaller HTML here. The navigation tree on the left contains tons of nested unordered lists (ul>li>ul>li etc.). It’s actually a big improvement over the former HTML for that treeview, which (if I remember correctly) included a bunch of horrible nested tables with inline styles and javacript attributes. The new treeview uses a Telerik control, and outputs relatively clean HTML. Still, that treeview takes a while to load up – on my relatively quick development machine (with a very fast internet connection), the low band page loads twice as quickly – most of the time is spend in rendering the page. I’m not talking about milliseconds of difference here, I’m talking about 1 second load / draw time for low band vs. 4 second load / draw time for high band.

Who Cares?

Well, if you’re a Microsoft developer, you spend a lot of time on MSDN. There’s the time saver factor, sure, but more important is that fast load times removes the barrier to exploring the site.

Getting To The LoBand

The simplest way is to just add that (loband) bit before the .aspx file extension. If you’re on a page which already has one of those funky filters in the URL (like this: http://msdn.microsoft.com/en-us/library/cc189009(VS.95).aspx) you can just add a comma and put it in afterwards: http://msdn.microsoft.com/en-us/library/cc189009(VS.95,loband).aspx

When you switch to low bandwidth view by tweaking the URL, you  get a a “persist low bandwidth view” link at the top, which is nice. Clicking that link sets a cookie, so all MSDN you visit will be in low bandwidth view. That sounds great, but I find there are times where the low bandwidth is too low. Some pages (especially articles) are hard to read, and when learning a new object model the navigation tree is helpful. In that case, there’s a link at the top (where the “persist low bandwidth view” link used to be, before we clicked it) which unsets the cookie and returns us to the normal, high bandwidth view.

That all works, and I’ve used it since I heard about the low bandwidth view a few months ago. Still, it gets old – especially editing the URL the loband bit every time I’ve removed it.

Enter The Bookmarklet

Bookmarklets are great – they’re short Javascript functions that you bookmark, so you can run the Javascript on any page by opening the bookmark. They’re kind of like tiny Firefox addons. You can read more about bookmarklets, of course, on Wikipedia.

Well, after messing with that MSDN URL enough times, I figured it was time for a bookmarklet. So here it is: MSDN Low Band

It’s just a simple toggle – when you’re in the normal view, clicking the bookmarklet will switch you to Low Bandwidth view. Clicking it again will return you back to the normal view again. In Firefox / Opera / Safari, you can just drag that peachy colored button to your Links toolbar. In Internet Explorer, you’ll need to right click the link and select “Add To Favorites”, making sure to save to the Links favorite folder. I’ve tested it in IE, Firefox, and Safari.

The Delicious.com Bookmarklet installation help page has some nice screenshots and more information on installing Bookmarklets. If you’re interested in writing your own bookmarklets, I recommend you use a web based Bookmarklet helper page to simplify the grunt work, like this one.

So How Does It Work?

It’s really simple. At first I messed with the URL, but then I figured out that it was simpler to just modify the cookie and reload the page. Here’s the code, formatted so it’s easier to read:

javascript:
if(document.cookie.indexOf('LoBandEnabled=yes')<0){
  document.cookie='LoBandEnabled=yes;path=/;domain=.microsoft.com;%20expires=Wed,%2001-Aug-2040%2008:00:00%20GMT';
}
else{
  document.cookie='LoBandEnabled=no;path=/;domain=.microsoft.com;%20expires=Wed,%2001-Aug-2040%2008:00:00%20GMT';
}
window.location.reload();