Windows Phone 7.5 is coming very soon and with it we will enjoy a fast and more beautiful mobile web experience powered by IE9! This is very exciting for us since it represents a huge leap forward not only in new features but also in support for web standards that make for a more compatible and interoperable web. As a side effect of these changes we know some sites designed specifically for IE8 and earlier may not work correctly which could end up affecting the browsing experience for visitors to your site.
To help minimize this problem, we added support for the Compatibility View List to Windows Phone! This feature will allow us to address compatibility issues rapidly and give developers enough time to update their sites on their own schedule. There is a lot of great information on the IE team blog about this feature but in a nutshell, the CV List is a collection of domains and their corresponding browser settings that gets updated every two weeks ensuring that IE9 works with the maximum number of sites possible.
By default IE9 will try to load any site using the most standards compliant mode, this is great because it allows us to interoperate well with other browsers but it could cause compatibility problems on sites written specifically for IE7 Mobile. By using the CV List we can address most of the issues by forcing IE to use the IE7 compatible mode on the sites that need it to keep them working and looking great!
As an example we can use the Sounders FC Soccer team’s portal for Windows Phone, on the left is the site loaded on IE9 using standards mode where the score is not on the location it should be, and to the right is the same site loaded using the IE7 compatibility mode which addresses the layout issues.
IE 7 Compatible mode
Alternatively developers can also proactively instruct IE which mode to use when loading any site by using the X-UA-COMPATIBLE meta header as described here.
Providing a full desktop browsing experience on a mobile device does not only require having a modern and compatible browser engine, it also requires special optimizations to the original layout to ensure the site is ready for consumption on smaller screens. Our ultimate goal is to do it without negatively affecting the site’s original style or flow!
We accomplish this by changing the site’s layout in subtle but effective ways, the areas more likely to be affected are text blocks but we do some other small things here and there. We built the rules used to make those changes based on data gathered from the most popular web portals from all over and I’m happy to say that for the most part our changes work great, but for a small number of sites, the changes can end up negatively affecting the layout and degrading the experience making the end result far from what the designer originally intended. The good news is that on IE9 mobile we can change the optimization parameters to fix those issues by using the CV List.
One great example you can try is http://reddit.com where on NoDo you will quickly notice that the headlines don’t look quite right and while the site is completely functional the experience is somewhat affected by this. On IE9 mobile on the other hand the page looks much better as it renders closer to how it is it looks when you access it using a desktop browser.
Windows Phone 7
Windows Phone 7.5
Another compatibility problem that the CV List allows us to address which is also one of the most common is the incorrect use of the mobile optimization settings. This generally has a direct impact to the end user experience as it prevents desktop sites from being rendered correctly or makes mobile sites too small to be used without zooming in.
The most common case of this problem is having an incorrect width on the viewport META tag, sometimes the value is 100px, others is 800px or even device-width which SHOULD be fine except when used on a desktop site. By using the CV List we can override the viewport settings making the site functional once more but once we do this the new values CAN’T be overridden by the developer!
One quick example of this can be found on http://mobile.airfrance.com where the site’s missing viewport settings causes the site to load all the way zoomed out.
Fixed by the CV List
Always set the correct viewport values by detecting which device is being used.
Jorge Peraza Windows Phone Browser
@HectorMeneses - Thanks for the feedback, I agree the scenario you described is both valid and desirable unfortunately on IE9 there is no programmatic way to control the double-tap behavior from jscript. If you are writing an app however this scenario should be possible by using a transparent layer on top of the browser control and process the gestures there before they have a chance to make it to the browser. Note that I have not tried this so no promises :)
@Jorge - You're from the Windows Phone Browser team? Then I guess you're the right person to target my question to. Namely
Why was the PERFECTLY WORKING support for INPUT TYPE=FILE elements removed in IE9 on Windows Phone 7.5? Why was the ONLY ADVANTAGE WP7 IE had over iOS Safari removed? Why is Android now the ONLY phone with a default web browser that can upload files?
Where can I get information on how to control the double click to zoom functionality in the browser?
Basically, the browser mostly do a good job zooming in to given elements for instance an image. If I double click in an image, the browser zooms in in such a way that the width of the image takes the whole width of the device. I love that.
However, some times the browser doesn't know how to zoom when clicking in a table or some times it zooms way too much like when double clicking in text with many text boxes.
I would like to be able to catch the double click event and specify what element to use for zooming.
For instance, in a div with a bunch of text and textboxes I would like to use the div as the element that the browser uses to zoom in. If a user double clicks inside of the div box (probably hitting one of the text boxes) I would like to override the automatic zoom to display the textbox nicely, in favor of zooming in to the width of the div box.
If this is possible, then the user interface would behave in a predictable optimized way.
Thanks everyone for you comments!
@ivatanako - We are working with facebook to get their mobile site looking great on IE9 mobile.
@kderh - Do you have examples of sites that don't work properly? We are always looking for more samples to ensure our optimizations work correctly. About making it optional I believe the experience without them is just too poor but I'll pass your comments to our user experience team.
@lawender - IE9 mobile does not officially support Thai or any RTL languages so the issues on the site you mention are not related to our text optimizations. I can't really comment on future plans but when we do add official support for more languages we will make sure sites using them work great.
GOOD steps!!!! I finally can view the Google Reader page which is fully supported now!!!!! Go ahead and make the IE support languages as Arabic..
it is very painful for the website of complex script language such as Thai.
I am WP7 from Thailand and your IE9 Mobile rendering process is display the awful result for Thai website. Example: you can view the website www.blognone.com (the nuber one IT news website in Thailand). When open it with IE9 mobile, it will remove most of content from the website.
Your IE9 text optimization has the huge problem in algorithm. And I think the CV list is not the way out.
These "text optimizations" are getting on my nerves. On many sites the fonts render just too big and destroy the layout. Especially when some links that should be very small become larger than normal text or headings becoming huge compared to normal text when they shouldn't.
Please make an option to deactivate this and force true desktop browsing, when I'm selecting Desktop Mode I want the pure desktop experience and not be annoyed by broken layouts.
Will this help improved better IE9 rendering for facebook mobile?
@McHale - Thanks for pointing that out!
I *THINK* you meant, "As an example we can use the Sounders FC Soccer team’s portal for Windows Phone, on the left is the site loaded on IE9 using standards mode where the score is not on the location it should be, and to the RIGHT is the same site loaded using the IE7 compatibility mode which addresses the layout issues."