Tag Archives: ie9 mobile

Twitter Windows Phone web app finally gets updated.. to the feature phone version

image

imageWe have had our ups and downs with the mobile twitter page on Windows Phone, with the company’s servers recently performing pretty poorly when it came to delivering the page properly to Windows Phone browsers.

It seems Twitter finally managed to fix things, but it seems mainly by serving Windows Phone with the same page it does its feature phones.

This compares to the iPhone web app, which features pull to refresh and other advanced desktop features.

I guess we know what Twitter thinks of Windows Phone…

Picture Credit: Romit

Thanks Fahd for the tip.

Twitter fix Mobile Twitter CSS bug for Windows Phone

image

After about 3 months of looking at a WAP-like mobile twitter web page, if seems our article from 2 days ago, provoked by Joshua Topolsky’s uninformed rant about the quality of IE9 Mobile, did generate some results.

A few hours ago we were contacted by Michael Ducker, Product Manager for Mobile Web at Twitter, asking about the issue.  We explained what we knew of the CSS files having the incorrect MIME type, contrary to HTML standards, and it seems not long after all the problems have been fixed, as the page it now rendering properly not only on IE9 desktop but also in the mobile browser.

In the last article on the issue many readers seemed to be under the impression that problems with web sites was due to the browser rendering engine.  The simple fact is that many websites have not been tested on Windows Phone, which may in fact reveal errors in their coding.  Before blaming rendering issues on the browser, it may be useful for web developers to look at their own implementations first.

Of course we wish to extend our thanks to Mr Ducker for fixing this issue, and we hope he makes at least cursory testing on Windows Phone part of his routine in the future.

Twitter’s mobile web page broken for WP7 and IE9 is being blamed

image image

What its meant to look like

What it really looks like

IE9 Mobile on Windows Phone 7.5 has been called a sub-par browser by Joshua Topolsky on the Verge most recent podcast, and it was mainly because Twitter’s mobile website looks like a WAP page at the moment.

Of course it did not always look that way. The rendering problems seems to have started about a month ago, and likely the style sheet is not being loaded properly.

While the uninformed and biased would blame it on IE9 Mobile being a bad browser (here’s looking at you Topolsky) the truth is that when Twitter made changes on their website they simply did not check if it broke Windows Phone rendering. No amazing new functionality has been added which the Windows Phone browser can not handle.

Of course the reason the Windows Phone browser suffered this issue in the first place is its small market share, but it takes some-one pretty stupid to blame it on the actual quality of the rendering engine.

Microsoft may want to get on the phone to Twitter to get this fixed, before this impression spreads.

Update:  Testing the mobile page in IE9, which is similarly affected, throws up error “SEC7113: CSS was ignored due to mime type mismatch “, an error which older versions of IE and other browsers are more forgiving about, but which IE9 is pretty strict about, which of course still makes it twitter’s fault for serving the wrong file type and also for not testing the mobile page on Windows Phone.

Neat hack to restore Forward and Find in Page to IE9 Mobile

Bookmarklets are very useful on the desktop, and it turns out they work equally well in IE9 Mobile.

Gooddaytodie on XDA-Dev has crafted these JavaScript bookmarklets to restore Forward and Find in Page functions removed with the upgrade to Mango.

To add the Forward function:

Forward

  1. Go to Internet Explorer 9 Mobile, tap the “…” to bring up the menu, and tap “add to favorites” (it doesn’t matter which website you do it on)
  2. Change the “Name” field to “Forward” (or to make it stay at the top of the list, use “! Forward”)
  3. Change the “Web address” field to the following code:
    javascript:history.forward()

The code for adding find in Page is a bit more complicated, but the procedure is the same.

