As I understand these form the basis for targeting a wide array of devices based

Question

As I understand these form the basis for targeting a wide array of devices based on the browser size, given it would be a time consuming to generate different layouts targeting different/specific devices and their resolutions.

Questions:
Firstly right to the jargon, is there any actual difference between the two or do they mean the same?
Is it safe to classify the current development mainly a html5/css3 based one?
What popular frameworks are available to easily implement this?
What testing methods used in this regard?
What are the most common compatibility issues in terms of different browser types?
I understand there are methods like this http://css-tricks.com/resolution-specific-stylesheets/ which does this come under?.
Are there any external browser detection methods besides the API calls specific to the browser that are employed in this regard?

Explanation / Answer

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.

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.

Related Questions

Navigate

• Browse (All)
• Browse A
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.