Rey Bango » Microsoft

Fix Common IE Problems: Update your Docmode for Web Standards

Rey Bango — Mon, 09 Jan 2012 20:39:18 +0000

Document compatibility defines how a browser renders your website. The more specific you are at telling the browser what to expect, the better the experience for your users. When using web standards like HTML5, start by explicitly declaring the HTML5 document type:

This markup triggers standards mode in Internet Explorer 9 and 10. And it also works well in Chrome and Firefox. Four steps will get your site ready for many browsers and devices:

Step 1: Validate that your site uses standards mode

Check whether or not your site is currently in standards mode:

Open the website in IE10 platform preview.
- Note: You can also follow the same steps to update the docmode for IE9 only without downloading the preview.
Press F12 to launch the IE Developer Tools or find it on the Tools menu as shown below:
- Note: If you’re not familiar with using the IE F12 Developer Tools to debug your webpages, please read the following tutorial.
Check if your site indicates Browser Mode: IE10 and Document Mode: IE10 standards as shown in the toolbar below:

Click to Enlarge
If your site is in Browser Mode: IE10 and Document Mode: IE10 Standards, you’re done! Note if the Browser Mode and Document Mode of your site are different than above. A common example is Browser Mode = IE8 and Document Mode = Quirks which indicates that your website was designed for older versions of IE and may not be ready for web standards.

Click to Enlarge

Step 2: Implement docmode for web standards

Force IE10 standards mode to test your website:

Insert
into your website’s HTML page
- Learn more about how to update your doctypes here
Reload your page in the browser and check the Browser Mode and Document Mode again using the F12 Developer Tools. If Browser Mode: IE10 and Document Mode: IE10 standards are not shown, continue below.

Step 3: Determine why your site is not in Standards Mode

Most problems are related to supporting older versions of IE. Start by ensuring your standards-based code is rendered in IE9 and 10. Then keep your non-standards-based code for older versions of IE.

My page is not in Browser Mode: IE10
- Possible Cause: Your website may flagged in Compatibility View and forced into an older browser mode to ensure the site functions
  - Resolution: Check if your site is on the list here. Learn more about the Compatibility View list and request removal here.
My page is not in Document Mode = IE10
- Possible Cause: Your website’s doctype is invalid or missing
  - Resolution: Check for a valid, well-formed doctype like:
    Learn more about how to update your doctypes here.

Step 4: Resolve common IE problems when updating docmode

Most problems are related to supporting older versions of IE. Start by ensuring your standards-based code is rendered in IE9 and 10. Then keep your non-standards-based code for older versions of IE.

Possible Cause: Conditional comments support browser version-specific features
- Resolution: Check for conditional comments that run non-standard code. These are often used on specific features supported by older versions of IE to allow the page to degrade gracefully. Check for code similar to this:
  Remove it and reload your page. Continue testing. Learn more about Conditional Comments here.
Possible Cause: User agent sniffing supports browser version-specific features
- Resolution: Check for user agent sniffing. These are often used to specifically target a browser based on the user agent string presented via the browser mode. Check for code similar to this:
```
if (version = /MSIE (\d+\.\d+)/.exec(navigator.userAgent)) {

	isIE = true;

browserVersion = parseFloat(version[1]);
}
```
  Start by implementing feature detection where possible with web standards. Learn more about User-Agent Strings here. The IE10 User-Agent String is located here.

Other reasons my page does not render correctly:

Possible Cause: Your website may be using browser specific features that are no longer supported. Use web standards whenever possible.
- Resolution: Run the Compatibility Inspector tool.
Possible Cause: Your website may be using 3rd party plug-ins or like Flash, Quicktime, and Silverlight that are no longer supported by the IE10 metro. Use web standards whenever possible.
- Resolution: Learn how to create plug-in free experiences. A complete step-by-step guide will be available shortly.
Possible Cause: Your website may be loading browser version-specific CSS files:
- Resolution: Ensure layout is avoiding CSS hacks where possible. Learn more about investigating CSS issues here.