Find On Page

  1. Go to Internet Explorer 9 Mobile, tap the “…” to bring up the menu, and tap “add to favorites” (it doesn’t matter which website you do it on)
  2. Change the “Name” field to “Find on page” (or to make it stay at the top of the list, use “! Find on page”)
  3. Change the “Web address” field to the following code (use Copy and Paste on your phone!):
    javascript:(function(){function G(){var pf=doc.getElementById('pf');var qt=doc.getElementById('qt');if(null==pf){pf=doc.createElement('div');pf.id='pf';var s=pf.style;s.position='absolute';s.zIndex='99';s.top=(scT||scBT)+'px';s.left=(scL||scBL)+'px';s.width='100%';s.backgroundColor='#FFFF00';pf.appendChild(doc.createTextNode('Search: '));qt=doc.createElement('input');qt.id='qt';qt.type='text';pf.appendChild(qt);var sb=doc.createElement('input');sb.type='button';sb.value='Find';sb.onclick=function(){P(qt.value)};pf.appendChild(sb);doc.body.appendChild(pf);}else{pf.style.display='inline';count=0;}}function P(s){document.getElementById('pf').style.display='none';if(s==='')return;var n=srchNode(document.body,s.toUpperCase(),s.length);alert("Found "+count+" occurrence"+(count==1?"":"s")+" of '"+s+"'.");pf.parentNode.removeChild(pf);return n;}function srchNode(node,te,len){var pos,skip,spannode,middlebit,endbit,middleclone;skip=0;if(node.nodeType==3){pos=node.data.toUpperCase().indexOf(te);if(pos>=0){spannode=document.createElement("SPAN");spannode.style.backgroundColor="red";middlebit=node.splitText(pos);endbit=middlebit.splitText(len);middleclone=middlebit.cloneNode(true);spannode.appendChild(middleclone);middlebit.parentNode.replaceChild(spannode,middlebit);++count;skip=1;}}else{if(node.nodeType==1&&node.childNodes&&node.tagName.toUpperCase()!="SCRIPT"&&node.tagName.toUpperCase!="STYLE"){for(var child=0;child<node.childNodes.length;++child){child=child+srchNode(node.childNodes[child],te,len);}}}return skip;}var count=0,scL=0,scT=0,scBL=0,scBT=0;var w=window,doc=document;if(typeof doc.body!='undefined'&&typeof doc.body.scrollLeft!='undefined'){scBL=doc.body.scrollLeft;scBT=doc.body.scrollTop;}if(typeof doc.documentElement!='undefined'&&typeof doc.documentElement.scrollLeft!='undefined'){scL=doc.documentElement.scrollLeft;scT=doc.documentElement.scrollTop;}G();})()

Thanks to LiveSide.net for creating the simple to use instructions.  Video demo by 1800pocketpc.com

IE9 Mobile includes Compatibility View List

image

It turns out IE9 Mobile is a pretty dynamic browser, with the ability for site rendering to improve even after the Mango update.

The browser includes a Compatibility List View which is updated every 2 weeks and which can fix a number of site rendering issues, including sites designed for IE7, sites where the layout is adversely affected by Microsoft’s IE9 mobile optimizations and sites which are just improperly optimised in the first place.

Read more about the feature the Windows Team Blog here.

Meebo Mobile web app now works with IE9 Mobile for Mango

imageMeebo is a web-based chat client for a huge number of protocols, including Yahoo! Messenger, Windows Live Messenger, AIM, ICQ, MySpaceIM, Facebook Chat, Google Talk, CafeMom and others; and claims 190 million users.

Unfortunately they have never released a client or provided support for Windows phone 7, but with the upgrade to IE9 in Windows Phone 7 Mango this is no longer a problem, as the service appears to be working perfectly.

While the solution is not ideal, as it obviously lacks features from a dedicated client such as off-line notifications, it does cache messages missed when not in the chat window and replays them when you return, and  if you just have to chat with your friend who stubbornly clings to Google Talk it does provide a work-around.

To give it a try visit Meebo at meebo.com/mobile  here.

Thanks Simbadogg for the tip.

Microsoft explains why they moved the tabs button in IE9 Mobile–no-one was using it

image

In a blog post Amin Lakhani, Program Manager, Windows Phone explained some of the UI changes in IE9 Mobile, including the controversial movement of the tabs button the menu section.

First, he explained that the address bar was moved from the top to the bottom of the page to expose more content on the screen and create a “faster, more minimal browser that stripped away needless visual distractions.”

image

More controversially, he explained the move move of the tabs button to the menu area. 

…we looked at the anonymous usage data that some Windows Phone owners voluntarily submit to us.

Not surprisingly, we found that people spend most of their time simply viewing and interacting with the websites they visit (reaffirming our belief that putting sites in the spotlight was the right design goal). The address bar—which doubles as a search box—was the most frequently used browser feature.

One big surprise was that that the favorites and tabs buttons were used much less frequently, even though they were front and center on the screen.

After establishing a goal, analyzing data from real users, and observing people holding their phones, we were at a crossroads. Design always involves tradeoffs. Since our primary goal in Mango was to put the focus on websites, we decided to move the address bar down into the app bar, and turn the favorites and tabs buttons into menu options.

That wasn’t all. We also heard from Windows Phone 7 owners that the refresh/stop button was difficult to tap, so we enlarged it and moved it out of the address bar. We also chose to hide the phone status info—time, signal strength, battery life indicator—to make the browser feel less "boxed in" and provide even more room for web content.

