Facebook rolled out a major upgrade to Facebook Mobile page m.facebook.com that delivers the best possible mobile Web experience no matter what device you’re using. With the new m.facebook.com, users with high-end touch devices will see a rich touch-friendly interface; for users with feature phones, the site will look and work great.
Previously, Facebook had multiple mobile website versions: m.facebook.com for less feature-rich mobile devices and touch.facebook.com for touch devices and 0.facebook.com for text-only mobile handsets. Every time Facebook launched a new feature, they had to build it multiple times across different code bases: once for facebook.com, then again for 0.facebook.com,m.facebook.com,touch.facebook.com, and in native applications as well.
[advt]Every device uses the same framework. This way facebook team can move even faster and build new features just once for every mobile device. It also means that everyone can access the same features, whether writing messages or checking into Places. There will no longer be a difference between m.facebook.com and touch.facebook.com, facebook will automatically serve you the best version of the site for your device.
New Facebook is powered by a UI framework based on XHP, Javelin, and WURFL, a detailed database mapping user agents to device capabilities. This enables facebook team to very precisely target experiences and features to thousands of different devices.
Some devices don’t have keyboards, or have limited means of navigating a page, tiny screens, or crippling browser bugs. Facebook can customize its site in each case to deal with these issues and provide the best possible experience to everyone.
This mobile UI framework allows engineers to focus on building their product and not on supporting device edge cases. Rather than directly writing HTML, CSS, and JavaScript, facebook product engineers write XHP and use these mobile components to build new features.
Take for example a button component, rendered on a device that lacks CSS support, a device with very basic CSS support, and on a high resolution touch device:
To render this button, all an engineer needs to write is <m:button label=”Share” /> and XHP takes care of the rest, rendering it correctly based on the device.
Be the first to comment