19 Nov 2010 mbrubeck   » (Journeyer)

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:

  1. Speed
  2. Fitting text to the screen when zoomed in
  3. 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 and rv:, and you can detect mobile Firefox by looking for Fennec/.

  • 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.

Syndicated 2010-11-19 15:15:00 from Matt Brubeck

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!