Question on fluid web design

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 ?

Answer 1

It depends on the exact differences between the designs.

If the differences affect basic navigation and fundamental layout rules, I'd tend to suggest you target platforms rather than viewport sizes, because my instinct (quite possibly wrongly) suggests that whilst users already expect different interfaces on different devices (eg mobile versions of websites), they wouldn't expect similar differences across different desktop experiences.

If the differences are mostly aesthetic, then your CSS 'targetting' will be more 'accurate' (ie use the best option more often) if it considers nothing except pure viewport size.

Answer 2

I would use a combination of the two. So you would use 'width' for minor visual changes which will appear when the user views in different sized browser windows. Then use 'device-width' for potentially more major functional changes that would be suitable for different devices?

Therefore a desktop at 320px wouldn't necessarily look the same as a mobile device.

Is this possible? I must admit I haven't tried it myself.