20

I'm trying to support or falsify the hypothesis that desktop browser viewport size is distributed multimodally (that is, with "peaks" in the distribution that might make for useful website design constraints).

Is there any serious research that's been done on desktop browser viewport sizes - whether and when users maximise windows, how users interact with large monitors, and any data that might help with this?

To specifically tackle one aspect of this question: how related are viewport sizes to screen resolution?

3
  • Also if someone with enough rep could tag this with "viewport" I'd appreciate it.
    – kastark
    May 16, 2012 at 9:58
  • Do you have a particular question you're looking to get an answer to? Just a request for general research into an area is quite broad, but if you have a specific question (such as "is designing my eCommerce site to fit a viewport of 960 going to be appropriate for the majority of site visitors") you're more likely to get useful information. Research can get get out of date quickly but a specific question about a current situation is going to be more useful.
    – JonW
    May 16, 2012 at 10:08
  • 1
    Also, this previous question may provide you with some additional help.
    – JonW
    May 16, 2012 at 10:11

4 Answers 4

17
+100

"...how related are viewport sizes to screen resolution?"

This is an interesting question. This answer is probably a good starting point to get the information you're looking for.

I don't have any empirical data to support this, but I imagine that viewport size and screen resolution diverge as screen resolution increases. And there's probably a distinct range of screen resolutions that this divergence kicks in at.

For example, on smartphones and tablets, from what I've seen windows always take up the entire screen. So with these lower-resolution devices, screen resolution ~ viewport size. For data on the distribution of screen resolution (and thus approximate viewport size) among Android and iOS smartphones and tablets, see the 'Resolution' section toward the end of http://opensignalmaps.com/reports/fragmentation.php.

With a large desktop monitor, viewport size can obviously be much smaller than screen resolution. However, I just walked around my office, and the overwhelming majority of people had their browser window maximized.

As for when users maximize their browser window, I think users tend to do that when they're in a fluid UI flow/quickly responsive interface, and/or when they're focused on the application. For example, if users are waiting for over a few seconds for some action to complete, they might resize their browser window to give room for an IM client to chat with others to pass the time. Conversely, if the user is doing work in a non-browser application (e.g. a spreadsheet editor), the browser might be the application users expand to, say, half of the available screen width while waiting for some operation on their application of main concern to complete.

So the relation between viewport size and screen resolution might depend slightly on what your application represents for the user: a way to get their work done, or a place to go for temporary distraction.

Whether users have multiple monitors seems like it would probably also have an effect on the relation between viewport size and screen resolution.

These are mostly just small observations and speculations. Having actual data on this would be much better.

Edit:

"...are there ever any cases where viewport is larger than screen resolution?"

No; viewport size is always less than or equal to screen resolution.

The CSS 2.1 specification states that the viewport is "a window or other viewing area on the screen through which users consult a document", or, in other words, the visible area of the document. And screen resolution is the total width and height of the user's screen. A screen's visible area is always constrained by the screen's width and height, so screen resolution sets an upper bound on viewport size.

A web browser's viewport is almost always smaller than the user's screen resolution. For example, even when a browser window is maximized, the viewport is within the browser's chrome (the borders and widgets like the scroll bar and address bar that frame the document in the browser window). Browsers like Chrome and Firefox have sought to minimize the difference between screen resolution and viewport on their desktop products over the past few years. The viewport is also almost always smaller on mobile browsers, too. In both iOS and Android, an OS system tray (showing notification icons, battery charge level, time, etc.) is always situated on top of the browser viewport. I'm less familiar with IE in Windows Phone 7, but this picture shows it has some browser chrome below the viewport.

Browsers' viewport size is almost always smaller than screen resolution. On desktop browsers, the only case where viewport size and screen resolution would be equal would be when the user is viewing the browser in full-screen mode, for example when watching a video, doing a presentation with their screen forwarded to a projector, or maybe playing a game.

Because visual real estate is so valuable on mobile devices, they'll probably continue to be on the leading edge in the trend toward minimizing the difference between viewport size and screen resolution by doing away with displaying browser chrome, OS system trays and the like by default.


And going back to your original, base question:

"I'm trying to support or falsify the hypothesis that desktop browser viewport size is distributed multimodally..."