Personally I am not a fan of any of the changes they made, including hiding the tabs button one click further, hiding the phone status info or even moving the address bar to the bottom.  In my opinion Microsoft could have achieved all of their UI goals simply by auto-hiding the “chrome” of the web browser like most other browsers do, until the user touches the screen.

Testing is a Microsoft religion, and can lead their teams astray. A simple example is the lack of screen shot capability which will be used by 0.01% of their users, but hampers the ability for the media to tell hundreds of millions of people of their product.

If you are a fan of the changes, or maybe want to register your protest (IE9 Mobile is independently updatable after all) Amin is inviting your feedback at the Windows Team Blog here.

IE9 Mobile now scores 100/100 in Acid3 test

image

IE9 Mobile used in Windows Phone 7.5 Mango used to score 95/100 in the Acid 3 web technology compliance test, but overnight the score has increased to a full 100/100.

The reason is not due to a stealth upgrade, but due to the authors of the test modifying it to remove outdated elements of the test that have been deprecated.

Writing on Google Plus Ian Hickson  said:

As the Web matures, we have made a concerted effort to improve the precision of Web technology specifications. It started with CSS 2.1, and then we really ramped things up with the new HTML spec, and now we have broadened the effort to include core DOM features, including DOM Events, DOM Range, and related APIs.

As part of this, we’re trying to simplify parts of the platform that
still haven’t received broad use; for example: changing how exceptions in the aforementioned DOM Range specification work, by merging them into the regular DOMException mechanism; making Attr objects not be Node objects; possibly dropping or simplifying SVG Fonts and SVG SMIL animation; dropping XLink; making DocType nodes work more like other nodes rather than being special.

This impacts the Acid3 test, which tested a lot of these APIs in an effort to improve the quality of their implementations so that authors can actually use them. So today, +HÃ¥kon Wium Lie and I are announcing that we have updated the Acid3 test by commenting out the parts of the test that might get changed in the specs, including everything I listed above. We hope this will allow the specs to change in whatever way is best for the Web, rather than constraining the changes to only be things that happened to fit what Acid3 tested!

Note that since some browsers have so far avoided implementing some of these areas (because they are likely to change, and browser vendors don’t want to implement them only to change them again), especially the SVG parts, commenting out some of these tests does result in some browsers’ results improving, in some cases all the way to a full pass.

While the Acid3 test is now pretty old, the change is very relevant when it comes to HTML5, where the IE9 browser performs well, but does not score as high as other browsers.  Microsoft has always maintained the standard is still in flux, and that it was pointless to support features which are in fact not even standardized yet, just to get a few brownie points on an arbitrary test.  In the end it is about being able to render a site well, not just about a number.

Via Vladimir Yuneva Blog on  MSDN.

‘Find in page’ coming back to IE9 Mobile ‘in the future’

 

image

Sometimes it is the missing little features which rile people up, especially when they used to be there before.

The removal of “find in page” in the updated IE9 browser in Windows Phone 7.5 Mango has upset quite a few, so it should be reassuring that Microsoft plans to address this issue.

In a comment by Charles Morris, a Program Manager Lead for Windows Phone,  on the Windows Team Blog, Charles has said the feature is planned to come back in a future update.

Are there any small missing features our readers would restored? Let us know below (or the Microsoft comments may be a good place too ;) )

Thanks Brianna for the tip.

Amazon Cloud Player also works with Windows Phone 7 Mango Beta 2

So we can stream music from SkyDrive, but the UI is far from ideal. It turns out IE9 is just as good at playing music from Amazon’s Cloud Player also.  The UI is of course designed for the large screen, but is still miles better than choosing one song at a time from SkyDrive.

Who needs flash again?

Video by Van Mardigan

Handy IE tab switching tip in Mango

Mango takes a step back in usability when it comes to switching tabs in Internet Explorer by moving the tab switching button from the menu bar to the menu below.

 Mobiletechworld uploaded this video showing that using the multi-tasking back button this does not necessarily have to be the case, with fast and smooth tab switching still possible.

Of course in reality there is still some extra swiping involved, not saving that much time really, and it will only work if the tab is currently loaded in memory.

Since Mango is still in beta I would like to plead with Microsoft to restore the tab switching button back to the menu bar, a solution which worked pretty well up till NoDo.

Anyone else with me? Let us know below.

Another brief look at IE9 on Windows Phone 7

WPCentral managed to catch some more video of IE9 on Windows Phone 7 on the conference floor, and surfaced some new info, such as there not being any current solid time frame for Silverlight or Flash on IE9 Mobile, something that’s increasingly forgivable with the large HTML5 push, and also that Microsoft has changed how the browser draws its controls to give it that “digitally authentic” Metro look.

Read more at WPCentral here.