A list of common problems is available in the IE Compatibility Cookbook.

If you’re unable to update your docmode with these resolution steps, tweet us @IE or check the Forums on MSDN.

For further detail, try these articles:

Defining Document Capability @ MSDN
Investigating Document Mode Issues @ MSDN
Interoperable Quirks Mode in IE10 @ IE Blog
Compatibility Inspector tool @ IETestDrive.com
Don’t Forget to Add a Doctype @ W3C.org

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Site Pinning: Rotating Overlay Icons for Multiple Service Notifications

Rey Bango — Tue, 18 Oct 2011 13:00:11 +0000

In my last post, I went over how to use IE9′s Site Pinning API to implement overlay icons to enhance user notifications. The demo focused on how to display a numeric icon to indicate when a specific event (e.g.: messages in an inbox) had occurred.

Pinned site with overlay icon

It’s a really great way of letting your users know that there’s pending information for them to check into. But what happens if your site offers multiple types of notifications? With websites offering so much functionality nowadays, it’s pretty common for them to also serve up multiple types of notifications, from friend requests and event reminders to new messages and game invites.

Rotating Multiple Overlays Icons

The great thing about the Site Pinning API is that it’s very flexible and through some JavaScript magic, you can easily display multiple overlay icons for the various services you have. In this demo, I want to rotate through 3 different overlay icons that alert the user to pending messages, requests and actions.

As before, I had to flex some of my artistic talent by creating the overlay icons using the x-icon editor. I created 5 of each and here’s how the first three look:

The code changed slightly from the last demo in order to accommodate multiple bits of data per fetch. While previously, I was only fetching one piece of data, in this demo, I’m returning 3, one for each notification type:

 myPin.init([{ "data" : [{ "label" : "Messages", "ntype" : "M", "num": 2 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 3 }] },
		        { "data" : [{ "label" : "Messages", "ntype" : "M", "num": 1 }, { "label" : "Requests", "ntype" : "R", "num": 5 }, { "label" : "Actions", "ntype" : "A", "num": 2 }] },
		        { "data" : [{ "label" : "Messages", "ntype" : "M", "num": 5 }, { "label" : "Requests", "ntype" : "R", "num": 1 }, { "label" : "Actions", "ntype" : "A", "num": 4 }] }
			   ]);

As a reminder, the method getData() simulates grabbing remote data. So if we look at the data above, we can simulate pulling back three distinct bits of data. This is why we call the method every 10 seconds using setInterval. This allows us to see how notifications might look over a period of time.

setInterval(function () { myPin.getData() }, 10000);

The next thing that changed is the use of a timer to allow a slight delay while rendering the overlay icons. Using setTimeout() provides enough of delay so that an individual overlay icon is visible to the user before rotating on to the next icon. If we didn’t have this delay, the rotation would be way too fast to provide any useful notification. If we look at the following image, we can see what the notification will look like:

Overlay icon showing numeric notification

This is accomplished via the following code:

// Grab the current set of data...
currData = this.dataBin[this.currIndex++].data;		

/* We're going to display a new overlay every x number of seconds to display a new overlay icon so
   let's loop through the data elements for the current set of data... */
for (var i=0; i < currData.length; i++ ){

	(function(idx) { setTimeout( function(){ myPin.dispOverlay( currData[idx] ); }, 1000 * idx); }( i ));					

}

Here’s what’s happening. In the first line, I grab the current set of data that holds all of the notification information (messages, requests & actions). That data looks like this:

[{ "label" : "Messages", "ntype" : "M", "num": 2 },
{ "label" : "Requests", "ntype" : "R", "num": 1 },
{ "label" : "Actions", "ntype" : "A", "num": 3 }]

I loop through each group of data and assign a timer using setTimeout() that will call dispOverlay() at ~1 second intervals. That’s the magic code that allows for the gradual icon rendering delay I mentioned before. The expected functionality is that the “messages” icon will render followed by the “requests” icon 1 second later, and then finally the “actions” icon.

