1

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 ?

copenndthagen
  • 49,230
  • 102
  • 290
  • 442
  • May be it would be better to move the question to http://ux.stackexchange.com ? – Sergey Sep 15 '11 at 07:57
  • Are you using definitions such as @media min-device-width: for adding specific elements to a basic stylesheet or are you using completely different layouts based on the screen size? – Johannes Sep 15 '11 at 08:08
  • Questions about development design decisions go on [Programmers.SE](http://programmers.stackexchange.com/) – Izkata Nov 04 '13 at 01:41

3 Answers3

1

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.

Oliver M Grech
  • 3,071
  • 1
  • 21
  • 36
1

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.

florian h
  • 1,162
  • 1
  • 10
  • 24
  • Ok..So even if a desktop user sees smaller images, grids, etc at smaller browser sizes and his experience changes as he resizes the browser..is that still fine? Pls let me know your suggestions.. – copenndthagen Sep 15 '11 at 08:05
  • I think it is, yes. If the user decides to make his browser window ridiculously small he most likely will be happier with a changed layout than allows him to use the website instead of only being able to see a very small part and having to scroll horizontally. I think the user should never have to scroll horizontally as this is very inconvenient... – florian h Sep 15 '11 at 08:13
  • But what about cases where u have touch specific interfaces e.g. A swipe like UI for iPad.. – copenndthagen Sep 18 '11 at 17:27
0

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.

DBUK
  • 1,373
  • 1
  • 23
  • 41