Facebook Mobile Website – Transition – Issues

As many of you already knew that facebook has started rolling out a new version of Mobile Site at http://m.facebook.com which initially started to show up on iPhones and iPod Touches. Mostly of the people who didn’t know exactly about it were having an idea that this was the new interface of facebook specifically for iOS devices. But according to facebook it was a new UI framework that was being used behind Mobile Website which was being supposed to be the only single website for smartphones and feature phones and to take care of every thing like “What” to deliver on “Which” device.

UPDATE: 26-05-2011
Nokia N8 and Symbian^3 devices have got facebook’s new Touch UI. But due to the incapability of the native browser to share location feature, You will still not have an option to use facebook places or check-in. For Facebook Places/Check-in, use Opera Mobile 11

New Touch UI seems to be serving on http://touch.facebook.com which is no more redirecting to http://m.facebook.com. Now you can use both interfaces. Depends on your choice.

Read the note on facebook One Mobile Site to Serve Thousands of Phones (March 31, 2011)

New Facebook Touch UI on (http://m.facebook.com)

taken from an iPhone

 

Technically as the Note on Facebook states, the new Mobile Website will deliver its new Touch UI (User Interface) (supposedly as shown above) on WebKit based browsers in smartphones (but not limited to WebKit only). There are a few HTML5 JavasScript APIs which the new Facebook Touch UI has used. They didn’t mention more than that on the note.

For example, on the latest WebKit based devices, like iPhone and Android, we use CSS3 and vendor-specific rules for display and animation as well as some of the new JavaScript APIs included in HTML5 for local caching and history management

This was the March 31, 2011 when it was announced. As said above Initially the new system was relying under http://m.facebook.com only and http://touch.facebook.com was working good as well aside when you pointed your browser to facebook touch website. Later on the http://touch.facebook.com started to redirect iPhone users to the new http://m.facebook.com leaving other devices at http://touch.facebook.com.

Now a few days ago when testing with Nokia N8, I just noticed that the Facebook Touch Website (http://touch.facebook.com) isn’t serving any more and instead redirecting to its Mobile Website (http://m.facebook.com). But unpleasantly it wasn’t that new Touch UI which was on an iPhone.

The post has been updated – see the updates in red above.

(http://m.facebook.com) on Nokia N8 Native Symbian^3 Browser.

It was pretty same on Opera Mobile 11 for Symbian^3 as well.

Opera Mobile Browser (while having enough strength of HTML5 and CSS3 capabilities) was considered out of this loop. It was also redirected to http://m.facebook.com but with same crap Mobile User Interface as in Native Browser. Though the Simple Mobile Interface also have some additions/modifications with extended options and functions.

I also tried to check how does it perform on an Android phone. And it delivered the same Touch UI on an HTC Desire as delivered to an iPhone. See below.

Following screen was taken from an HTC Desire

 

What’s behind the scene?

Facebook has mention in the note that the new website is powered by a UI framework based on XHP, Javelin and WURFL.

Our new site is powered by a UI framework based on XHP, Javelin, and WURFL, a detailed database mapping user agents to device capabilities. This enables us to very precisely target experiences and features to thousands of different devices.

Now what this UI framework actually is?

XHP is an extension of PHP and Javelin is a light weight JavaScript framework of Facebook. Where as the WURFL – A Wireless Universal Resource File is an XML based database of devices containing with their complete capability information.

WURFL is a key in this combination to retrieve the capability information of a device that what a requesting device can deliver with its browser to the user end.

So is it effecting Symbian and/or  Symbian^3?

Well we can understand that currently in the native browsers, in Symbian^3 devices (not including X7, E6), there is no HTML5 support but they are based on the WebKit rendering engine with a bit earlier release. Keep it in mind that new Touch UI of facebook uses caching and history management features of JavaScript APIs in HTML5.

Can this disqualify Nokia N8 and other Symbian^3 smartphones with its stock capabilities?

Why did I say Stock Capabilities? Well I’ll come to this part importantly later.

Limitations of the new Touch UI

Don’t blame me this is what I have in my head after tweaking with new interface of facebook Touch Website.

Following are the user agent information of Apple iPhone (on left), HTC Desire (in center) and Nokia N8 (on right)

 

As stated by facebook and quoted above that for display and animation effects they used CSS3 and vendor-specific rules. They mentioned iPhone and Android specifically as an example.

May be they used vendor-specific rules only for these two devices? I don’t really know but I do know that CSS3 is supported on WebKit/525 at much extant as supported on its later releases. Even most of the CSS3 rules are supported on Opera’s Presto Engine (Opera Mobile 11) with even support of HTML5. But they, at facebook, may have completely ignored any rendering engine which is not a WebKit? Yes! I can say so, because it looks like that. Though I won’t judge what exactly the CSS3 rules they (at facebook) have used for its new Touch UI. But I can say, they have limited the new Touch UI to very few smartphones ignoring many others including the third party browsers like Opera Mobile 11.

There’s however no doubt that WebKit rendering/layout engine does have a lot more capabilities than a Presto Engine does. But the thing is current practice of use of capabilities. I believe the Opera Mobile 11 will work well with new Facebook Touch UI if not restricted with specific clauses and “if” conditions at engine and device’s names. They should have used the browser’s own capability on runtime instead of a preset of database of devices. Why? I have the reasons and a surprise for Symbian users after the break.

With no excuses I personally liked the new Touch UI of facebook wherever did it work. But bad thing for Symbian^3 users is that there is no more separate http://touch.facebook.com to serve you with a touch user interface. There is now only one website which is http://m.facebook.com serving for you.

You may have started thinking that they (at facebook) could have left the old touch website as well for other touch screen device? But No! that would require resources which was the main reason for facebook to move on a single code base to handle for later improvements.

  1. We were limited by the lowest common denominator for each site. We couldn’t use JavaScript and had device specific file size limitations on m.facebook.com. Supporting a wide array of touch phones of varying quality on touch.facebook.com limited our ability to use modern CSS and JavaScript APIs.
  2. Every time we launched a new feature, we had to build it multiple times across different code bases: once for facebook.com, then again for m.facebook.com, touch.facebook.com, and in native applications as well. Honestly, we weren’t very good at doing this, so certain features were missing on different devices

There may be even more reasons due to lack of browser capabilities in Symbian^3 devices. Or may be still facebook’s Mobile Website transition is not complete yet and you might see some better touch interface on Symbian or Symbian^3 devices as well and so on Opera Mobile 11.

But wait!

Here is the surprise I want to show. It doesn’t look like the incapability of Symbian or Symbian^3 in this regard of losing facebook’s new Touch UI. Look at the following screenshots. These were taken from a Nokia N97.

So as you can see the above screenshots showing the exact new Touch UI of facebook as on iOS and Android.

Seeing these above I thought to make it on my Nokia N8 so just did it by hacking the N8 and changed the User Agent(UA) String to make it appear as a Nokia N97. And that worked flawlessly.

See the screenshots below now again taken with a hacked Nokia N8 after changing the user agent string.

Same Device (Nokia N8)

Left (Original before hacking) – Right (After hacking/changed UA)

So who’s responsible of these flaws?

Who is capable of doing the things right? and who’s responsible of ignoring a lot of capable devices with a crap mobile interface.

Is it facebook’s new approach to retrieve browser capabilities?

Well I have my humble opinion for facebook to take care of these flaws and choose a flexible strategy to identify client browser capabilities instead of depending on a single predefined database of capabilities which will go older and of no-use each next day.

The question is how can WURFL handle the new updates on a devices?

It’s pretty believable that new Facebook Touch UI now completely depends on the information delivered by WURFL’s database of device capabilities.

The question which was popped up in my mind that how will WURFL deliver the information about the new browser capabilities in later software updates (which usually happen on the devices) to the developers like at facebook?

Or how often does WURFL renews its capabilities list about the devices?

Well the latest repository in xml format provided by WURF is up to the date as of April 24, 2011. You can visit their website at http://wurfl.sourceforge.net/ and download the repository to review or to use it in your own projects.

Or as Symbian ANNA is yet to come with better and much improved browser, How will WURFL add the new capability information to the database and how will facebook implement those to reflect on the mobile/touch website

I couldn’t test on Symbian ANNA. If anyone of you have Nokia Astound in USA please check if the new Facebook Touch UI appears on your device or it doesn’t.

Do leave your feedback. Thanks.

Still if you want to have same Touch UI in your Symbian^3 devices, you can turn over to Ovi Store and download FB Browser by PixelPipe.

We posted earlier about FB Browser by Pixelpipe. But now the final version has been released with a bit different name as Facebook Browser and is available on Ovi Store. It’s free

http://store.ovi.com/content/111554

Following screenshot was taken on Nokia N8 – Facebook Broser by PixelPipe