18

There are many sources and references for reports on screen resolution and display sizes for desktop (and mobile), and there are less information about browser window sizes. I think both pieces of information would be valuable for designing web applications need to determine their adaptive design strategy for the desktop. Many people probably assume that people run their browser window at the maximum size, but in fact I think wide screen monitors or TVs make it less likely for users to do so because most websites that have a responsive design look rather vacant on wide display resolutions.

Does anyone know of good sources of information or research on the comparison between screen resolution and browser window sizes? It doesn't have to be about the Internet population, even just a subset of users or a specific context in which research shows that people don't match their browser window size to a monitor size.

There may not be a definitive answer on the question, but some scenarios or context for whether it is a known user behaviour to either resize browser windows depending on the web applications that they are using or to just leaving it the same would be interesting to know for designers to consider when creating a design strategy.

UPDATE: Now that Google Analytics provide a visualization for screen/browser size comparison, perhaps some of the answers here are obsolete or can be updated.

9
  • 4
    possible duplicate of Are there any stats on browser widths as opposed to monitor size?
    – Josh
    Jun 11, 2014 at 6:27
  • Probably not because I am after both monitor size and browser widths, rather than just looking at one or the other.
    – Michael Lai
    Jun 11, 2014 at 7:11
  • 2
    "Many people probably assume that people run their browser window at the maximum size" <- no one has thought this in years.
    – cimmanon
    Jun 15, 2014 at 23:40
  • 4
    It is shocking that almost everyone looks at screen size instead of browser window size, because screen size is completely irrelevant. Jun 15, 2014 at 23:47
  • 3
    I'm not sure if the question itself is duplicate or not, but I think the answer would be. The CSS tricks article at css-tricks.com/screen-resolution-notequalto-browser-window is one of the best I've seen and goes over many aspects of both screen resolution and viewport resolution. Would be great to find someone who repeated this test more recently though. Jun 16, 2014 at 8:08

3 Answers 3

12
+50

I love this question, and I love that you asked it. Points given.

I also think it's fundamentally misunderstanding how we approach to adaptive/responsive design - which is really not surprising since we're on a UX board and not a product design board. UX designers, almost by definition, aren't front end engineers.

Because there's a bounty on this, I'm assuming that you need a usable answer - so I'm going to do my very best to provide one. As I'll explain at the end though, I don't think you actually need the data you're seeking. More on that in a moment... I don't expect that to make sense yet.

Forgive me if some of this is redundant or remedial, it's not a slight on your intelligence or experience, I simply prefer to answer this in a way that will be useful to all future readers and not just someone who is already conceptually literate. Google has a habit of finding these things later, then serving them to new seekers of knowledge. So, with that in mind, let's back up for a moment and consider some of the fundamental tenants of responsive design.

  1. We begin with a mobile first approach, and then we practice progressive enhancement from there. Typically, this means making sure our site looks great at 320 CSS pixels wide and then changing our layout around as the screen gets larger.
  2. Fundamentally, we cannot predict the size of our user's screen. Some people are browsing in portrait mode on a phone or tablet, while others are in landscape mode. Even if we could guarantee everyone browsing in full screen mode, there would be hundreds of permutations based on mobile devices alone. Some people are browsing full screen at 1920px wide, minus a 28px scroll bar, and others are browsing in a windowed frame. In order to deal with this, we work in fluid percentage-based widths (and sometimes heights) as often as possible, then we think in breakpoints for larger layout shifts. CSS frameworks like Foundation and Bootstrap were designed to circumvent having to redesign a fluid system every time you get a new client, but they follow the same logic we're examining here.
  3. Thus, it matters not what our user's screen resolution is set to because in responsive design, we are already oriented on the viewport in the media query, as opposed to the total screen resolution. In my own work, I frequently use vertical media queries, which tend to get overlooked by a lot of designers. If I discover that I have only about 500 CSS pixels of vertical space, I'll display: none the 300px header graphic so that my content + call to action aren't being pushed off of the page (hooray usability!). While this is more typical of a visitor on an older tablet, or a phone in landscape orientation, from time to time it happens when a low-literacy user hits a site and has 40 IE toolbars installed (buh-dum-tss).