Now, you might be wondering why I have an anonymous function wrapping the setTimeout(). It’s because I have a closure within setTimeout which can cause a common scoping issue in which the variable ‘i’, which I use to grab the current index of data, will only be updated to the last index value. James Padolsey has a great explanation on it and thanks to John David Dalton for helping me troubleshoot this.

The final change is in dispOverlay() in which I need to determine which overlay icon needs to display. Since I now have three different types of notifications, I need a conditional statement to determine the type and build the correct icon name:

if (theData.ntype == "M") {
	oImg = "images/messages-" + theData.num + ".ico";
} else if (theData.ntype == "R") {
	oImg = "images/requests-" + theData.num + ".ico";
} else if (theData.ntype == "A") {
	oImg = "images/actions-" + theData.num + ".ico";
}

This checks the type and serves up the right icon based on the type and the number of notifications pending for that type.

The Demo and Final Code

You can check out the demo by going here in IE9:

http://reybango.com/demos/sprotate/index.html

When the page renders, drag the tab down to your taskbar and pin it. You should see a new window appear with your newly pinned site. Next, you’ll see the overlay icons appear in the taskbar and they should begin to cycle every 10 seconds.

Here’s the full source code. You can also download everything here.




Pinned Site - Rotating Overlay Icons













Pinned Sites
Rotating Overlay Icons

Using Site Pinning and Overlay Icons for Enhanced User Notifications and Engagement I was recently doing some testing of IE9′s Site Pinning...

Related posts brought to you by Yet Another Related Posts Plugin.

Using Site Pinning and Overlay Icons for Enhanced User Notifications and Engagement

Rey Bango — Mon, 10 Oct 2011 13:00:06 +0000

I was recently doing some testing of IE9′s Site Pinning API and found out about a cool bit of functionality that can enhance user notifications. If you’re not familiar with site pinning, it’s a great way to allow users to have easy and quick access to their favorite sites via the Windows taskbar. There’s a really nice overview on Beauty of the Web that explains how it works.

Keeping Users Up-to-Date

One of the features the API provides is the notion of notifications that can allow developers to provide alerts to end users. The functionality allows you to dynamically insert custom overlay icons that can alert users when an important bit of information is available. These overlay icons are rendered over the favicon that is pinned to the taskbar. If you look at the image below, you can see it in action:

Pinned site with no overlay icon

Pinned site with overlay icon

So if you think about the possibilities, any site that offers users an inbox, special deals or sends out time-sensitive alerts could use this notification capability to keep their users up-to-date and more engaged on the site. Sites like the Huffington Post have already discovered that users that pinned HuffPost spent 49% more time on the site.

The best part is that adding this capability is insanely easy.

Setting it Up

For this post, we’re not going to go into the basics of how to pin a site. If you want to learn more, here’s a GREAT resource for getting you up to speed quickly: BuildMyPinnedSite.com. In fact, I used that site to help get me up-to-speed on the basics and it’s well-worth visiting.

To add notifications, you’ll need a couple of things:

A cool favicon for your site. If you don’t have one, you can use the handy web-based X-Icon Editor to create one.
A set of overlay icons to use. The recommended size is 16×16.

The API is JavaScript-based and we’ll use the following methods:

window.external.msSiteModeClearIconOverlay()
window.external.msSiteModeSetIconOverlay()
window.external.msSiteModeActivate()
window.external.msIsSiteMode()

The window.external.msSiteModeClearIconOverlay method is used to clear out any previously set overlay icons. window.external.msSiteModeSetIconOverlay allows you to specify the name of the notification icon as well as a accessible description. Lastly, we’ll use window.external.msSiteModeActivate to flash the pinned icon to notify the user of the update. Lastly, window.external.msIsSiteMode will let us know if the page was launched as a pinned site, thus allowing us to better determine when to run the code.

