Programmers' / Webmasters' Corner: Real-life problems of the Windows Phone 7 browser and fixing them

Topics:
OK, so, you want your pages to be rendered on the current pre-Mango (pre-7.5) Windows Phone 7 correctly? Don't be mislead that all(!) the other mobile platforms render them OK. Some of these platforms:

- Bada using even last year's version 1.x+; see THIS
- iOS
- and even the, otherwise, scripting-wise (see e.g. THIS) hugely restricted Opera Mini
- etc. (I haven't tested all mobile platforms in this respect; I'm pretty confident you won't have problems under Android, though.)

Unfortunately, the currently (only) available pre-Mango (pre-7.5) Windows Phone 7 version only has an IE7-compliant Internet Explorer built in. Its hugely lacking standards compliance renders not only ordinary Java scriptlets useless (which is a main problem with tons of Web pages with small characters like those of the Finnish Iltalehti forums HERE), but also widely used niceties like Facebook comments.

In this article, I take a closer look at the latter, as it REALLY renders the Facebook comment section on tons of Web pages unreadable. I also present you a working solution if you do detect a WP7 client. (The latter is very easy; just check for “IEMobile” in User-Agent. Also see THIS)

As has been explained in my previous article, if you opt for the asynchronous loading of Facebook's main comment helper Javascript file, http://connect.facebook.net/en_US/all.js, it won't work on WP7. And you, in most cases, will want to load it asynchronously as

1. other, more advanced browsers do support asynchronous loading
2. the JS file, as of now, is some 136 kbytes long. Loading it synchronously can incur a lot of additional waiting – after all, comment sections are generally at the end of Web pages while the initiation of the JS download is typically right after <body> to make sure the file is downloaded while other parts of the HTML page are downloaded / fetched / traversed / rendered.

As has also been explained in my article, the source example page HERE simply doesn't work under WP7, while it does on all other (asynchronous loading-capable) browsers. Under WP7, only the simpler synchronous version is supported.

Some of the non-working sites

Currently, as of 23/08/2011, none(!) of the TechCrunch comments is shown under WP7 – and the list goes on. Some other sites (e.g., Examiner) are less affected: there, at least “Recent activity” boxes work and the first comments (if they exist) are always shown – but no more. Take a look at for example THIS article under both the WP7 IE and a more standards-compliant browser (even the otherwise bad Opera Mini!): IE only shows the first post and nothing else.

What should you do as a Web programmer / webadmin?

As has been mentioned, check for User-Agent and change the way http://connect.facebook.net/en_US/all.js is loaded accordingly (for WP7, use the synchronous loader; for everything else, the asynchronous loader will be a much better choice).

Alternatively, provide a way of switching between Facebook and, preferably, the hugely popular Disqus for users. Disqus has a lot of supporters (see e.g. the user comments HERE), is generally considered very good and used on tons of sites like http://toucharcade.com/, http://allaboutsymbian.com/ etc. Unfortunately, it doesn't allow the users to post messages under WP7, “only” read them (and change their ordering), but it's still than not showing anything at all (as is the case with Facebook comments with asynchronous JS loading).

What about the future?

The forthcoming IE9 in WP7.5 (Mango) should not have problems like these. In addition, it'll be vastly superior to the current IE7 in WP7 – see for example THIS. As all current WP7 models should receive (at least) Mango and the update process is far easier as was under Windows Mobile, in a few months' time this problem may completely cease to be actual any more. However, in the meantime (it's not even know whether Microsoft indeed starts updating existing handsets in September, as rumored), you may still want to deliver IE7 Mobile-friendly Facebook comments.

A Side Remark: Directly Searching for HTML Markup on the Web

Upon preparing this article, I wanted to come up with as many sites using async Facebook comment loading as possible, in addition to TechCrunch and Examiner. Unfortunately, it's not possible – see for example THIS.

Recommended articles

Facebook Javascript SDK Best Practices: great stuff, the first you should read

FB.init – FB's own page: Facebook's own page

My old (2008) W3C speech on mobile Web browsers, their compliance issues etc., with links to tons of similar explanations, bugfixes of mine.
Syndicate content