19 Nov 2010
Mobile Firefox beta releases include a “Feedback” add-on (like the one in Firefox 4 beta for desktop), which lets users tell us what they think about the new browser. Based on a sample of feedback from mobile beta testers, the most common complaints are about:
The first two are straightforward, though not necessarily easy. We’re always working on performance, and we have experimental text reflow code (currently available in the Easy Reading add-on). But the last item is more complicated…
Web sites can read the User-Agent header sent by your browser to see what browser and OS you are using. Some sites use that information to decide whether to send a “full” version of a web page, or a version formatted for mobile devices.
This can go wrong in several ways. If your browser or device is new, or wasn’t tested when a site was developed, that site has no way of knowing whether it is “mobile.” Users may also change their User-Agent to work around content restrictions or access different media formats. And some sites make incorrect assumptions, like that all browsers with “Android” in their User-Agent string are based on WebKit.
Even when the browser is known, readers and publishers might not agree about whether the mobile or desktop version is better. Based on our feedback, some users want to switch from full sites to mobile sites while others want just the opposite. And some devices, like large touch-screen tablets, combine aspects of handheld and desktop computers.
Looking through these complaints, many people are under the mistaken impression that the browser, rather than the web site, decides whether to display mobile-formatted pages. Even the New York Times’ David Pogue gets this wrong in his Galaxy Tab review:
When you visit sites like nytimes.com, CNBC.com and Amazon.com, the Galaxy’s browser shows the stripped-down, mobile versions of those sites. According to Samsung, there’s no way to turn that feature off and no way to visit the full-size sites. You can delete the little “m.” in the Web address until you’re blue in the browser, but the Galaxy always puts it right back.
Web developers: your readers are begging us to display your content in their preferred format. We want to help them, but we can’t do it alone.
(I wrote an add-on called Phony that lets mobile Firefox impersonate the User-Agent strings of other browsers. While this improves the experience on some sites, it breaks it on others. Masquerading as another browser can lead sites to serve non-standard markup that do not work in Firefox. Trying to solve this in the browser creates as many problems as it solves.)
Because browser detection is never perfect, web sites should let readers choose between mobile and full content. They can try to guess the right version by default, but please let users opt in or out.
Here are some first steps typical mobile web sites can take to make their readers happier:
When appropriate, serve the same content to all browsers. You can use stylesheets and scripts to customize your layout for different display sizes, as in this beautiful site by Jon Hicks.
There are valid reasons to use User-Agent sniffing. But if you must use
it, test in as many browsers and devices as possible and learn the correct
way to detect various browsers. For example, you can detect Gecko-based
browsers by looking for Gecko and rv:, and you can detect mobile
Firefox by looking for Mobile. [An earlier version of this post
recommended looking for Fennec/ but this is no longer correct.]
If a “mobile” user requests a page that isn’t available on your mobile site, don’t just redirect them to an unrelated mobile landing page.
Let users switch from your mobile site to your full site and vice-versa. You can remember users’ previous choices for convenience, but let them change their minds.
For much more comprehensive development advice, see Yiibu’s thoughtful and practical approach to building sites that work across many different browsers and mobile devices.
One concern with the “same markup” approach is that it leads to heavyweight pages. Peter-Paul Koch explains how you can avoid sending unused images or markup to mobile devices by combinining CSS media queries and JavaScript to implement progressive enhancement.
Coming from a different perspective, Andrea Trasatti (former developer of the device-detection library WURFL) talks about problems in mobile User-Agent strings and how they could be more useful for device detection.