For the overlay icons, I’m using five images that display numbers 1 through 5 respectively to designate the number of messages are in a user’s inbox.

The Code

The first thing I need to add is the reference to my favicon. Note that if you don’t add one, then the Internet Explorer’s icon will be used by default.

Next, I want to create some sample data to work with. What I want to do for my demo is to have the overlay icon dynamically change every 5 seconds to simulate a more real-world scenario. The data is a simple array containing JSON data in each element.

myPin.init([{ "num": 1, "label": "Label 1" },
                { "num": 2, "label": "Label 2" },
                { "num": 3, "label": "Label 3" },
                { "num": 4, "label": "Label 4" },
                { "num": 5, "label": "Label 5" }
                ]);

By setting a timer, I’ll be able to pull a new set of data every 5 seconds.

setInterval(function () { myPin.getData(); }, 5000);

The main thing to keep in mind is that I’m “simulating” getting data from some remote host. In reality, all that the myPin.getData() method does is use a running counter to grab a new set of data and render a new overlay icon:

getData: function () {
            // A function that just simulates returning a result set...
            var idx = 0;

            // Determines whether the current page was launched as a pinned site.
            if (window.external.msIsSiteMode()) {

                idx = this.currIndex++;
                this.currIndex = (this.currIndex < 5) ? this.currIndex : 0;

                this.dispOverlay(this.dataBin[idx]);

            }

}

As you can see, it uses the running counter var currIndex to determine which array element to grab and then passes the data to dispOverlay(). This is where we use window.external.msSiteModeClearIconOverlay() to clear out any previously displayed overlay icons and also generate a string for the actual icon name. You can see that the oImg var is created on the fly based on the data we’re using.

dispOverlay: function (theData) {

            var oImg = "";

            // Is there any data?
            if (theData) {

                // Clear any preexisting overlay icon
                window.external.msSiteModeClearIconOverlay();

                // Create the image string...
                oImg = "images/num_" + theData.num + ".ico";

                // Go ahead and create the overlay image and it's label...
                this.setOverlay(oImg, theData.label);

            }

}

That icon name, along with the accessible label text for the icon, is passed to setOverlay() which sets the overlay icon via window.external.msSiteModeSetIconOverlay and flashes the taskbar icon using window.external.msSiteModeActivate.

setOverlay: function (icon, desc) {

            // Sets the overlay icons...
            window.external.msSiteModeSetIconOverlay(icon, desc);
            window.external.msSiteModeActivate();

}

Test it Out

To test this out, it’s a simple matter of running your newly pinned page in Internet Explorer 9, grabbing the tab and dragging it down to your taskbar:

Tab being dragged to the taskbar

Pinned site with no overlay icon

Five seconds after the page has been pinned, the code will fire off the first notification and continue to cycle through the other icons every subsequent five seconds.

Pinned site with overlay icon

An important thing to remember is that the IE F12 Developer tools are available to you to use in debugging your pinned site. So if you run into quirks, simply press the F12 key and the tools will appear.

The Demo and Final Code

You can check out the demo I whipped up by going here in IE9:

http://reybango.com/demos/sitepinning/index.html

When the page renders, drag the tab down to your taskbar and pin it. You should see a new windows appear with your newly pinned site. Five seconds later, you’ll see the first overlay icon appear in the taskbar.

Here’s the full source code. You can also download everything here. The really great part is that it isn’t a lot of code to implement this. In fact, to use the API only required 4 method calls. The bulk of the code was to simulate pulling in data. And the “>impact on user engagement is certainly worth adding in the capability.




Pinned Site Test












Pinned Site Test

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

MIX11 Day 1 Recap: IE10 & HTML5

Rey Bango — Wed, 13 Apr 2011 16:41:56 +0000

