Question on Fluid Web design [closed]

Closed. This question needs to be more focused. It is not currently accepting answers. 开发者_StackOverflow中文版

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 9 years ago.

Improve this question

There are 2 ways in which we can implement a fluid design (one that would adjust itself to the screen size on which it is viewed on);

Approach 1: We can just use the available browser size (or viewport width/height) and accordingly define our CSS.... This is equivalent to using say a CSS @media max-width:320px In this approach, even a desktop browser which is squeezed to a very small size would display the same design as on a mobile device

Approach 2: We design our CSS based on the device which it is viewed on (desktop/mobile/tablet). This is equivalent to using say a CSS @media min-device-width:768px

So if you see, there is a difference in how we are identifying which CSS to apply based on either "width" OR "device-width"

My question is NOT about media queries and HOW to apply them at all..

My question is which out of the 2 design approaches should be the preferred one, any PROS/CONS for either of them? Should we design for a device OR should we design for the available browser area ?

---

I prefer the "design for available browser area" approach, because you shouldn't force the user to maximize his browser window to fully view your website even though there would be a CSS for smaller browser areas (but you don't use it because the user THEORETICALLY has more screen space). This not only affects desktop users with widescreen monitors but also tablet users. E.g. Windows 8 will bring a convenient function to scale the browser to 2/3 of the screen width, which might be too small for your website to display properly.

---

I would always design for the available browser area. The mobiel device market and also hardware manufacturing ( higher screen resolutions and screen ratios) is constantly evolving and trust me designing for a device will put your website in a mess in a short period of time.

Let me know what your final decision will be as I am really interested in this subject.

---

I am leaning towards a mobile first approach or rather a minimal non device specific one. Small style sheet and the site built for mobile first then adding things in for the higher resolutions via media queries.