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?
Points of interest [Prior Research before asking these questions]
- Why shouldn't "responsive" web design be a consideration?
-
Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques
-
A recent list of tutorials 30 Responsive Web Design and Development
Tutorials by Eric Shafer on May 14, 2012
Update
Ive been reading that the basic point of designing content for different layouts to facilitate a responsive web design is to present the most relevant information.
now obviously between the smallest screen width and the highest we are missing out on design elements.
I gather from here http://flashsolver.com/2012/03/24/5-top-commercial-responsive-web-designs/ The top of the line design layouts (widths) are
- desktop layout (980px)
- tablet layout (768px)
- smartphone layout – landscape (480px)
- smartphone layout – portrait (320px)
Also we have a popular responsive website testing site http://resizemybrowser.com/ which lists different screen resolutions.
I've also come across this while trying to find out the optimal highest layout size to account for https://stackoverflow.com/questions/10538599/default-web-page-width-1024px-or-980px which brings to light seemingly that 1366×768 is a popular web resolution.
- 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.
- Does it make sense to have additional information ( which conflicts with purpose of responsive web design) to utilize the top size and beyond?
Best Answer
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.
This feature is based on Media Queries which I think is a feature of CSS3, so CSS3 is a prerequisite.
Bootstrap is one.
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.
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.
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)
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.