Day 1 at MIX11 was awesome. The vibe was excitely what I expected: awesome and exciting. And the keynte kicked it off with the big news that the next version of Internet Explorer is already in progress and that IE10
Platform Preview 1 is ready for download. Since the launch of IE9, the concern that I’ve consistently heard from developers is that they expected to wait another 2 years before a new release of Microsoft’s browser. From the tweets I saw yesterday, it seemed like there was a collective sigh of relief to know that a new version is under way and that there’s something to play with right now. Couple that with the list of IE10 features announced like CSS3 3D Transforms & Transitions, Flexbox, and ES5 Strict Mode (and more), and I genuinely feel that developers are excited to see the great progress being made by the IE team. Shoot, even Douglas Crockford is happy! He’s at MIX and I made sure to ask what he thought and he mentioned that the addition of ES5 Strict Mode made him VERY happy…and WE WANT CROCKFORD HAPPY!!

Another really cool announcement during the keynote was that Modernizr will be shipped with the ASP.NET MVC 3 Tools update. The importance of this can’t be understated. Microsoft has millions of developers building web applications using their tools and the fact that Modernizr will be shipped in Microsoft tooling is a HUGE validation to the work done by the Modernizr team as well as the importance of HTML5 to the future of web applications.

HTML5 is a hot topic with a ton of sessions focusing on the specification. I’ll be presenting on HTML5 polyfills and shims tomorrow to show developers how to leverage HTML5 while still supporting sites in non-modern browsers. It’s incredibly exciting (and intimidating) to be presenting to such a large group of developer so wish me luck!!

Interestingly, I kept hearing people mention the Knockout.js MVC/MVVM Framework for managing your code organization and providing data-binding. I hadn’t heard of it so I’m definitely going to have to check it out.

More to come later….

#ms_mix11_w

My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7 I wanted to do a refresh of the Visual Studio...
MIX11 Interviews: The appendTo Team Had a chance to meetup with Mike Hostetler & MS...

Related posts brought to you by Yet Another Related Posts Plugin.

MIX11 Interviews: The appendTo Team

Rey Bango — Tue, 12 Apr 2011 16:04:07 +0000

Had a chance to meetup with Mike Hostetler & MS MVP Elijah Manor of appendTo at Microsoft MIX 2011 ad we chatted about their new framework, Amplify. Check out the inteview:

#ms_mix11_w

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

My Visual Studio 2010 HTML5 Templates are Updated for jQuery 1.5.1 and Modernizr 1.7

Rey Bango — Tue, 22 Mar 2011 22:53:39 +0000

I wanted to do a refresh of the Visual Studio 2010 HTML5 Templates I created last September. With jQuery now at v1.5.1 and Modernizr at v1.7, it was time for an update.

If you’ve already downloaded my original templates, you can simply overwrite those with the following files. If you’re new to this, then download the files and drop them into the folders I mention immediately below each file:

HTML5 Page Template with jQuery 1.5.1 & Modernizr 1.7

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template with jQuery 1.5.1 & Modernizr 1.7

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

Using the Templates

Once in place, all you have to do is select “File=>New Web Site” to use the new template:

To create a new HTML5 web page template, you’d select “File=>New File” to choose the HTML5 Page Template

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

IE6countdown.com – Pushing for IE6 to Die

Rey Bango — Fri, 04 Mar 2011 21:39:48 +0000

Still not convinced that Microsoft is serious about getting Internet Explorer 6 users to upgrade? I’ve not seen too many companies that actually create a site dedicated to moving users off of their product but that’s what Microsoft is doing with the IE6 Countdown site.

It’s a great initiative that helps people better understand where the highest usage of IE6 is along with information to help users upgrade to a better, more modern version of Internet Explorer. The site also provides a code snippet that you can include in your site that will prompt IE6 users to upgrade.

From the looks of it, China and South Korea have the largest amount of IE6 users worldwide although the U.S. at 2.9% is still pretty high. We need to get this figure down to about 1% at which point the usage will be so small that we can focus on modern browsers.

Also, if you have friends who are corporate users and they feel stuck, be sure to tell them about the resources outlined here.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.

