Statistics or research on browser window size based on the display screen size

Question

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.

Answer 1

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.

Answer 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.

Answer 3

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)