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.