Rey Bango — Tue, 28 Sep 2010 13:58:57 +0000

I’m pretty excited about the new Windows Phone 7. I’ve used it several times and I have to say it is a VERY hot phone and I can’t wait to get mine. I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here’s the deal:

Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit www.msdnevents.com/wp7 for details.

If you’re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great FREE exposure to Microsoft’s newest platform and get your apps loaded up onto the marketplace quickly.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How to Create HTML5 Website and Page Templates for Visual Studio 2010

Rey Bango — Tue, 21 Sep 2010 19:40:31 +0000

Now that I work at Microsoft, I’m using Visual Studio 2010 as my main editor. By default, an empty web page is created with an XHTML 1.0 doctype and it’s pretty barebones. Since I’m focusing on HTML5 & JavaScript development, having to constantly update the page with references to the new HTML5 doctype, jQuery, Modernizr and all of the other tags I use for my pages was becoming a drag.

Today, I noticed a blog post by Zander Martineau in which he added a lot of HTML5 goodness to the Coda IDE in the form of clips, which is the code snippet format supported by Coda. This got me inspired to find out how to do something similar in Visual Studio, so I pinged Damian Edwards of the Visual Studio team for advice. He pointed me to the following article which explained how to create “Item Templates” in Visual Stuido.

The gist of it is that you can take any page that you create and turn it into a re-usable template via the “File->Export Template…” wizard. It walks you through the process of choosing a specific file or entire project/website to use as a template.

Adding a Page Template

So here’s the basic HTML5 template I wanted to include:

After I created and saved this page, I went to “File->Export Template…” and followed these steps:

Now, when I select “File->New File…” to add a new item, my template is available:

Adding a Web Site Template

Creating this page template was a huge help. I can now start with a fresh template that specifically works for my style of development but I didn’t want to stop there. I also wanted to create a skeleton that I could use as the basis for new websites and I wanted it to package all of the important files that I use from the get-go. In this case, I wanted:

My HTML5 basic page template
jQuery
Modernizr
HTML5 Reset CSS file
An empty CSS file called style.css
A consistent folder structure for all of these

The first thing I needed to do was to create a new website in Visual Studio. From there, I needed to create and/or organize all of the files that I wanted as the basis for my skeleton. Using the same Export Template wizard, I followed the following steps to create my project skeleton:

So now when I select “File=>New Web Site” I see my new template:

and when I choose that, here’s what gets loaded for my new site:

Download the Templates

Note: The templates in this article have been updated to support jQuery 1.5.1 & Modernizr 1.7. Check it out here.

This is a huge time-saver for me and I want to share this. I’ve made both templates available for download so you can drop them into Visual Studio yourself. Just grab the specific file and drop the zip into the folder I specified:

HTML5 Page Template

Drop this into “Visual Studio 2010 > Templates > ItemTemplates” folder

HTML5 Web Site Template

Drop this into “Visual Studio 2010 > Templates > ProjectTemplates” folder

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

How to Add Internet Explorer 9 Jump Lists to Your Site

Rey Bango — Thu, 16 Sep 2010 16:26:53 +0000

With Internet Explorer 9 Beta is out, I’m poking around with some of the new features available. One of the new features called website pinning allows you to “pin” a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn’t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called “Jump Lists” and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.

The code to make jump lists available is very straightforward. A new meta tag called “msapplication-task” is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:

and here’s the code I added to my site to make that happen:

The content attribute allows you to specify the name, action and icon that you’d like to use for your jump list nav entry. Here’s a list of the available meta elements that you can use to format your jump lists:

Name	Content
application-name	The name of the shortcut. If missing, the document 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 in the Windows Start menu or desktop.
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. width=N (minimum 800) height=N (minimum 600) 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.

I could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:

What About Other Browsers?

Unfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it’s a slick feature and I honestly don’t know if other browser makers could do something like this. Let’s see if they consider adopting this type of UX.

Screencast

To actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.