Mobile web developers: Your users hate it when you do this
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:
- Speed
- Fitting text to the screen when zoomed in
- Mobile vs. desktop versions of web sites
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…
Browser detection pitfalls
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.
Solutions
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.)
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.
Best practices for web developers
Here are some first steps typical mobile web sites can take to make their readers happier:
When possible, 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
andrv:
, and you can detect mobile Firefox by looking forFennec/
.If a “mobile” user requests a page that isn’t available on your mobile site, serve the full version to them anyway, rather than redirecting them to an unrelated mobile landing page.
Let users switch from your mobile site to your full site and back. You may remember users' previous choices for convenience, but let them change their minds again.
Further reading
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.
Coming from a different perspective, Andrea Trasatti (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.