Browser Sniffing on the Mobile Web

Browser sniffing holds a level of stigma in the web development/design world, as we have been spending years and years creating cross-platform, cross-browser sites that use more robust techniques of singling out browsers, rendering engines, or platforms as a last resort through our knowledge of what's supported - CSS conditional comments, JS object detection, and various tricks and (if needed) hacks both client and server side. It has long been our practice to create a solid separation of presentation, content, and functionality in a way that degraded gracefully (or more recently, progressively enhanced).

This has worked well on the desktop platform, from desktop workstations to notebooks to tablets.

The Age of Rich Mobile Computing

So the question becomes, what to do with the mobile platform. For years, there have been very basic mobile-specific pages for basic phones with tiny viewports and browsers that couldn't handle much more beyond HTML, with notable omissions of support in areas like CSS and Javascript.

But ever since the iPhone brought fully-featured mobile browsers to the mainstream, there has been this huge trend of companies creating iPhone-tailored sites designed for the width of their viewports, and guaranteed to work on W3C standards-compliant browsers, including Webkit-based ones like MobileSafari, and soon after the ones on the Android and webOS platforms, which currently also have devices with similar viewports. Consequently, these iPhone-tailored sites generally automatically work well with most modern smartphones with full browsers, effectively creating a second tier of mobile sites for smartphones.

For the iPhone initially, it seemed both sensible and insensible simultaneously that people were creating sites that fixed themselves to a specific viewport width. One of the great abilities of MobileSafari on the iPhone was that zooming on small screens was finally easy with the pinch gestures, so coupled with the full HTML/CSS/JS browser, there would be little reason not to experience the same full website used on the desktop platform. Even considering this, however, people still designed sites that negated the pinch zooming.

Still, with a smartphone version of the site, you would ideally be served the same information you need in a way that didn't require any zooming at all, because the user is still otherwise pinching his way into a zoomed out preview of the page that he can't initially read. But sometimes smartphone sites aren't thought out as well, and information or features end up missing.

In some cases though, desktop versions of sites are so mobile-unfriendly (Facebook desktop site) that we pretty much have to rely on mobile sites or native applications to access them on mobile devices.

But there's a lingering question that we may all face in the coming years - at what point is a device considered a "mobile" device and not a desktop computing device?

Drawing the Line at "Mobile"

In late 2008, I had this discussion in an iPhone development forum where I wanted to know how to allow a user to use a link to exit a mobile page back to the full desktop site, without cookies and without having the desktop site's mobile browser detection causing an infinite cycle between the desktop and mobile sites. In other words, just as many sites were doing, I was automatically directing all appropriate mobile devices to the mobile site, but wanted to offer an option to return and remain at the original version.

We came up with a solution, but not before having a heated discussion over whether browser sniffing on the mobile platform was a forgivable exception. My point was that most phones beyond the iPhone did not possess easy pinch zooming, and magnifying with a trackball one square block at a time was not a pleasant experience. Beyond that, there were functions most mobile devices could not yet handle so smoothly, such as click and drag, and general mobile-specific features like data detection (phone numbers, addresses for maps, etc).

But the best counter argument I heard that makes me reconsider is that the line between desktop and mobile computing is not as clearly defined as we think, especially if you think about the smaller 7" netbooks in the middle of the spectrum with screen resolutions in the 800x480 pixels.

It's possible this gap could shorten and fill over time with in-the-middle devices like these and other devices with smaller resolutions. For comparison, the iPhone family of devices sports a 3.5" 480x320 pixels screen.

It's also possible this gap might remain as sparse as it is today, if we assume that the 7" netbooks are roughly the smallest non-niche form factor the mainstream is willing to bear on a desktop platform with a two-handed QWERTY keyboard, and that today's smartphones with thumb-based QWERTY keyboards (hard and touch-based) are in the upper bound for mobile to remain pocket-friendly.

Ideally, we do want our fluid layout pages to scale down well to the current mobile category of devices, and not to serve and maintain special mobile versions of our sites. As it stands, the gap still holds, and for the sake of the user experience in the present day, this is how many of us will approach it. We'll see where the future takes us from there.