[powatom]

I think it largely depends on the type of website you're running. For example, the kinds of websites I visit are relatively text heavy - I want to see the text regardless of which device I'm using. These websites are pretty light on images and few use any kind of 'novel' widgets or fancy animations. For these kinds of websites, I think responsive design is a pretty nice solution to the problem of different screen sizes. By and large, implementing a responsive design using the methods outlined in the OP is a nice solution which has the best trade-off between results and development time.

However, if you're running a photo-blog, then you probably want to only serve smaller images to mobile clients, and larger ones to desktop clients. Same goes for interactive websites. If your website has some novel navigation mechanism, or is very JS heavy, then you probably want to think more about whether you simply need to split your website into two separate versions: one for mobile, one for desktop.

I think a decent 'cut-off' point is when you start needing to muck about with handling viewport sizes through JS. At this point, it seems to me like your design isn't capable of handling the various screen sizes: if my mobile browser needs to run a bunch of javascript just to display correctly - by turning a menu bar into a drop-down menu for example, or modifying the page's navigation mechanisms - then in all honestly you might save yourself time and effort by simply creating a separate mobile version.

Obviously, there are exceptions to any rule, and I don't think there are any true clear boundaries, and even the 'JS boundary' can be managed nicely through progressive enhancement and dependency management.

Personally, I'm pretty happy with the 'one size fits all' solution. I don't think there's anything inherently wrong with media queries and simply modifying the CSS based on viewport size. It seems much more work to create and maintain separate versions of a website's theme for different viewport sizes.