The bar chart below, created from data at http://gs.statcounter.com/#resolution-ww-monthly-201111-201204-bar, shows that the worldwide market share of desktop screen resolution is multimodal. Note the peaks at 1024 x 768, 1280 x 800 and 1366 x 768.

Market share of desktop screen resolutions, 11/2011 through 4/2012

The fact that desktop screen resolution is multimodal doesn't necessarily mean that desktop viewport size is multimodal, but given my points above I think this is some indirect evidence that it often is.

5
  • Interesting insights, thank you. This might sound like a silly followup question, but are there ever any cases where viewport is larger than screen resolution? And is that important?
    – kastark
    May 17, 2012 at 8:50
  • 1
    Wow, thank you for the additional research. This is an exceptional answer. I wish I could upvote you more for it.
    – kastark
    May 21, 2012 at 10:11
  • 1
    Technically, it is possible to have a viewport larger than screen size -- this happens whenever I unplug my external monitor, leaving windows stretched larger than the remaining screen. Not very useful, and I can't imagine any sensible reason to deliberately set things up that way.
    – Erics
    May 22, 2012 at 16:01
  • while that's a good chart for desktops, we have to constantly remind ourselves that the web isn't a desktop medium anymore.
    – DA01
    May 22, 2012 at 19:16
  • Your assertion that window size can't exceed screen size is wrong; a browser can be stretched across multiple desktops but will only report the screen size of one, but the browser size will be reported accurately as exceeding that.
    – Josh
    Jun 11, 2014 at 11:18
1

how related are viewport sizes to screen resolution

The only concrete relation is that the screen resolution = the maximum potential viewport size.

Other than that, I don't know if it makes sense to over-analyze the correlation.

It's very plausible that there are peaks only because a) lots of people do maximize browsers and b) there (traditionally, at least) were common screen resolutions.

However, as we come out with bigger and bigger monitors (thereby encouraging people to NOT maximize all their apps) as well as smaller and smaller monitors (phones, tablets, etc.) the peaks are likely going to become smaller and more numerous.

0

Optimizing a website for a specific resolution or viewport size, even if the optimization is done for the top 2 or 3, is not good idea in my eyes. The design should be flexible enough to work with a 27" desktop screen as well as a 10" netbook or a 4" mobile phone screen.

You should, on the other hand, define a "maximum barrier" from where on the design is no more flexible but remains fixed. The readability of the content will decrease if you stretch the whole design too wide.

Generally those "barriers" change very slowly. 5 years ago you were pretty safe with something between 800 and 1024 px width. Today somewhere between 1024 and 1280 px should work in most cases, but that strongly depends on the target user of your site. Is it to be viewed by younger people who mostly browse on a smartphone or is the intended audience more of the kind office worked. Then the used display will be rather large.

You should ask yourself who will use the site from where and which device will he or she use most certainly. Optimize for your specific use case instead of using general statistics as a basis.

5
  • Are you advocating completely flexible design, or a single universal design that best fits my primary use case? Or both? I ask because if I use responsive design with media queries, it will require me to specify break points. Are you suggesting therefore that the design should be flexible/inflexible enough that media queries are a bad idea?
    – kastark
    May 16, 2012 at 11:08
  • BTW: If you relaunch an existing website, the web stats (like Google Analytics or something) are a good starting point to getting to know your users a little better.
    – Michael
    May 16, 2012 at 11:08
  • That also depends on the results of your user analysis. If you can be sure that 95% use a desktop browser with a resolution of 1280 or more you can go with that using a "normal" design. If not, define a minimum and maximum size where the design should work on and make it flexible in between.
    – Michael
    May 16, 2012 at 11:12
  • What I'm asking in the question is whether the exact values of those points should (or can usefully) be based on viewport data.
    – kastark
    May 16, 2012 at 11:27
  • If you already have some data for you specific site, then use that. If you create a new site, conduct some research for your specific case and do not use general data from other sites or "for all" sites.
    – Michael
    May 16, 2012 at 11:29
0

When designing sites in the past I've used the the Skeleton boilerplate to handle this. Skeleton automatically includes the CSS queries to support the most common screen sizes: iPhone portrait and landscape, iPad and standard monitor displays up to 960px. As the browser window resizes the site will adjust to fit.

I'm not sure if this qualifies as supporting your hypothesis about viewport size "peaks" but I hope it helps.

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.