Rey Bango

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.

Being in a Coffin..Sorta.

Rey Bango — Tue, 23 Aug 2011 14:40:08 +0000

Since having my gall bladder removed last year, I’ve had this nagging pain in my right side rib cage area. It’s a consistent dull pain which I was told should go away a couple of months after my surgery. Well it hasn’t and after an ultrasound and an endoscopy (tube down the throat), it was time to pull out the big gun. Today I had an MRI and it was not fun.

The Machine

MRI stands for magnetic resonance imaging and to be honest, I don’t know how it works. I just know that it’s one of the best ways to look inside the human body without having surgery. If you’ve never had an MRI, it can be a bit of an experience. The machine is rather large and circular in shape. If you look at the picture I included, you can see what it looks like. Now you see that tiny little donut hole in the center? That’s where you go in! Yep, they stick you in that hole to be able to scan the body parts they need. At 6’4″ and 235lbs, I’m a pretty big guy so being squeezed into that little orifice was, how should I say, THE SUCK!

As they slide you into this tube feet first, you have two choices. You can either put your hands behind you (like you’re raising both hands) or you can put them at your side. I chose the latter because it was just more comfortable, especially because I had an IV in my arm. The dude then covered my eyes with a small towel and slapped some headphones on my ears so I could listen to music. As I’m being pushed in, I could see slightly from under the towel and that’s when it hit me that I was INSIDE THIS INSANELY TIGHT, SMALL TUBE WITH NO ABILITY TO MOVE!!

A Coffin

Now, I’m by no means claustrophobic but being in there made me feel like I was in a coffin and it was the creepiest feeling ever. For about 30 seconds, I considered asking them to pull me out but I composed myself, closed my eyes and focused on the music. From there things went fairly smoothly until about 10 minutes before the end of the procedure at which point, it started getting incredibly warm. I had an imaging device sitting on top of my chest and every time they used it, I could feel the heat on my chest. Couple that with the blankets they placed on me and I was a little more than toasty.

The Experience

Would I do this again? Hell yes! The alternative to this is to have someone cut me open and poke around. As a general rule, I try to avoid having sharp instruments opening me up so while being confined truly sucked, the alternative is far worse. Hopefully, they’ll be able to figure out what’s causing the pain and I can plan out my next steps.

No related posts.

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

BioShock Infinite is Like “WOAH”! Check Out the Newest Gameplay Trailer.

Rey Bango — Fri, 08 Jul 2011 15:37:25 +0000

I just checked out the gameplay trailer for BioShock Infinite and all I can say is “WOW!”. If you’re a gamer, you’re going to want to check this out, especially if you’re a major fan of BioShock 1 & 2 (like me!).

Tags: GameTrailers.com, GTTV – BioShock Infinite, PC Games, PlayStation 3, Xbox 360

No related posts.

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

Which Online Backup Service Should I Use?

Rey Bango — Wed, 27 Apr 2011 19:18:37 +0000

I already do backups locally but I really would like to consider a cloud-based backup service. So I wanted to reach out to the community to see who is using what and what’s been really good to work with. Normally I’d put this on Twitter but organizing all of the feedback, along with regular tweets, becomes a bit crazy and the comments are better for future reference.

So which online backup services should I consider?

No related posts.

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

MIX11 Interviews: Mike Taylor, Robert Nyman, Andrew Duthie, and John Bristowe

Rey Bango — Thu, 14 Apr 2011 22:30:38 +0000

#ms_mix11_w Related posts: MIX11 Interviews: The appendTo Team Had a chance to meetup with Mike Hostetler & MS... MIX11: So long MIX, Can’t Wait to See You Next Year Today’s the last day of MIX11 and it was clearly... MIX11 Day 1 Recap: IE10 & HTML5 Day 1 at MIX11 was awesome. The vibe was [...] Related posts:

MIX11 Interviews: The appendTo Team Had a chance to meetup with Mike Hostetler & MS...
MIX11: So long MIX, Can’t Wait to See You Next Year Today’s the last day of MIX11 and it was clearly...
MIX11 Day 1 Recap: IE10 & HTML5 Day 1 at MIX11 was awesome. The vibe was excitely...

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

MIX11: So long MIX, Can’t Wait to See You Next Year

Rey Bango — Thu, 14 Apr 2011 21:03:05 +0000

Today’s the last day of MIX11 and it was clearly evident. The rooms weren’t nearly as full as the first two days but there were still plenty of folks and great sessions going on. I gave my session on HTML5 polyfills and shims. Feedback seemed really good so I’m happy to have had the opportunity to present and want to thank Giorgo Sardo for entrusting me with such an important topic. Some of the feedback:

Attending a cool session by @ReyBango on HTML5 Polyfills and Shims #MIX11 by @anotherlab

@reybango Really enjoyed your talk. Cleared up some questions I had. Great job. by @FwdAnimation

Thanks to @reybango for a good session on #HTML5 polyfills! #MIX11 by @jimfields3

It’s always great to get good feedback and I’m grateful to those that attended and came away with something great from my talk. I was especially impressed by the number of developers who said they were actively using HTML5 and CSS3. It reinforces the need for this type of presentation so that developer can continue to push forward while not leaving their customers, who may not be able to use the latest greatest browser, twiddling their thumbs.

From here I fly off to San Francisco for the jQuery Conference where I’ll give my talk again before heading home. Good times!

#ms_mix11_w

MIX11 Day 1 Recap: IE10 & HTML5 Day 1 at MIX11 was awesome. The vibe was excitely...
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 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.