User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 ?

share|improve this question

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.

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.