Javascript – Responsive Web Design vs. User-Agent Sniffing

I thought long and hard about this all morning. This is a very interesting question.

I think the solution that Christian purposed, which is also the defacto-standard, is an inelegant solution that works against progressive enhancement. While it could be said that it is progressive because if the user does not have the site Javascript enabled, they will simply see a slim version of the website without the extra goodies loaded on view.

However, I don't like this approach. I have Javascript mostly disabled in my browser, and I run my windows at 1024 - 1280px most of the time, and a site designed for a base of 800px with Javascript on-loads will look pretty bare to me.

That said, I think I may have come up with a solution.

I think the best way to go about responsive design might be by using a tracking image and server-side intervention.

In your style sheets, you could have:

@media (screen and max-device-width(800px) {
    #sometag {
        background-image: url('track-800.gif');
    }
}

@media (screen and max-device-width(496px) {
    #sometag {
        background-image: url('track-496.gif');
    }
}

Now, provided that image is served on a cookie-enabled domain, the web browser will pass the session id back to the server, enabling sessions on that request. If you have these images served by a php-script, you can now track and store the size of the device the user is using.

Given this information now stored in a session variable, you can disable areas of the page (on subsequent page loads) that will never display for the users device resolution.

Disclaimer

This method would require utilizing max-device-width() media queries, rather than max-width() queries. The difference is the application size would be based on the size of the users display, rather than the size of the window.

Firstly right to the jargon ,is there any actual difference between the two or do they mean the same?

Fluid in its historical context meant it was NOT fixed i.e it expanded if a wider screen was available. Precursor to responsive. Fluid does not mean it adapts to smalleer/tablet/smartphone screens.

Responsive means, it adapts to device/screensize.

Is it safe to classify the current development mainly a html5/css3 based one ?

This feature is based on Media Queries which I think is a feature of CSS3, so CSS3 is a prerequisite.

What Popular frameworks are available to easily implement this?

Bootstrap is one.

What are the most common compatibility issues in terms of different browser types?

Volumes could be written on incompatibilities. But you just should be aware that there are differences. Proper resets have been developed and improved. Keep an eye on those and try to test as much as you can. Newer features have varying level of compliance in different browsers, so be aware of that.

I understand there are methods like this http://css-tricks.com/resolution-specific-stylesheets/ which does this come under?.

This is an example of media query. The feature which makes responsive design work.

Are there any external browser detection methods besides the api calls specific to the >browser that are employed in this regard?

I am not sure, but generally, browsers have an identifier which is part of the HTTP request. It is not strictly speaking "reliable" as you can easily craft an HTTP request and claim to be from Chrome, but practically, it works.

Is it safe to assume that just accounting for proper scaling from width 980px onwards to the maximum size would be sufficient to accommodate this? given we aren't presenting any new information for the new size.

Just because the industry trend is to lock at 980px does not mean you cannot design for a bigger screen. If your usecase mandates that you present a more richer content to bigger screen, perhaps you can tinker with it. But generally the practice is that 980 is the max contemporary designers consider desktop top be, considering there is no new content. (but this assumption is not set in stone - you can decide to ditch it if it makes sense)

Does it make sense to have additional information ( which conflicts with purpose of responsive web design) to utilize the top size and beyond?

Actually this debate is still ongoing, but I personally think, responsive design means you have the opportunity to present content differently, and even different content. So what is best for a smart phone is not going to be sufficient for a desktop. In the end it would be your personal judgement based on your requirements.