The question is: what does the user actually want? What experience should we aim to provide to the user, regardless of technical implementation and design details? The two main answers to this would be 1) fastest page load and interaction regardless of connection speed, and 2) the ability to consume one type of content at a time / one task at a time. In an ideal world, what tools could we use to provide this?

• Responsive web design/components: Whether you’ve got a separate mobile site or not, all your front facing content should be responsive. There is no excuse (cost of implementation should be lobbied for if necessary) if you are serious about providing a good user experience to your audience not to consider this, progressively adding more complexity to your layout. If you are using a modular approach to your front end as described in a previous post, hopefully in the future we’ll be able to apply element level media queries http://filamentgroup.com/lab/element_query_workarounds/.
• Better IA and User flow: This means tailoring the main content flow to allow the users to access on type of content or a task at a time. This especially important if screen real estate is limited on mobile devies, you need to strike the balance between providing enough obvious and accessible navigation to help the user, but not so much that is get in the way of the task they are trying to complete.
• Network Speed Detection: If this ever becomes available, I think it would be a ground breaking addition to the tool belt. The implementation would have to be two fold: firstly, when initially connecting to webpage, send a header with the last known connection speed (WiFi, 4G, 3G, the dreaded E). and then secondly something browser-side in JS, the ability to check the current connection speed ad hoc, but also bind to network change events, such as when a user suddenly changes from 3G to 4G, or from 3G to WiFi. One example use of this could be changing the version of images that are lazy loaded depending on the connection spped, or providing some sort of UI element over an image to optionally update it to a higher quality by the user, rather than consuming their data usage. This is similar to how Youtube provides quality toggling on videos, or how Netflix will shift to a lower resolution should the connection speed drop.

A word on server side UA detection: The utility of this is debatable. Firstly as you will need to keep or reference an up-to-date list of mobile user agents, a cumbersome task (thought resources do exist, they require downloading a snapshot file or a hTTP request). Secondly, how useful is it knowing that you a serving content to an iPhone rather a Macbook Pro? Whats the connection speed? Is the device expecting retina? I believe this approach will become redundant as move devices appear and the line between mobile / tablet / desktop becomes blurred. Additionally, if you use a full page caching layer, you would have to segment you pages into N buckets depending on the number of different versions you wish to serve, which adds complexity.