One Mobile Site to Serve Thousands of Phones

Visit the post for more.

Lee Byron
4 min readbeginner
--
View Original

Overview

The article discusses the challenges of building mobile websites that cater to a wide array of devices with varying capabilities. It highlights Facebook's upgrade to m.facebook.com, which allows for a unified experience across devices by using a single codebase and a mobile UI framework.

What You'll Learn

1

How to create a mobile site that serves multiple devices effectively

2

Why using a single codebase improves feature deployment across devices

3

How to leverage XHP and Javelin for mobile UI development

Key Questions Answered

What challenges does building for the mobile web present?
Building for the mobile web involves addressing thousands of different devices with varying capabilities, screen sizes, and browser bugs. This complexity necessitates careful planning to ensure a consistent user experience across all devices.
How does the new m.facebook.com improve user experience?
The new m.facebook.com provides a rich, touch-friendly interface for high-end devices while ensuring functionality for feature phones. It eliminates the need for multiple versions of the site, allowing all users to access the same features seamlessly.
What technologies power the new mobile site?
The new mobile site is powered by a UI framework based on XHP, Javelin, and WURFL, which maps user agents to device capabilities. This allows for precise targeting of features and experiences tailored to various devices.
How does the framework handle device-specific issues?
The framework customizes the mobile site to address specific device limitations, such as lack of keyboards or tiny screens. This ensures that all users receive the best possible experience, regardless of their device's capabilities.

Technologies & Tools

Frontend
Xhp
Used for building mobile components in the new mobile site.
Frontend
Javelin
Part of the UI framework that enhances mobile site functionality.
Backend
Wurfl
Database for mapping user agents to device capabilities.

Key Actionable Insights

1
Utilize a single codebase for mobile development to streamline feature deployment.
This approach reduces the complexity of managing multiple versions of a site, ensuring that all users receive the same updates and features simultaneously.
2
Implement a mobile UI framework that abstracts device-specific challenges.
By focusing on a framework like XHP and Javelin, engineers can concentrate on product development rather than device compatibility, enhancing productivity.
3
Leverage WURFL for precise targeting of device capabilities.
Using a detailed database like WURFL allows developers to tailor experiences to a wide range of devices, improving user satisfaction.

Common Pitfalls

1
Relying on multiple codebases for different mobile sites can lead to inconsistencies.
This often results in missing features on certain devices and complicates the deployment process, making it harder to maintain a unified user experience.