So, when we consider the fact that a well designed CSS media query is already asking "how much horizontal/vertical space do I have, and how should I arrange my elements?", and it's asking from the perspective of enhancing the user experience as pixels become available, rather than gracefully degrading it as they disappear; we realize that responsive design already works on window size. A media query isn't considering screen size - which only tells us how large we might go in extreme circumstances.

The actual statics themselves would be wildly variable. I'm typing in a full screen window, but I have several randomly sized windows in various browsers on my right hand monitor. I've even got a tab with a bunch of pre-configured responsive sizes open via the Web Developer extension for Chrome. My point here - is that even on this one system I could poll 11 different window sizes. The statistical result wouldn't be a set of standards, it would be a histogram.

As a result, I'm not sure you're ever going to find the data you're looking for, if only because statisticians prefer predictive and actionable data to descriptive data. With a good understanding of how & why media queries work though, you should be able to avoid ever needing to know.

2
  • You are correct, it is not really one of those questions that can necessarily be answered, but I am interested in the thoughts behind the answer. You have made a very compelling argument for the designer doing the thinking so the user doesn't have to.
    – Michael Lai
    Jun 16, 2014 at 22:23
  • I understand the curiosity for sure. You would basically see a heuristic graph based on the total users of each platform, with a bias to mobile because they can't change resolution on the fly.
    – Imperative
    Jun 17, 2014 at 0:38
2

There are some stats and an approach to study this issue in this article http://css-tricks.com/screen-resolution-notequalto-browser-window/

older stats over time here http://mentalized.net/journal/2009/02/19/size_still_matters/ from his original argument challenging a Jacok Nielson suggestion http://mentalized.net/journal/2006/10/24/browser_size_does_matter_-_actual_numbers/

As it is stats from only the css-tricks.com users they are likely to be more of the design/ development community, then the general public. If you were able to get google analytics data from other sources you could repeat the test.

As you mention many website do not currently cater to large widescreens, most catering to 960px or lower. To some degree the technical issues of adapting to larger displays have outweighed the potential benefits. This is changing though, as new layout abilities such as CSS column for multi-column content and CSS Flex for greater control on layout are becoming available.

I have seen a 'Please resize your browser' on www.remotecontroltourist.com if it is too small, and the site does a reasonable effort of making the most of full screen on large monitors.

I'll keep looking and ideally find some more recent white papers on the subject.

1
  • You'll be hard pressed, I suspect. Modern media queries in responsive design sort of killed this line of inquiry. Thus, from 2011 and on, it'll dry up.
    – Imperative
    Jun 18, 2014 at 3:25
1

You're attempting to size the market online... at best we know 2.4billion people potentially exist online right now and assuming you can pin down that audience to some qualitative statistical breakdown....

To put it another way, I tried to size the market for Microsoft Silverlight and it ended basically with methodologies like the one used by Adobe Flash - ie % of the potential inferred market based of sampling. The samples themselves were a little smelly though as for example Flash was being downloaded on average 8million times a day but they had 98% ubiquity...so.. 8million * 365 = 2billion????

My point is the original author asked for a "credible" source and really it's not going to exist as nobody has sized the market properly yet (from a guy who's team spent millions on market research)

2
  • 1
    This isn't necessarily just about the market size, although obviously the credibility of the information would depend on how representative it is. I have made some adjustment to the question to allow the answer to be provided for a specific context. Hope that helps.
    – Michael Lai
    Jun 20, 2014 at 1:02
  • Oh ok. Yeah I was just trying to ascertain that sizing is part of the data (probably deeper down that rathole) which could if done wrong "poison the well" depending on your audience you're soliciting or showing the said data to. Jun 20, 2014 at 4:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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