Responsive Web Design vs. User-Agent Sniffing

Question

The CSS3 media query feature has led to many interesting possibilities in terms of developing websites which adjust to many different screen sizes and devices.

However, in practice, I'm starting to get the sense that the CSS3 media query feature, and the whole "Responsive Web Design" movement, may not live up to its promise.

The problem I see is that, at the end of the day, web developers care mostly about whether their users are viewing content via a Desktop, Tablet, or Mobile device. But CSS3 only provides a means to detect screen resolution. In theory, detecting screen resolution seems like a great way to adjust for various different devices. But in practice...

Suppose we have a simple Javascript function that just outputs the screen width:

function foo()
{
 alert(screen.width);
}

On my Blackberry Touch, this outputs:

768

On my Samsung Galaxy, this outputs:

800

So...um, at this point, the resolution of mainstream smart phones is getting pretty close to Desktop-level resolutions. The ability to detect whether a user is viewing your website via a smartphone, tablet, or desktop, seems to be increasingly difficult if all you're going by is screen resolution.

This makes me call into question the entire wisdom behind the whole CSS3 "Responsive Web Design" movement based on media queries. It almost seems like the media query feature is better suited towards adapting to a resizing browser window on a Desktop screen, rather than various mobile devices.

Another possible technique for detecting mobile or tablet devices is to use feature detection, by checking if the ontouchstart event is supported. But even this is becoming increasing unreliable as many Desktop screens start to support touch.

Question: So... as a web developer, if I can't rely on RWD or feature detection, is user-agent sniffing (as notoriously unreliable as always) really the best option to detect mobile devices?

• ruakh: If the goal of Responsive Web Design is (as Wikipedia claims) "easy reading and navigation with a minimum of resizing, panning, and scrolling", then why do you care whether it's a desktop or a mobile? What matters is the device's screen resolution and screen size, not what type of device it is. No?
• Channel72: I guess what I'm saying is that the connection between "screen resolution" and actual screen size (e.g. centimeters/inches of screen width) is becoming increasingly transient.
• zuallauz: I thought you're supposed to do something with the device-width media query because the width/resolution is becoming increasingly inaccurate especially with pixel density of various displays e.g. Apple's "Retina" devices. So then if the device width is within the general width for a mobile device then you show a different layout. For an tablet/desktop user I just show the same layout ie 1024px wide.
• Channel72: @zuallauz, isn't support for device-width pretty bad?
• user44798: Why not go by em units? That way the content shifts based on available text space...

Answer 1

Stop worrying so much about specific devices.

The ability to detect whether a user is viewing your website via a smartphone, tablet, or desktop, seems to be increasingly difficult if all you're going by is screen resolution

It is getting increasingly difficult to detect via screen resolution, and it will only get harder as more devices enter the market, but the purpose of media queries is not to detect device types.What media queries are good at is making tweaks to your design when it is no longer pleasant to use at the current dimensions. If the site starts to fall apart at 550px wide, then it doesn't matter if there's a device with those dimensions or not: you set the breakpoint there.

Its the same deal with feature detection. If the device supports touch, then what does it matter if it's a mobile device or some future wall-sized monitor? Either way the touch enhancements will probably be useful.

User-agent sniffing - as you've stated - is completely unreliable. I could change my User-agent string to Shakespeare quotes if I really wanted too. What would your site decide about my browser then?

User agents also require a lot of work to handle all the possibilities. Do you have one for Firefox on android? Chrome on IOS? Dolphin on Froyo? The WiiU Browser? The extremely limited browser on my old LG feature phone? Lynx? IE 13? Links? IceWeasel? The Blackberry playbook's browser? How are you telling the difference between Opera running on a tablet and opera running on a phone?

This list can only grow as time goes on.

• Channel72: Well, a 1-column layout usually lends itself well to smartphones. For a tablet, you can get away with a 2 column or even 3 column layout, and for Desktops typically 3 columns works fine. Regardless, the ideal number of columns you display is typically a function of the biological capabilities of the human eye, rather than screen resolution. My point is that it would be nice if there was a tighter correlation between screen resolution and the likelihood that a typical human will be able to easily scan your site visually. At least, CSS3 seems to assume such a correlation.
• Mike Gossmann: There's supposed to be, actually. CSS pixels are supposed to be defined using angles and distances not physical pixels. Many manufactures are ignoring this in their default settings though.
• Eric King: @Channel72 A 1-column layout lends itself well to any narrow screen width. It hardly matters whether the screen width is narrow because it's a smartphone browser, or a desktop browser in a re-sized window on a giant monitor. Responsive web design attempts to accommodate all scenarios appropriately, regardless of user agent.
• John: What if you are going to serve completely different view for mobile users. What about preventing mobile uses from downloading all the irrelevant data needed for desktop users. User agent is the way to go...

Answer 2

User agents lie, too. If you Google around, you'll find lists of user agents vs reality. So this is a problem. Some resort to looking at the dpi setting to determine which or what kind of device it is.

• John: If someone had a need to provide false data in user agent data, he will get a default version of the website...